第三章：开发环境搭建

3.1 Node.js 安装

React 开发需要 Node.js 环境。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

下载安装：

访问 Node.js 官网（nodejs.org），下载 LTS（长期支持）版本。LTS 版本更加稳定，适合生产环境。

验证安装：

打开终端，运行以下命令：

node -v
npm -v

你应该能看到版本号输出。

npm 与 yarn/pnpm：

npm：Node.js 自带的包管理器
yarn：Facebook 开发的包管理器，速度更快，功能更强
pnpm：磁盘空间效率更高的包管理器

安装 yarn：

npm install -g yarn

安装 pnpm：

npm install -g pnpm

3.2 创建 React 项目

使用 Create React App：

Create React App（CRA）是官方推荐的脚手架工具，帮助你快速创建 React 项目。

npx create-react-app my-app
cd my-app
npm start

这会创建一个名为 my-app 的文件夹，包含完整的 React 项目结构。

使用 Vite：

Vite 是一个现代的前端构建工具，启动速度比 CRA 快得多。

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Vite 的优势：

启动速度极快
热更新（HMR）几乎无延迟
构建速度快
配置简单

使用 Next.js：

Next.js 是一个全栈 React 框架，支持服务端渲染。

npx create-next-app@latest my-app

3.3 项目结构解析

使用 Create React App 创建的项目结构：

my-app/
├── node_modules/     # 依赖包
├── public/           # 静态资源
│   ├── index.html    # HTML 模板
│   ├── favicon.ico   # 网站图标
│   └── manifest.json # PWA 配置
├── src/              # 源代码
│   ├── App.js        # 根组件
│   ├── App.css       # 根组件样式
│   ├── App.test.js   # 测试文件
│   ├── index.js      # 入口文件
│   ├── index.css     # 全局样式
│   ├── logo.svg      # Logo
│   └── reportWebVitals.js # 性能监控
├── .gitignore        # Git 忽略配置
├── package.json      # 项目配置
├── package-lock.json # 锁定依赖版本
└── README.md         # 项目说明

重要文件说明：

index.html：应用的 HTML 模板，React 会将组件渲染到其中的 root 元素
index.js：JavaScript 入口文件，负责渲染根组件
App.js：根组件，应用的起点
package.json：定义项目依赖和脚本

3.4 第一个 React 组件

打开 src/App.js，你会看到：

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js

and save to reload.

      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </header>
  </div>
);

}

export default App; </code>

简化它：

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>这是我的第一个 React 应用</p>
    </div>
  );
}
 
export default App;

保存后，浏览器会自动刷新，显示更新后的内容。

3.5 VS Code 配置

推荐插件：

ESLint：代码检查，帮助发现潜在问题
Prettier - Code: formatter：代码格式化
ES7+ React/Redux/React-Native snippets：代码片段
Auto Rename Tag：自动重命名 HTML/JSX 标签
Bracket Pair Colorizer：括号配对颜色
Path Intellisense：路径自动补全

配置 settings.json：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

3.6 ESLint 和 Prettier 配置

ESLint：

ESLint 是 JavaScript 的静态代码分析工具，帮助你发现代码问题。

CRA 已经内置了 ESLint 配置。你可以扩展它：

安装额外规则：

npm install --save-dev eslint-plugin-react-hooks

在 .eslintrc.js 中添加：

module.exports = {
  extends: ['react-app', 'react-app/jest'],
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

Prettier：

Prettier 是代码格式化工具，统一代码风格。

安装：

npm install --save-dev prettier

创建 .prettierrc：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

创建 .prettierignore：

node_modules
build
coverage

3.7 Git 配置

初始化 Git 仓库：

git init
git add .
git commit -m "Initial commit"

.gitignore 文件（CRA 已自动创建）：

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

3.8 常用脚本

package.json 中的 scripts：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

npm start：

启动开发服务器，默认运行在 http://localhost:3000。支持热重载（Hot Reload），修改代码后浏览器自动刷新。

npm run build：

构建生产版本，生成优化后的静态文件到 build 文件夹。这些文件可以部署到任何静态文件服务器。

npm test：

启动测试运行器，使用 Jest 运行测试。

npm run eject：

弹出配置。这是一个不可逆操作，会暴露所有 webpack、Babel 等配置。一般情况下不需要使用。

3.9 环境变量

React 支持环境变量，以 REACT_APP_ 开头的变量可以在代码中使用。

创建 .env 文件：

REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=1.0.0

在代码中使用：

const apiUrl = process.env.REACT_APP_API_URL;

不同环境的配置文件：

.env：默认
.env.local：本地覆盖（不提交到 Git）
.env.development：开发环境
.env.test：测试环境
.env.production：生产环境

3.10 浏览器开发者工具

React Developer Tools：

安装浏览器扩展 React Developer Tools，可以在开发者工具中查看：

组件树结构
每个组件的 props 和 state
组件渲染性能
上下文（Context）值

使用技巧：

Components 面板：查看和编辑组件状态
Profiler 面板：记录和分析渲染性能
高亮更新：设置中开启“Highlight updates when components render”

3.11 总结

本章介绍了 React 开发环境的搭建，包括：

Node.js 安装
项目创建（CRA、Vite、Next.js）
项目结构解析
编辑器配置
ESLint 和 Prettier
Git 配置
环境变量
开发者工具

环境搭建完成后，下一章我们将深入学习 JSX。

目录