下面介绍三种创建react项目的方式

1. 使用 Create React App（官方推荐，适合快速上手）

Create React App 是 React 官方推出的零配置脚手架工具，适合初学者和快速开发。

步骤：

1. 确保环境准备
   已安装 Node.js（v14.0.0+）和 npm（v6.0.0+），检查版本：

   bash

   node -v
   npm -v
   

2. 创建项目
   无需提前安装，直接通过 npx 运行：

   bash

   npx create-react-app my-react-app  # my-react-app 是项目名称
   

    

   （若使用 yarn：yarn create react-app my-react-app）

3. 进入项目目录

   bash

   cd my-react-app
   

4. 启动开发服务器

   bash

   npm start  # 或 yarn start
   

    

   项目会自动在 http://localhost:3000 启动，修改代码会实时热更新。

5. 构建生产版本
   项目开发完成后，构建可部署的静态文件：

   bash

   npm run build  # 或 yarn build
   

特点：

• 零配置，内置 Webpack、Babel 等工具
• 支持 React 最新特性（包括 Hooks、JSX）
• 内置 ESLint、测试工具（Jest）
• 缺点：配置隐藏较深，自定义配置需 eject（不可逆）

2. 使用 Vite 创建（快速构建，推荐生产项目）

Vite 是新一代构建工具，比 Webpack 启动更快，支持 React 项目的快速创建。

步骤：

1. 创建项目
   运行 Vite 初始化命令，选择 React 模板：

   bash

   # npm 6.x
   npm create vite@latest my-react-app --template react
   
   # npm 7+
   npm create vite@latest my-react-app -- --template react
   
   # yarn
   yarn create vite my-react-app --template react
   
   # pnpm
   pnpm create vite my-react-app -- --template react
   

    

   （如需 TypeScript，可选 react-ts 模板）

2. 安装依赖

   bash

   cd my-react-app
   npm install  # 或 yarn / pnpm install
   

3. 启动开发服务器

   bash

   npm run dev  # 或 yarn dev / pnpm dev
   

    

   访问 http://localhost:5173 查看项目。

4. 构建生产版本

   bash

   npm run build  # 生成 dist 目录，可直接部署
   

特点：

• 启动速度极快（毫秒级），热更新效率高
• 支持按需编译，适合大型项目
• 配置简洁，易于扩展（通过 vite.config.js）

3. 使用 Next.js（React 框架，适合全栈应用）

Next.js 是基于 React 的生产级框架，支持服务端渲染（SSR）、静态站点生成（SSG）等。

步骤：

1. 创建项目

   bash

   npx create-next-app@latest my-next-app  # 或 yarn create next-app
   

2. 配置选项
   交互式选择配置（如 TypeScript、ESLint、Tailwind CSS 等）。

3. 启动开发服务器

   bash

   cd my-next-app
   npm run dev  # 访问 http://localhost:3000
   

4. 构建生产版本

   bash

   npm run build  # 构建优化后的生产版本
   npm start      # 启动生产服务器
   

特点：

• 内置路由系统（基于文件目录）
• 支持 SSR、SSG、增量静态再生（ISR）
• 优化的性能和 SEO 表现
• 适合需要服务端能力的 React 应用

4. 手动配置（适合学习和深度定制）

手动配置 Webpack + Babel + React，理解项目构建原理。

步骤：

1. 创建项目目录并初始化

   bash

   mkdir my-react-app
   cd my-react-app
   npm init -y  # 生成 package.json
   

2. 安装核心依赖

   bash

   # 安装 React 核心库
   npm install react react-dom
   
   # 安装开发依赖（Webpack、Babel 等）
   npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin -D
   

3. 配置 Babel
   创建 .babelrc 文件：

   json

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

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

   javascript

   运行

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
     },
     module: {
       rules: [{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }]
     },
     plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
     devServer: { port: 3000 }
   };
   

5. 创建项目文件

   • public/index.html（HTML 模板）
   • src/index.js（入口文件）：

     javascript

     运行

     import React from 'react';
     import ReactDOM from 'react-dom/client';
     import App from './App';
     
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(<App />);
     

   • src/App.js（根组件）：

     javascript

     运行

     import React from 'react';
     export default () => <h1>Hello React!</h1>;
     

6. 添加启动脚本
   在 package.json 中添加：

   json

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

7. 启动项目

   bash

   npm start  # 访问 http://localhost:3000
   

选择建议

• 快速上手 / 学习：优先用 Create React App
• 生产项目 / 追求速度：选 Vite
• 全栈应用 / SEO 需求：用 Next.js
• 学习构建原理：尝试手动配置