如何新建react项目

使用 Create React App 创建项目

通过官方工具 Create React App (CRA) 快速搭建项目，需提前安装 Node.js（版本 ≥ 14.0.0）。

安装 CRA 并创建项目：

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

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

使用 Vite 创建项目

Vite 提供更快的构建速度和开发体验，适合现代 React 项目。

安装并初始化项目：

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

Vite 会生成优化过的项目结构，开发服务器默认运行在 http://localhost:5173。

手动配置 Webpack 项目

适合需要深度自定义配置的场景，步骤如下：

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

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

创建 webpack.config.js 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    port: 3000,
    open: true
  }
};

项目结构规范

典型 React 项目目录结构示例：

my-app/
├── src/
│   ├── components/    # 可复用组件
│   ├── pages/         # 页面级组件
│   ├── App.js         # 根组件
│   ├── index.js       # 入口文件
│   └── styles/        # 样式文件
├── public/            # 静态资源
│   ├── index.html
│   └── favicon.ico
├── package.json
└── README.md

添加 TypeScript 支持

在创建项目时可直接选择 TypeScript 模板：

npx create-react-app my-app --template typescript
# 或使用 Vite
npm create vite@latest my-react-app --template react-ts

现有项目添加 TypeScript：

npm install --save-dev typescript @types/react @types/react-dom
# 重命名 .js 文件为 .tsx 并更新配置