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

使用 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

使用 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：定义项目依赖和脚本

打开 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;

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

推荐插件：

• 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"
  }
}

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

初始化 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*

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 等配置。一般情况下不需要使用。

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：生产环境

React Developer Tools：

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

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

使用技巧：

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

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

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

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