# react-app-2023spring

**Repository Path**: mildfly/react-app-2023spring

## Basic Information

- **Project Name**: react-app-2023spring
- **Description**: 2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2023-08-09
- **Last Updated**: 2023-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-app-2023spring：基于create-react-app5.0的项目全家桶


## 项目集成说明：

1. 支持Sass/Scss/Less/Stylus
2. 已安装react-router-dom 6.4+、history
3. 已安装ReduxToolkit、react-redux
4. 已安装axios
5. 已安装mockjs
6. 已安装antd 5.0+
7. 已安装http-proxy-middleware，支持反向代理（在src/setupProxy.js中配置）


## 2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶

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

### 教程目录：

```
1 初始化项目
• 1.1 使用create-react-app新建项目
• 1.2 精简项目
2 Webpack配置
• 2.1 配置国内镜像源
• 2.2 暴露Webpack
• 2.3 支持Sass/Scss
• 2.4 支持Less
• 2.5 支持Stylus
• 2.6 设置路径别名
• 2.7 禁止build项目生成map文件
3 项目架构搭建
• 3.1 项目目录结构设计
• 3.2 关于样式命名规范
• 3.3 设置全局公用样式
4 引入Ant Design 5.x
• 4.1 安装Ant Design
• 4.2 设置Antd为中文语言
5 页面开发
• 5.1 构建Login页面
• 5.2 构建Home页面
• 5.3 构建Account页面
• 5.4 通过一级路由实现页面跳转
• 5.5 在React组件中实现页面路由跳转
• 5.6 在非React组件中实现页面路由跳转
6 组件开发
• 6.1 创建自定义SVG图标Icon组件
• 6.2 创建Header组件
• 6.3 引入Header组件
• 6.4 组件传参
7 二级路由配置
• 7.1 创建二级路由的框架页面
• 7.2 配置二级路由
• 7.3 获取当前路由地址
8 React Developer Tools浏览器插件
9 Redux及Redux Toolkit
• 9.1 安装Redux及Redux Toolkit
• 9.2 创建全局配置文件
• 9.3 创建用于主题换肤的store分库
• 9.4 创建store总库
• 9.5 引入store到项目
• 9.6 store的使用：实现亮色/暗色主题切换
• 9.7 非Ant Design组件的主题换肤
• 9.8 store的使用：实现主题色切换
• 9.9 安装Redux调试浏览器插件
10 基于axios封装公用API库
• 10.1 安装axios
• 10.2 封装公用API库
• 10.3 Mock.js安装与使用
• 10.4 发起API请求：实现登录功能
11 一些细节问题
• 11.1 解决Modal.method跟随主题换肤的问题
• 11.2 路由守卫
• 11.3 设置开发环境的反向代理请求
12 build项目
13 项目Git源码
结束语
```

### 教程原文

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

查阅本项目完整教程：[《2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶》](https://mp.weixin.qq.com/s/JvXJ-rtLQpCYUyAS9NhAFA)