2. 开发环境准备

本节目标：把 React 开发需要的前置工具全部装好——Node.js、npm、VS Code、浏览器 DevTools。

Node.js：JavaScript 的运行环境

React 的构建工具（比如 Vite）依赖 Node.js。Node.js 让 JavaScript 能在浏览器之外运行，同时自带包管理器 npm。

装完打开终端，验证一下：

node -v
npm -v

看到版本号就说明装好了。比如 v20.11.0 和 10.2.0。

Tip

React 19 要求 Node.js ≥18.0。如果你装了更老的版本，可能会遇到构建报错。建议直接用 LTS 最新版。

npm（Node Package Manager）是 Node.js 自带的包管理器。用来安装第三方库、运行脚本。

简单理解：npm 是 JavaScript 世界的”应用商店”。你需要 React、Vite 这些工具，都通过 npm 安装。

如果你更喜欢用 pnpm（更快、更省磁盘），可以替代 npm：

npm install -g pnpm

后续命令把 npm 换成 pnpm 就行。

VS Code 是目前最主流的 React 编辑器，免费、插件多、开箱即用。

安装完 VS Code 后，装这几个插件：

插件名	作用
ESLint	代码规范检查
Prettier	代码格式化
ES7+ React/Redux/React-Native snippets	React 代码片段
Auto Rename Tag	自动重命名配对标签
Path Intellisense	路径自动补全

安装方式：VS Code 左侧点扩展图标（或按 Ctrl+Shift+X），搜索插件名，点安装。

Note

不用装太多插件。初学阶段这五个够用了。插件装多了反而拖慢编辑器。

React 开发离不开浏览器调试。推荐用 Chrome 或 Edge（Chromium 内核都行）。

React 开发者工具（React Developer Tools）是浏览器扩展，能帮你检查组件树、查看 props 和状态、分析性能。

安装步骤：

Tip

看一个网站是不是用 React 装的，打开 DevTools 有没有 Components 面板就知道了。

后面写组件时，这两个面板会经常用到。

后续创建项目、安装依赖都要用终端。

VS Code 自带终端，按 Ctrl+ ` “ 就能打开，不用再开单独的窗口。

跑一个简单命令试试：

node -e "console.log('Hello React')"

输出 Hello React 就说明 Node.js 正常。

再试试 npm：

npm --version

能看到版本号就 OK。