如何搭建react开发环境搭建

安装 Node.js 和 npm

确保系统中已安装 Node.js（包含 npm），可以从 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

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

安装必要的开发工具

根据需求安装常用工具和库：

• ESLint：代码风格检查

  npm install eslint --save-dev

• Prettier：代码格式化

  npm install prettier --save-dev

• React Router：路由管理

  npm install react-router-dom

配置 IDE 或编辑器

推荐使用 Visual Studio Code（VS Code）并安装以下插件：

• ESLint：实时检查代码规范
• Prettier - Code formatter：自动格式化代码
• Reactjs code snippets：提供 React 代码片段

项目结构说明

CRA 生成的项目主要结构如下：

my-app/
  ├── node_modules/      # 依赖库
  ├── public/            # 静态资源（如 HTML 模板）
  ├── src/               # 源代码目录
  │   ├── App.js         # 主组件
  │   ├── index.js       # 入口文件
  │   └── ...            # 其他组件与样式
  ├── package.json       # 项目配置和依赖
  └── README.md          # 项目文档

生产环境构建

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

npm run build

构建结果会保存在 build/ 目录中，可直接部署到服务器。

可选扩展

• 状态管理：安装 Redux 或 MobX

  npm install redux react-redux

• 样式方案：使用 Sass 或 CSS Modules

  npm install sass