kojhliang / react-app5

React项目全家桶

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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项目全家桶》

About

React项目全家桶


Languages

Language:JavaScript 98.5%Language:Stylus 1.0%Language:HTML 0.4%