Appearance
开发环境搭建
在开始学习 React 之前，我们需要搭建好开发环境。本章节将指导你完成开发工具的安装和配置。
3.1 开发工具安装
VS Code 安装
下载 VS Code：
- 访问 VS Code 官网
- 选择适合你操作系统的版本下载
- 按照安装向导完成安装
VS Code 必备插件：
- ESLint：代码质量检查
- Prettier：代码格式化
- React Developer Tools：React 调试工具
- Vetur：Vue 支持（如果需要）
- GitLens：Git 增强
- Live Server：本地开发服务器
安装插件方法：
- 打开 VS Code
- 点击左侧的扩展图标（四个方块）
- 在搜索框中输入插件名称
- 点击「安装」按钮
React Developer Tools
浏览器扩展：
- Chrome：访问 Chrome Web Store
- Firefox：访问 Firefox Add-ons
- 点击「添加到浏览器」
使用方法：
- 打开包含 React 应用的网页
- 打开浏览器开发者工具
- 选择「React」标签页
- 可以查看组件树、状态和 props
3.2 环境配置
Node.js 安装
下载 Node.js：
- 访问 Node.js 官网
- 下载 LTS（长期支持）版本
- 按照安装向导完成安装
验证安装：
- 打开命令行终端
- 运行
node -v查看 Node.js 版本 - 运行
npm -v查看 npm 版本
npm/pnpm/yarn 配置
npm（默认包管理器）
- 更新 npm：
npm install -g npm - 设置镜像（可选）：
npm config set registry https://registry.npmmirror.com/
pnpm（推荐，更快速）
- 安装 pnpm：
npm install -g pnpm - 设置镜像（可选）：
pnpm config set registry https://registry.npmmirror.com/
yarn（备选）
- 安装 yarn：
npm install -g yarn - 设置镜像（可选）：
yarn config set registry https://registry.npmmirror.com/
3.3 浏览器调试工具
Chrome 开发者工具
打开开发者工具：
- 快捷键：
F12或Ctrl+Shift+I - 右键点击页面，选择「检查」
- 快捷键：
常用面板：
- Elements：查看和修改 DOM 结构
- Console：查看控制台输出和执行 JavaScript
- Sources：查看和调试 JavaScript 代码
- Network：查看网络请求
- Application：查看 localStorage、sessionStorage 等
- React：（安装 React Developer Tools 后）查看 React 组件
Firefox 开发者工具
打开开发者工具：
- 快捷键：
F12或Ctrl+Shift+I - 右键点击页面，选择「检查元素」
- 快捷键：
常用面板：
- Inspector：查看和修改 DOM 结构
- Console：查看控制台输出和执行 JavaScript
- Debugger：查看和调试 JavaScript 代码
- Network：查看网络请求
- Storage：查看 localStorage、sessionStorage 等
- React：（安装 React Developer Tools 后）查看 React 组件
3.4 第一个React程序
在线编辑器体验
CodeSandbox：
- 访问 CodeSandbox
- 点击「Create Sandbox」
- 选择「React」模板
- 等待项目创建完成
基本结构：
src/App.js：主组件src/index.js：入口文件public/index.html：HTML 模板
修改代码：
- 在
App.js中修改内容 - 实时查看效果
- 在
本地创建项目
使用 Vite 创建项目（推荐）：
- 打开命令行终端
- 运行
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
查看项目：
- 打开浏览器，访问终端中显示的地址（通常是
http://localhost:3000/或http://localhost:5173/） - 你应该能看到 React 的默认欢迎页面
- 打开浏览器，访问终端中显示的地址（通常是
常见问题解决
Node.js 安装失败：
- 确保下载了正确的版本
- 以管理员身份运行安装程序
- 检查系统环境变量
npm 安装依赖失败：
- 检查网络连接
- 尝试使用镜像源
- 清理 npm 缓存：
npm cache clean --force
开发服务器启动失败：
- 检查端口是否被占用
- 确保依赖已正确安装
- 查看终端错误信息
React Developer Tools 不显示：
- 确保页面使用了 React
- 刷新页面
- 重新安装扩展
通过本章节的学习，你已经完成了 React 开发环境的搭建，为后续的学习做好了准备。现在你可以开始学习 React 的核心概念和实践技能了。