创建 React 项目指南：Vite 与 Create React App 详

本文将详细介绍两种主流的 React 项目创建方式：Vite（现代、极速） 和 Create React App (CRA)（传统、稳定）。

✅ 推荐方案：使用 Vite（2024 年后首选）

Vite 是新一代前端构建工具，启动速度比 CRA 快 10~100 倍，支持 TypeScript、JSX、CSS 预处理等开箱即用。

步骤 1：确保已安装 Node.js（≥18.0）

复制代码

node -v # 推荐 v18+ 或 v20+
npm -v

若未安装，请先去 https://nodejs.org下载 LTS 版本。

步骤 2：创建项目（任选一种包管理器）

使用 npm（最通用）：

复制代码

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

💡 my-react-app是你的项目文件夹名，可自定义

💡 如果要 TypeScript 版本，把 react改为 react-ts

步骤 3：进入项目并安装依赖

复制代码

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

步骤 4：启动开发服务器

复制代码

npm run dev # 或 yarn dev / pnpm dev

✅ 成功标志：

终端显示 Local: http://localhost:5173/（端口可能不同）
浏览器自动打开 React 欢迎页

步骤 5：项目结构说明

复制代码

my-react-app/
├── public/ # 静态资源（favicon, logo 等）
├── src/
│ ├── assets/ # 图片、字体等
│ ├── App.jsx # 根组件
│ └── main.jsx # 入口文件
├── index.html # 主 HTML 文件
├── package.json
└── vite.config.js # Vite 配置文件

🛠 备选方案：使用 Create React App (CRA)

虽然 CRA 已进入维护模式（官方推荐 Vite），但如果你需要兼容旧项目，仍可使用。

创建命令：

复制代码

# CRA 基本命令
npx create-react-app my-react-app
# 或 TypeScript 版本
npx create-react-app my-react-app --template typescript

启动：

复制代码

cd my-react-app
npm start

⚠️ 注意：CRA 启动慢、配置封闭、不支持现代 CSS 特性（如原生 CSS Modules 需额外配置）

🔧 常见问题解决

Q1: npm create vite报错？

原因：Node.js 版本过低
解决：升级到 Node.js 18+

Q2: 如何添加路由（React Router）？

复制代码

# 安装
npm install react-router-dom

然后修改 main.jsx：

复制代码

import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

Q3: 如何支持 TypeScript？

创建时用 --template react-ts
或手动重命名 .jsx→ .tsx，并安装类型：

npm install -D typescript @types/react @types/react-dom

✅ 最佳实践建议

场景	推荐
新项目（2024+）	✅ Vite + React
需要 SSR/SSG	Next.js (npx create-next-app)
企业级后台系统	Ant Design Pro / Vite + React + TypeScript
学习 React 基础	Vite（启动快，干扰少）

📌 总结：快速创建命令速查

需求	命令
基础 React（JS）	`npm create vite@latest my-app -- --template react`
React + TypeScript	`npm create vite@latest my-app -- --template react-ts`
传统 CRA（JS）	`npx create-react-app my-app`
传统 CRA（TS）	`npx create-react-app my-app --template typescript`

💡 强烈建议新手直接使用 Vite ------ 更快、更现代、配置更灵活！

创建完成后，你就可以在 src/App.jsx中开始编写 React 组件了！。