如何搭建 react 项目

使用 Create React App 搭建项目

Create React App 是官方推荐的脚手架工具，适合快速初始化项目。
确保已安装 Node.js（建议版本 16+），在终端运行以下命令：

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

项目将自动启动开发服务器，默认访问 http://localhost:3000。

手动配置 Webpack 项目

如需更灵活的配置，可手动设置 Webpack 和 Babel：

1. 初始化项目并安装基础依赖：

   mkdir react-manual-setup && cd react-manual-setup
   npm init -y
   npm install react react-dom
   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

2. 创建 webpack.config.js 配置打包规则：

   const path = require('path');
   module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
   },
   module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
   }
   };

3. 添加 src/index.js 和 public/index.html 文件，运行 npx webpack 打包。

使用 Vite 构建高性能项目

Vite 提供更快的开发体验，适合现代浏览器项目：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Vite 默认支持热更新和 ES Module，构建速度显著优于传统工具。

集成 TypeScript

在 Create React App 中直接使用 TypeScript 模板：

npx create-react-app my-app --template typescript

手动配置需额外安装 typescript 和 @types/react，并配置 tsconfig.json。

项目结构优化建议

• 组件按功能模块划分目录（如 components/Button）。
• 状态管理根据复杂度选择 Redux、Context API 或 Zustand。
• 样式方案可使用 CSS Modules、Styled-components 或 TailwindCSS。

以上方法根据需求选择，Create React App 适合快速原型开发，手动配置适合深度定制。