如何配置react开发环境

安装 Node.js 和 npm

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

node -v
npm -v

使用 Create React App 初始化项目

Create React App 是官方推荐的脚手架工具，可快速搭建 React 项目。运行以下命令创建项目：

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

my-app 为项目名称，可根据需求修改。

启动开发服务器

进入项目目录后，运行以下命令启动开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示应用页面。

安装必要的依赖

根据项目需求安装额外依赖，例如路由管理库 react-router-dom：

npm install react-router-dom

其他常用依赖包括状态管理库（如 Redux、MobX）、UI 组件库（如 Material-UI、Ant Design）等。

配置代码编辑器

推荐使用 Visual Studio Code 并安装以下插件以提高开发效率：

• ESLint：代码规范检查
• Prettier：代码格式化
• Reactjs code snippets：React 代码片段快捷输入

项目结构优化

默认项目结构可能需调整以满足需求。常见优化包括：

• 创建 src/components 目录存放可复用组件
• 使用 src/pages 存放页面级组件
• 配置别名（通过 jsconfig.json 或 webpack）简化导入路径

配置环境变量

创建 .env 文件定义环境变量，例如：

REACT_APP_API_URL=https://api.example.com

变量需以 REACT_APP_ 开头才能在代码中通过 process.env 访问。

生产环境构建

运行以下命令生成优化后的生产环境代码：

npm run build

构建结果默认输出到 build 目录，可直接部署到静态文件服务器。