搭建一个 React 项目，选择一个合适的初始化工具直接影响后续的开发体验和维护成本。目前，React 社区经历了几代工具的更迭，主流的方案已经清晰。本节将详细介绍三种代表性的方案：Vite（当前推荐）、Create React App（经典但已边缘化）和企业级定制脚手架。
Vite 快速创建 React 项目（当前主流）
Vite 是新一代前端构建工具，利用浏览器原生 ES 模块导入能力实现极速冷启动和热更新。它已经成为 React 社区创建新项目的首选方案，官方 React 文档也已将 Vite 列为推荐的启动方式。
为什么选择 Vite？
- 开发服务器启动极快：利用 esbuild 预构建依赖，毫秒级启动。
- 模块热替换（HMR）极速生效：修改代码后几乎瞬间反映在浏览器，不丢失状态。
- 原生支持 TypeScript、JSX、CSS Modules 等，无需额外配置。
- 生产构建采用 Rollup，支持 Tree Shaking、代码分割等优化。
- 插件系统强大，可以轻松集成各种功能。
1. 使用 create-vite 脚手架
推荐使用官方提供的 create-vite 工具快速生成项目：
# 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如果需要 TypeScript，使用
react-ts模板：
@@SNAPSHOT_BLOCK_1@@
创建完成后，进入目录安装依赖并启动：
cd my-react-app
npm install
npm run dev浏览器打开 http://localhost:5173 即可看到一个简洁的 React 启动页。
2. 初始项目结构解析
生成后的目录结构非常精简，只包含最核心的文件：
my-react-app/
├── index.html # 入口 HTML，Vite 以此为根
├── package.json
├── vite.config.js # Vite 配置文件
├── src/
│ ├── main.jsx # React 挂载点
│ ├── App.jsx # 根组件
│ └── App.css # 基础样式
└── public/ # 静态资源index.html是入口，Vite 会将<script type="module" src="/src/main.jsx">作为应用起点，无需手动引入。main.jsx只负责挂载 React 组件树到#root：
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
3. Vite 常用配置速览
vite.config.js 允许深度定制，以下是 React 项目中最常用的几项：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()], // 提供 React Fast Refresh 等能力
resolve: {
alias: {
'@': '/src', // 路径别名，导入时用 @/components/...
},
},
server: {
port: 3000, // 自定义开发服务器端口
proxy: { // 代理 API 请求
'/api': 'http://localhost:8080',
},
},
})- @vitejs/plugin-react：官方 React 插件，支持自动 JSX 编译、开发时的快速刷新等，必须安装。
- 路径别名：避免
../../../components/Button这类深层相对路径。 - 开发代理：解决跨域问题，将前端请求转发到后端服务。
Vite 的设计理念是开箱即用，上述配置对于中小型项目已经足够。复杂需求可通过 Vite 丰富的插件生态扩展。
Create React App（CRA）使用与局限
Create React App（简称 CRA）曾经是 React 官方推荐的脚手架，它封装了 Webpack、Babel、ESLint 等工具，提供了一个“零配置”的开发环境。
CRA 的基本使用
虽然官方已不再推荐，但你可能在旧项目或一些教程中遇到它：
npx create-react-app my-app
cd my-app
npm startCRA 隐藏了所有 Webpack 配置，通过 react-scripts 管理构建流程，为初学者提供了一个平滑的起点。
CRA 的局限性
随着时间推移，CRA 的缺陷逐渐显现，最终导致其被 Vite 取代：
- 启动和构建速度慢：基于 Webpack 的打包过程在大型项目中变得越来越慢，开发体验随着代码量增长而下降。
- 配置无法扩展：CRA 不支持自定义 Webpack 配置，除非使用
eject操作（将配置暴露出来，但不可逆，且后续升级困难），或通过如craco等第三方工具“侵入式”覆盖。 - 依赖臃肿：
react-scripts捆绑了大量可能用不到的依赖，项目体积大。 - 不活跃的维护：React 团队已不再将 CRA 作为推荐方式，CRA 的 GitHub 仓库更新缓慢，许多 Issue 长期未解决。
正因为这些问题，React 官方文档在 2023 年移除了 CRA 的推荐，转而推荐使用 Vite、Next.js 或 Remix 等现代工具。因此，新项目强烈不建议再使用 CRA。
企业级脚手架定制与零配置方案
在企业项目中，往往不止需要一个“Hello World”模板，还需要集成路由、状态管理、请求库、权限控制、代码规范、测试框架等一系列工程化设施。此时，基于 Vite 的自定义脚手架或更高层的全栈框架更符合需求。
1. 基于 Vite 的企业级模板
可以创建自己的 Vite 模板，或使用社区提供的成熟模板，例如：
- vite-react-ts-starter：集成 TypeScript、React Router、Eslint、Prettier、Husky 等。
- Vitesse：Anthony Fu 开发的 Vite 起步模板，虽然面向 Vue，但其理念可借鉴到 React。
你也可以维护一个内部脚手架仓库，通过 degit 或 cargo generate 等工具快速克隆：
# 假设你维护了一个定制模板在 GitHub 上
npx degit your-org/react-enterprise-template my-new-project
cd my-new-project
npm install这个模板可以预先配置好：
- 项目目录规范（如按功能或页面划分）
- 环境变量管理 (.env.development, .env.production)
- 路由生成器与权限守卫
- 全局状态方案（例如 Zustand 或 Redux Toolkit）
- Axios 实例与请求拦截器
- Mock 数据方案
- 单元测试和 E2E 测试框架
- Git 提交规范（Husky + Commitlint）
- Docker 部署配置
2. 全栈框架作为脚手架
对于中大型项目，可以考虑直接用 Next.js 或 Remix 作为基础框架，它们内置了路由、数据加载、SSR/SSG 等能力，天然具备企业级项目所需的结构。
Next.js 提供了官方的创建命令：
npx create-next-app@latest my-app创建时会让你选择 TypeScript、ESLint、Tailwind CSS、src/ 目录、App Router 等选项，生成的项目结构已经具备生产级应用的骨架。
使用 Next.js 作为脚手架的好处：
- 约定式路由，自动根据文件系统生成路由。
- 内置图片优化、字体加载、元数据管理。
- 支持服务端渲染、增量静态生成，兼顾 SEO 和性能。
- 社区庞大，插件和模板丰富。
Remix 的创建方式：
npx create-remix@latestRemix 强调 Web 标准和渐进增强，更适合追求极致性能和控制力的团队。
3. 零配置方案的权衡
虽然“零配置”听起来美好，但在企业开发中，完全零配置往往意味着牺牲灵活性和定制能力。更好的思路是 “有合理默认值的可扩展配置”。Vite 本身提供了优秀的默认值，同时允许通过 vite.config.js 和插件体系进行深度定制，正是这一理念的体现。
总结：如何选择启动方案
| 场景 | 推荐方案 | 理由 |
|------|----------|------|
| 新项目、小型单页应用 | Vite (create vite) | 速度快、配置简洁、生态新 |
| 老项目仍在使用 | CRA 可维持，但考虑迁移到 Vite | 长期维护和开发体验更好 |
| 需要 SSR/SSG 的内容站 | Next.js | 内置完整解决方案，SEO 友好 |
| 企业级中后台 | Vite 定制模板 或 Next.js | 根据是否需要 SEO 决定 |
| 学习或原型开发 | Vite 或直接在 StackBlitz 等在线环境 | 快速上手 |
无论选择哪种方案，都建议优先使用 Vite 作为底层构建工具（除非选择 Next.js/Remix），并尽早建立良好的工程规范（ESLint、Prettier、TypeScript），为项目的长期发展打下基础。