React项目搭建教程

1. 准备开发环境

1.1 安装Node.js和npm

在开始React项目开发之前，你需要安装Node.js和npm（Node Package Manager）。

推荐访问Node.js官网下载长期支持版(LTS)
安装过程中，会自动安装npm
可以通过以下命令验证安装：
bash 复制代码
```
node --version
npm --version
```

1.2 全局安装Create React App

bash 复制代码

npm install -g create-react-app

2. 创建React项目

2.1 使用Create React App初始化项目

bash 复制代码

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

2.2 项目目录结构说明

my-react-app/
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── App.js
    ├── App.css
    ├── index.js
    └── index.css

3. 项目配置

3.1 package.json脚本

json 复制代码

{
  "scripts": {
    "start": "react-scripts start",     // 启动开发服务器
    "build": "react-scripts build",      // 生产打包
    "test": "react-scripts test",        // 运行测试
    "eject": "react-scripts eject"       // 弹出配置（谨慎使用）
  }
}

3.2 添加常用依赖

bash 复制代码

# 状态管理
npm install redux react-redux

# 路由
npm install react-router-dom

# 网络请求
npm install axios

# UI组件库（可选）
npm install antd

4. 开发和运行

4.1 启动开发服务器

bash 复制代码

npm start

自动打开 http://localhost:3000，支持热重载

4.2 生产构建

bash 复制代码

npm run build

生成优化的生产文件在 build/ 目录

5. 推荐的项目结构

src/
├── components/       // 通用组件
├── pages/            // 页面组件
├── redux/            // 状态管理
│   ├── actions/
│   ├── reducers/
│   └── store.js
├── services/         // 网络请求
├── utils/            // 工具函数
├── App.js
└── index.js

6. 代码规范

6.1 推荐安装ESLint和Prettier

bash 复制代码

npm install eslint prettier -D

6.2 .eslintrc 配置示例

json 复制代码

{
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "rules": {
    "no-console": "warn",
    "react/prop-types": "error"
  }
}

7. 常见问题与解决方案

模块导入问题：使用绝对路径

json 复制代码

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

跨域请求：配置代理

json 复制代码

// package.json
{
  "proxy": "https://api.example.com"
}

8. 持续集成与部署

可选平台：Netlify、Vercel、GitHub Pages
配置CI/CD pipeline