如何搭建react项目环境

安装 Node.js 和 npm

确保系统中已安装 Node.js（包含 npm 或 yarn）。可从 Node.js 官网 下载最新 LTS 版本。安装完成后，通过以下命令验证版本：

node -v
npm -v

使用 Create React App 创建项目

Create React App (CRA) 是官方推荐的脚手架工具，快速生成 React 项目结构。运行以下命令创建项目：

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

my-app 为项目名称，可根据需求修改。npm start 会启动开发服务器，默认在 http://localhost:3000 打开。

配置开发工具（可选）

代码编辑器推荐
使用 Visual Studio Code（VS Code）并安装以下插件提升开发效率：

• ESLint：代码质量检查
• Prettier：代码格式化
• Reactjs code snippets：快速生成 React 代码片段

浏览器调试工具
安装 React Developer Tools 扩展（Chrome/Firefox），便于调试组件状态和性能。

项目结构优化

CRA 生成的基础结构可能需调整：

• 创建 src/components 目录存放可复用组件
• 拆分 src/App.js 为模块化文件
• 配置别名（需修改 webpack 配置或使用 craco 等工具）

添加必要依赖

根据项目需求安装常用库：

npm install axios react-router-dom @reduxjs/toolkit react-query

• axios：HTTP 请求库
• react-router-dom：路由管理
• @reduxjs/toolkit：状态管理
• react-query：数据获取

配置环境变量

创建 .env 文件定义环境变量，前缀需为 REACT_APP_：

REACT_APP_API_URL=https://api.example.com

在代码中通过 process.env.REACT_APP_API_URL 访问。

生产环境构建

运行以下命令生成优化后的生产版本：

npm run build

构建结果位于 build 目录，可直接部署到静态服务器。