react创建教程

约 1427 字大约 5 分钟

2026-01-27

你想要一份完整的 React 项目创建教程，我会讲解两种主流方式（官方推荐的 Create React App 快速上手、更灵活的 Vite + React 高效构建），步骤清晰适合新手，跟着操作就能成功搭建 React 项目。

前置准备（必做）

和 Vue 项目一样，创建 React 项目前必须先安装 Node.js（附带 npm/yarn 包管理器）：

下载地址：Node.js 官方下载，选择 LTS 版本（长期支持版，稳定无坑）。
安装步骤：双击安装包一路默认下一步（Windows 务必勾选「Add Node.js to PATH」自动配置环境变量）。
验证安装成功：打开终端（Windows 用 CMD/PowerShell，Mac/Linux 用终端），输入以下命令，能显示版本号即成功：
```
node -v
npm -v
```
（可选优化）更换 npm 国内镜像源（避免下载依赖超时）：
```
npm config set registry https://registry.npmmirror.com/
```

方式一：Create React App（CRA）—— 官方推荐，快速上手

Create React App 是 React 官方提供的脚手架工具，封装了复杂的构建配置（Webpack、Babel 等），新手无需关心底层配置，专注业务开发即可，适合快速搭建常规 React 项目。

步骤 1：创建 React 项目

终端输入以下命令（项目名称可自定义，建议小写、无空格，用连字符分隔，例如 my-react-cra-project）：

# npm 命令创建（默认生成 React 18 + JavaScript 项目）
npx create-react-app my-react-cra-project

# 如需创建 TypeScript 版本的项目，添加 --template typescript
# npx create-react-app my-react-cra-project --template typescript

说明：npx 是 Node.js 自带的工具，无需全局安装 create-react-app，会自动拉取最新版本的脚手架进行项目创建。

步骤 2：进入项目目录

项目创建完成后，终端输入命令进入项目文件夹（替换为你的项目名称）：

cd my-react-cra-project

步骤 3：启动开发服务器

输入以下命令启动本地开发环境：

npm start

步骤 4：访问项目

启动成功后，浏览器会自动打开 http://localhost:3000/，如果没有自动打开，可手动复制该地址到浏览器，就能看到 React 的默认欢迎页面了。

补充：CRA 项目核心命令

# 启动开发环境（热更新，修改代码实时刷新）
npm start

# 打包项目（生成生产环境可部署的静态文件，输出到 build/ 目录）
npm run build

# 运行单元测试（默认集成 Jest 测试工具）
npm test

# 弹出底层配置（Webpack、Babel 等，一旦弹出无法回退，新手不建议操作）
npm run eject

方式二：Vite + React —— 高效构建，推荐生产/大型项目

Vite 是新一代前端构建工具，相比 CRA（基于 Webpack），具有启动速度快、热更新效率高、打包体积小的优势，现在越来越多的 React 项目选择用 Vite 搭建，尤其适合大型项目和对构建效率有要求的场景。

步骤 1：创建 Vite + React 项目

终端输入以下命令，调用 Vite 创建项目（项目名称自定义，例如 my-react-vite-project）：

npm create vite@latest

步骤 2：交互式配置项目

执行命令后，终端会出现交互式选项，新手参考以下选择即可：

Project name：输入项目名称（或直接回车使用默认值 vite-project），回车。
Select a framework：选择框架，输入 react（或用上下箭头选中 React 后回车）。
Select a variant：选择项目变体，新手选 JavaScript（直接回车）；如需 TypeScript 版本，选中 TypeScript 回车。

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

配置完成后，按照终端提示执行以下命令：

# 进入项目目录（替换为你的项目名称）
cd my-react-vite-project

# 安装项目依赖
npm install

步骤 4：启动开发服务器

依赖安装完成后，输入以下命令启动本地开发环境：

npm run dev

步骤 5：访问项目

启动成功后，终端会显示访问地址（通常是 http://localhost:5173/ 或 http://127.0.0.1:5173/），复制地址打开浏览器，就能看到 Vite + React 的默认项目页面了。

补充：Vite + React 项目核心命令

# 启动开发环境（热更新速度极快）
npm run dev

# 打包项目（生成生产环境静态文件，输出到 dist/ 目录）
npm run build

# 预览打包后的项目（本地验证部署效果）
npm run preview

项目核心目录说明（新手重点关注）

无论哪种方式创建的 React 项目，核心源代码都在 src/ 目录下，新手重点关注以下文件/文件夹：

src/App.js（或 App.tsx）：根组件，项目的核心页面结构写在这里。
src/index.js（或 main.tsx）：项目入口文件，负责将 React 组件挂载到 DOM 节点上。
src/components/（可选，需自己创建）：存放公共可复用组件（例如按钮、卡片等）。
public/（CRA）/ public/（Vite）：存放静态资源（例如图片、favicon 图标等），打包后会被完整复制到输出目录。

总结

前置条件必须安装 Node.js，验证版本成功后再进行项目创建，国内建议更换淘宝镜像源提升下载速度。
新手快速上手选 Create React App，无需关心底层配置，命令简单、门槛低。
追求高效构建（大型项目/生产环境）选 Vite + React，启动和热更新速度远超 CRA，是当前主流趋势。
核心命令总结：进入项目目录 cd 项目名、安装依赖 npm install、启动项目 npm start（CRA）/ npm run dev（Vite）、打包项目 npm run build。