- 支持Sass/Scss/Less/Stylus
- 已安装react-router-dom 6.4+、history
- 已安装ReduxToolkit、react-redux
- 已安装axios
- 已安装mockjs
- 已安装antd 5.0+
- 已安装http-proxy-middleware,支持反向代理(在src/setupProxy.js中配置)
该架构有超详细的教程,从零开始,逐步讲述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项目全家桶》