• 如何搭建一个react项目(详细介绍)


    要搭建一个基本的 React 项目,你需要执行以下步骤。在开始之前,请确保你已经安装了 Node.js 和 npm(Node 包管理器)。

    1,创建项目目录

    首先,创建一个项目目录,并在终端中进入该目录。

    mkdir my-react-app
    cd my-react-app
    
    • 1
    • 2

    2,初始化项目

    使用以下命令初始化一个新的 npm 项目。按照提示,你可以设置项目名称、版本、描述等信息。

    npm init
    
    • 1

    3,安装 React 和 ReactDOM

    使用 npm 安装 React 和 ReactDOM,这两个包是构建 React 应用所必需的。

    npm install react react-dom
    
    • 1

    4,安装 Babel

    React 使用 JSX 语法,需要通过 Babel 转译成标准的 JavaScript。安装 Babel 相关依赖:

    npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev
    
    
    • 1
    • 2

    5,创建项目文件

    在项目目录中,创建一个简单的 React 组件文件和一个 HTML 文件。

    在项目根目录创建一个名为 src 的文件夹。

    在 src 文件夹中创建一个名为 index.js 的文件,用于编写 React 组件。

    在项目根目录创建一个名为 index.html 的文件,用于加载 React 应用。

    6,配置 Babel

    在项目根目录创建一个名为 .babelrc 的文件,并配置 Babel 的预设:

    {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    
    • 1
    • 2
    • 3

    7,创建 React 组件

    编写一个简单的 React 组件,例如:

    //在这里插入代码片 src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    function App() {
      return <h1>Hello, React!</h1>;
    }
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    8,创建 HTML 文件

    在项目根目录的 index.html 文件中创建一个容器元素,该元素将用于渲染 React 应用。示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>React App</title>
    </head>
    <body>
      <div id="root"></div>
      <script src="dist/bundle.js"></script>
    </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    9,创建 Webpack 配置

    使用 Webpack 来构建和打包 React 应用。首先,安装必要的依赖:

    npm install webpack webpack-cli webpack-dev-server --save-dev
    
    
    • 1
    • 2

    在项目根目录中创建一个名为 webpack.config.js 的配置文件,配置 Webpack:

    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader'],
          },
        ],
      },
      devServer: {
        contentBase: './dist',
        port: 3000,
      },
    };
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    10,运行开发服务器

    在终端中运行开发服务器:

    npx webpack-dev-server --mode development
    
    • 1

    11,查看应用

    在浏览器中访问 http://localhost:3000,你将看到 React 应用程序运行。

  • 相关阅读:
    【LeetCode-389】找不同
    【Redis底层解析】整数集合
    如何修改外接移动硬盘的区号
    亲手将TP-LINK路由器改装成交换机使用
    撤销和重做实现-第三部分(备忘录模式)
    Oracle(2-5)Usage and Configuration of the Oracle Shared Server
    传奇人形怪爆率怎么设置?人形怪增加教程
    2008-2009期末试题A卷
    记录--IR_cut切换模块流程
    64位Linux系统上安装64位Oracle10gR2及Oracle11g所需的依赖包
  • 原文地址:https://blog.csdn.net/weixin_46002631/article/details/132858207