====== 第三章：开发环境搭建 ======

===== 3.1 Node.js 安装 =====

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

**下载安装**：

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

**验证安装**：

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

<code bash>
node -v
npm -v
</code>

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

**npm 与 yarn/pnpm**：

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

安装 yarn：

<code bash>
npm install -g yarn
</code>

安装 pnpm：

<code bash>
npm install -g pnpm
</code>

===== 3.2 创建 React 项目 =====

**使用 Create React App**：

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

<code bash>
npx create-react-app my-app
cd my-app
npm start
</code>

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

**使用 Vite**：

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

<code bash>
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
</code>

Vite 的优势：

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

**使用 Next.js**：

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

<code bash>
npx create-next-app@latest my-app
</code>

===== 3.3 项目结构解析 =====

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

<file>
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         # 项目说明
</file>

**重要文件说明**：

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

===== 3.4 第一个 React 组件 =====

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

<code javascript>
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</code> 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>

简化它：

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

export default App;
</code>

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

===== 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**：

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

===== 3.6 ESLint 和 Prettier 配置 =====

**ESLint**：

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

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

安装额外规则：

<code bash>
npm install --save-dev eslint-plugin-react-hooks
</code>

在 .eslintrc.js 中添加：

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

**Prettier**：

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

安装：

<code bash>
npm install --save-dev prettier
</code>

创建 .prettierrc：

<code json>
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}
</code>

创建 .prettierignore：

<file>
node_modules
build
coverage
</file>

===== 3.7 Git 配置 =====

初始化 Git 仓库：

<code bash>
git init
git add .
git commit -m "Initial commit"
</code>

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

<file>
# 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*
</file>

===== 3.8 常用脚本 =====

package.json 中的 scripts：

<code json>
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}
</code>

**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 文件：

<file>
REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=1.0.0
</file>

在代码中使用：

<code javascript>
const apiUrl = process.env.REACT_APP_API_URL;
</code>

不同环境的配置文件：

  * .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。