如何搭建react环境

安装Node.js和npm

确保系统已安装Node.js（包含npm）。可通过官网下载最新稳定版本，安装后验证版本：

node -v
npm -v

使用Create React App快速搭建

官方推荐使用Create React App（CRA）工具生成项目模板：

npx create-react-app my-app
cd my-app
npm start

此命令会创建名为my-app的项目并启动开发服务器，默认访问http://localhost:3000。

手动配置Webpack（可选）

如需自定义构建流程，可手动配置Webpack和Babel：

安装基础依赖：

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react --save-dev

创建webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000
  }
};

配置Babel

创建.babelrc文件：

{
  "presets": ["@babel/preset-react"]
}

项目结构示例

基础目录结构建议：

my-app/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   └── index.js
├── package.json
└── webpack.config.js

启动开发环境

在package.json中添加脚本：

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

运行开发服务器：

npm start