React 环境配置

本章节将介绍如何搭建 React 开发环境。

环境要求

在开始之前，请确保你的电脑上安装了以下软件：

• Node.js：推荐 v18.0.0 或更高版本
• npm 或 yarn：Node.js 自带 npm
• 代码编辑器：推荐 VS Code

检查 Node.js 版本

打开终端或命令行工具，输入以下命令检查 Node.js 是否已安装：

node --version
npm --version

如果显示了版本号，说明 Node.js 已安装。

创建 React 项目

方法一：使用 Vite（推荐）

Vite 是一个现代的前端构建工具，创建 React 项目速度快。

# 创建项目（使用 npm）
npm create vite@latest my-react-app -- --template react

# 进入项目目录
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

方法二：使用 Create React App

# 创建项目
npx create-react-app my-react-app

# 进入项目目录
cd my-react-app

# 启动开发服务器
npm start

项目结构说明

创建完成后，你会看到以下项目结构：

my-react-app/
├── node_modules/     # 依赖包
├── public/           # 静态资源
│   └── index.html    # HTML 模板
├── src/              # 源代码
│   ├── App.jsx       # 主组件
│   ├── App.css       # 主组件样式
│   ├── index.css     # 全局样式
│   └── main.jsx      # 入口文件
├── package.json      # 项目配置
└── vite.config.js    # Vite 配置（Vite 方式）

运行项目

开发模式

npm run dev

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

构建生产版本

npm run build

会在 dist 目录生成生产环境的代码。

安装开发工具

VS Code 扩展推荐

1. ES7+ React/Redux/React-Native snippets - 代码片段
2. Prettier - Code formatter - 代码格式化
3. ESLint - 代码检查
4. Auto Rename Tag - 自动重命名标签
5. Bracket Pair Colorization Toggler - 括号着色

安装中文语言包（可选）

如果你的 VS Code 是英文界面，可以安装中文语言包：

1. 按 Ctrl + Shift + P
2. 输入 "Configure Display Language"
3. 选择 "中文（简体）"

第一个 React 组件

修改 src/App.jsx：

function App() {
  return (
    <div>
      <h1>你好，React！</h1>
      <p>欢迎开始学习 React 编程</p>
    </div>
  );
}

export default App;

配置 ESLint（可选）

如果你使用 Vite 创建项目，可以添加以下配置到 package.json：

{
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

常见问题

Node 版本过低

如果 Node.js 版本过低，建议使用 nvm 管理 Node.js 版本：

# 安装 nvm（Linux/Mac）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装 Node.js 18
nvm install 18

# 使用 Node.js 18
nvm use 18

npm 安装失败

可以尝试清除 npm 缓存：

npm cache clean --force

或者使用 yarn 代替 npm：

npm install -g yarn
yarn install

小结

本章我们学习了：

1. React 项目的环境要求
2. 使用 Vite 创建 React 项目
3. 项目结构和运行方式
4. 安装开发工具

练习

1. 使用 Vite 创建一个新的 React 项目
2. 修改 App 组件，显示你的名字
3. 安装 VS Code 的 React 相关扩展
4. 尝试运行 npm run build 构建生产版本