React+ Redux+ ReactRouter教程,React全家桶一套掌握

课程目录

Day1

01.React简单介绍

02.React开发环境创建

03.JSX基础-概念和本质

04.JSX基础-识别js表达式

05.JSX基础-实现列表渲染

06.JSX基础-实现基础条件渲染

07.JSX基础-实现复杂条件渲染

08.React中的事件绑定

09.React组件基础使用

10.useState基础使用

11.useState修改状态的规则

12.基础样式控制

13.评论案例-列表渲染

14.评论案例-删除功能实现

15.评论案例-tab切换功能实现

16.评论案例-排序实现

17.classnames工具优化类名控制

Day2

01.表单受控绑定

02.React中获取DOM

03.发表评论-核心功能实现

04.发表评论-id和时间处理

05.发表评论-清空内容和聚焦实现

06.组件通信-父传子-基础实现

07.组件通信-父传子-props说明

08.组件通信-父传子-chilren说明

09.父子组件通信-子传父实现

10.使用状态提升实现兄弟组件通信

11.使用context机制跨层传递数据

12.useEffect-概念理解和基础使用

13.useEffect-不同依赖项说明

14.useEffect-清除副作用

15.自定义Hook实现

16.ReactHooks使用规则说明

17.案例优化-使用useEffect获取数据

18.案例优化-自定义hook封装请求逻辑

19.案例优化-评论Item组件封装

Day3

01.Redux快速上手

02.Redux与React-环境准备

03.Redux与React-实现counter

04.Redux与React-提交action传参

05.Redux与React-异步状态操作

06.Redux调试-devtools

07.美团案例-案例演示和环境准备

08.美团案例-分类和商品列表渲染

09.美团案例-点击分类激活交互实现

10.美团案例-商品列表切换显示

11.美团案例-添加购物车实现

12.美团案例-统计区域功能实现

13.美团案例-购物车列表功能实现

14.美团案例-控制购物车显示和隐藏

Day4

01.ReactRouter-快速开始

02.ReactRouter-抽象路由模块

03.ReactRouter-路由导航跳转

04.ReactRouter-导航跳转传参

05.ReactRouter-嵌套路由配置

06.ReactRouter-默认二级路由配置

07.ReactRouter-404路由配置

08.ReactRouter-俩种路由模式

09.记账本-功能演示和环境创建

10.记账本-配置别名路径@

11.记账本-数据Mock实现

12.记账本-整体路由设计

13.记账本-antD主题色定制

14.记账本-Redux管理账目列表

15.记账本-TabBar功能实现

Day5

01.月度账单-统计区域-功能演示和结构搭建

02.月度账单-统计区域-点击切换时间选择框

03.月度账单-统计区域-点击确定切换时间显示

04.月度账单-统计区域-数据按月分组实现

05.月度账单-统计区域-计算选择月份之后的统计数据

06.月度账单-统计区域-初始化渲染统计数据

07.月度账单-列表区域-单日统计列表实现

08.月度账单-列表区域-单日账单列表渲染显示

09.月度账单-列表区域-点击切换账单展开和收起

10.月度账单-账单类型图标组件封装

11.新增账单-功能熟悉和结构搭建

12.新增账单-支出和收入功能实现

13.新增账单-新增表单实现

14.新增账单-收尾优化

Day6

01.使用CRA初始化项目环境

02.安装scss包

03.安装antDesign

04.配置基础路由Router

05.配置别名路径

06.使用gitee管理项目

07.登录-准备静态结构

08.登录-表单校验实现

09.登录-获取表单数据

10.登录-封装request请求模块

11.登录-redux管理token-编写样板代码

12.登录-redux管理token-实现Token异步获取

13.登录-redux管理token-实现登录后续逻辑

14.登录-Token持久化

15.登录-封装Token的存取删方法

Day7

01.Axios请求头注入Token

02.根据Token控制路由跳转

03.Layout-结构创建和样式reset

04.Layout-二级路由配置

05.Layout-点击菜单跳转路由

06.Layout-根据当前路由路径高亮菜单

07.Layout-展示个人信息

08.Layout-退出登录实现

09.Layout-处理token失效

10.Home-Echarts基础图表渲染

11.Home-Echarts组件封装实现

12.拓展-API模块封装

Day8

01.文章发布-功能演示说明

02.基础文章发布-准备基础结构

03.基础文章发布-准备富文本编辑器

04.基础文章发布-频道列表获取渲染

05.基础文章发布-收集表单数据提交表单

06.文章封面-上传文章封面基础实现

07.文章封面-实现切换封面类型

08.文章封面-控制上传图片的数量

09.文章封面-发布带封面的文章

10.文章列表-功能描述和结构创建

11.文章列表-通过自定义hook获取频道列表

12.文章列表-渲染table表格

13.文章列表-适配文章状态

Day9

01.文章列表-筛选功能实现

02.文章列表-分页功能实现

03.文章列表-删除功能实现

04.文章列表-携带id跳转到编辑页

05.编辑文章-回填基础数据

06.编辑文章-回填封面信息

07.编辑文章-根据id适配编辑和新增状态

08.编辑文章-更新文章

09.项目打包-基础打包和本地预览

10.打包优化-配置路由懒加载

11.打包优化-包体积可视化分析

12.打包优化-CDN配置

温馨提示：

以上内容大家先学为敬，还有【提高篇】和【项目实战前台篇】暂未上线，老师正在快马加鞭录制中，敬请期待!