如何配置react开发环境

安装 Node.js 和 npm

确保系统已安装 Node.js（包含 npm）。可通过官网下载最新稳定版本。安装完成后，验证版本：

node -v
npm -v

创建 React 项目

使用官方工具 create-react-app 快速搭建项目：

npx create-react-app my-app
cd my-app

my-app 为项目名称，可自定义。

启动开发服务器

进入项目目录后运行：

npm start

默认在浏览器打开 http://localhost:3000，修改代码会自动热更新。

安装必要依赖

根据需求扩展功能库，例如路由和状态管理：

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

配置代码编辑器

推荐使用 VS Code，安装插件提升开发效率：

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

项目结构优化

按功能模块组织文件，例如：

src/
├── components/   # 通用组件
├── pages/        # 页面组件
├── store/        # Redux 状态
├── utils/        # 工具函数
└── App.js        # 主入口

配置环境变量

创建 .env 文件存储敏感信息或环境变量：

REACT_APP_API_KEY=your_api_key

通过 process.env.REACT_APP_API_KEY 访问。

生产环境构建

生成优化后的代码：

npm run build

输出文件位于 build/ 目录，可直接部署。