React项目搭建教程

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. 常见问题与解决方案

  1. 模块导入问题:使用绝对路径

    json 复制代码
    // jsconfig.json
    {
      "compilerOptions": {
        "baseUrl": "src"
      }
    }
  2. 跨域请求:配置代理

    json 复制代码
    // package.json
    {
      "proxy": "https://api.example.com"
    }

8. 持续集成与部署

  • 可选平台:Netlify、Vercel、GitHub Pages
  • 配置CI/CD pipeline
相关推荐
quitv29 分钟前
react脚手架配置别名
前端·javascript·react.js
CaptainDrake1 小时前
React低代码项目:问卷编辑器
react.js·低代码·编辑器
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
2403_8751809512 小时前
AI数字人开发,引领科技新潮流
java·大数据·数据结构·人工智能·科技·前端框架
大猫会长15 小时前
react中,在组件内返回style标签方法
前端·react.js·前端框架
傻小胖15 小时前
React 高阶组件(HOC)
前端·javascript·react.js
蒜香拿铁17 小时前
react-router的使用
前端·react.js
codexu18 小时前
Tauri跨端笔记实战(4) - 如何实现系统级截图
前端·前端框架·开源
程序员黄同学18 小时前
请解释 React 中的 Hooks,何时使用 Hooks 更合适?
前端·javascript·react.js
蒜香拿铁20 小时前
react进阶
前端·react.js