# react-app5

**Repository Path**: betaq/react-app5

## Basic Information

- **Project Name**: react-app5
- **Description**: React项目全家桶
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 6
- **Created**: 2022-02-15
- **Last Updated**: 2025-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React-App5：基于create-react-app5.0的项目全家桶


## 项目集成说明：

1. 支持Sass/Scss/Less/Stylus
2. 已安装react-router-dom、history
3. 已安装redux、react-redux
4. 已安装redux-thunk
5. 已安装immutable
6. 已安装axios
7. 已安装mockjs
8. 已安装antd
9. 支持浏览器Redux DevTools插件（需先在chrome应用商店添加Redux DevTools）
10. 支持反向代理（在src/setupProxy.js中配置）


## React全家桶搭建教程

该架构有超详细的教程，从零开始，逐步讲述React全家桶的一条龙服务，新手也能快速掌握。

### 教程目录：

```
1 初始化项目
1.1 使用create-react-app 5.0新建项目
1.2 精简项目
2 Webpack配置
2.1 暴露webpack
2.2 支持Sass/Scss
2.3 支持Less
2.4 支持Stylus
2.5 设置路径别名
2.6 禁止build项目生成map文件
3 项目架构搭建
3.1 项目目录结构设计
3.2 设置全局公用样式
3.3 关于样式命名规范
4 引入Ant Design
4.1 安装Ant Design
4.2 实现按需加载
4.3 设置Antd为中文语言
4.4 自定义Antd主题颜色（非必须）
5 页面开发
5.1 构建login页面
5.2 构建home页面
5.3 实现页面路由跳转
5.4 在React组件中实现页面路由跳转
5.5 在非React组件中实现页面路由跳转
6 组件开发
6.1 创建header组件
6.2 引入Header组件
6.3 组件传参
7 React Developer Tools浏览器插件
8 Redux及相关插件
8.1 安装redux
8.2 安装react-redux
8.3 安装redux-thunk
8.4 安装Redux浏览器插件
8.5 创建store
8.6 复杂项目store分解
8.7 安装使用immutable
8.8 对接react-redux与store
8.9 在login页面设置并实时读取Redux变量
8.10 在header组件实时读取Redux变量
8.11 Redux开发小结
9 基于axios封装公用API库
9.1 安装axios
9.2 封装公用API库
9.3 Mock.js安装与使用
9.4 发起API请求
9.5 设置开发环境的反向代理请求
10 build项目
11 项目Git源码
结束语
```

### 教程原文

教程原文请关注我的微信公众号【卧梅又闻花】，

查阅本项目的完整教程：[《2022新春版：超详细一条龙教程！从零搭建React项目全家桶》](https://mp.weixin.qq.com/s/LaB4Mzm4E6GvHGzcgihh9g)