[475] React 18 系统精讲 结合TS打造旅游电商平台 - 0-2年前端工程师进大厂必修课

网盘链接：

1. 【前言】这，不仅仅是一门课程的开始

• 1-1 课前须知，这里有你需要了解得一切

2. 【基础篇】配置React与TypeScript工作环境

• 2-1 带着问题来学习
• 2-2 【环境搭建】开始我们的第一个React项目
• 2-3 【项目启动】使用create-react-app快速搭建React
• 2-4 【延伸阅读】NPM vs YARN
• 2-5 【TypeScript配置】tsconfig.json详解
• 2-6 【延伸阅读】tsconfig.json编译器配置文档
• 2-7 【TypeScript配置】深挖TS编译流程

3. 【基础篇】React 与 TypeScript

• 3-1 带着问题来学习
• 3-2 章节总览
• 3-3 【概念理解】React的前世今生
• 3-4 【组件化】初识React函数式组件
• 3-5 【概念理解】JSX 编程思维
• 3-6 【组件化】配置React的CSS模组
• 3-7 【延伸阅读】CSS in JS (JSS)
• 3-8 【资源配置】加载媒体与字体文件
• 3-9 【组件化】创建class类组件
• 3-10 【延伸阅读】React的行内样式与CSS
• 3-11 【概念理解】State vs Props
• 3-12 【事件驱动】React Event 事件处理
• 3-13 【异步处理】获取网络API数据
• 3-14 【异步处理】setState的异步开发
• 3-15 【死与新生】探索React组件的生命周期
• 3-16 【概念理解】React 17 版本变化
• 3-17 【讨论题】什么是 React？

4. 【基础篇】React Hooks

• 4-1 带着问题来学习
• 4-2 【概念理解】 什么是钩子(hooks)
• 4-3 【状态钩子】使用useState管理组件state
• 4-4 【概念理解】副作用 side effect
• 4-5 【副作用钩子】使用useEffect异步获取数据
• 4-6 【副作用钩子】useEffect 使用指南
• 4-7 【全局数据传递】Context 与 useContext
• 4-8 【全局数据传递】组件化Context Provider
• 4-9 【高阶组件HOC】withAddToCart()
• 4-10 【自定义Hook】useAddToCart()
• 4-11 【讨论题】React Hooks 深度分析

5. 【实战项目】项目搭建与首页开发

• 5-1 带着问题来学习
• 5-2 【项目规划】网站开发设计指南
• 5-3 【项目启动】系统设计与项目初始化
• 5-4 【主页开发】Header、Footer
• 5-5 【项目重构】组件化思想实践
• 5-6 【主页开发】走马灯与侧边栏多重菜单
• 5-7 【主页开发】热门产品推荐
• 5-8 【实战任务】开发合作企业组件
• 5-9 【讨论题】软件开发生命周期

6. 【路由系统】react-router-dom V5

• 6-1 带着问题来学习
• 6-2 【概念理解】路由与SPA
• 6-3 【路由初始化】配置react-router
• 6-4 【路由架构】基础路由系统
• 6-5 【路由搭建】页面导航
• 6-6 【路由搭建】withRouter 与 useRouter
• 6-7 【路由搭建】Link 与动态导航
• 6-8 【讨论题】组件究竟是什么？

7. 【路由系统】react-router-dom V6

• 7-1 带着问题来学习
• 7-2 【概念理解】路由与SPA
• 7-3 【路由升级】如何从React Router V5 升级到 V6（选修）
• 7-4 【路由初始化】配置react-router
• 7-5 【路由架构】基础路由及页面导航
• 7-6 【路由跳转】useNavigate()钩子与Link组件-
• 7-7 【路由拓展】如何支持类组件

8. 【Redux 入门】实战项目架构设计

• 8-1 带着问题来学习
• 8-2 【概念理解】什么是redux？
• 8-3 【创建state】createStore
• 8-4 【访问state】获取store数据
• 8-5 【更新state】Action与Reducer处理
• 8-6 【订阅state】store的连接与订阅
• 8-7 【i18n】完成网站语言切换
• 8-8 【redux重构】action 的拆分与统一
• 8-9 【redux封装】在类组件中使用react-redux
• 8-10 【redux封装】在函数式组建中使用react-redux
• 8-11 【讨论题】redux 深度分析

9. 【进击的Redux】异步AJAX与redux中间件

• 9-1 带着问题来学习
• 9-2 【概念理解】RESTful
• 9-3 【API说明】课程后端在哪里？
• 9-4 【API连接】AJAX 异步获取推荐数据
• 9-5 【概念理解】Redux vs MVC
• 9-6 【reducer管理】combineReducers
• 9-7 【中间件】使用redux-thunk中间价实现异步action
• 9-8 【中间件】什么是中间件
• 9-9 【中间件】自定义中间件 actionLog
• 9-10 【RESTful进阶（选修）】Richardson成熟度模型与HATOAS

10. 【Redux-Toolkit】完成产品搜索与产品详情

• 10-1 带着问题来学习
• 10-2 章节总览
• 10-3 【详情页面搭建 1】页面框架、详情与日期选择
• 10-4 【详情页面搭建 2】页面框架、详情与日期选择
• 10-5 【概念理解】什么是redux-toolkit
• 10-6 【redux-toolkit】createSlice、reducer、与immer
• 10-7 【概念理解】createAsyncThunk 理论基础
• 10-8 【redux-toolkit】sotre配置(configureStore)与异步处理(createAsyncThunk)
• 10-9 【综合运用】搜索页面

11. 【顶部导航】用户登陆

• 11-1 带着问题来学习
• 11-2 【布局重构】页面布局
• 11-3 【注册页面】Antd + ts 表单处理
• 11-4 【注册页面】注册业务逻辑处理
• 11-5 【概念理解】Status Code 的重要性
• 11-6 【登录页面】用户登录表单与布局
• 11-7 【概念理解】JWT原理剖析
• 11-8 【JWT实例】JWT与单点登录实例解释
• 11-9 【登录页面】SignIn登录业务处理
• 11-10 【登录页面】SignOut登出业务处理
• 11-11 【redux-persist】登录持久化

12. 【综合运用】 购物与订单

• 12-1 带着问题来学习
• 12-2 【路由进阶】私有路由搭建
• 12-3 【UI搭建】购物车页面初始化
• 12-4 【Redux创建】购物车 Slice
• 12-5 【redux连接】加载购物车
• 12-6 【购物模块完成】购物车下单
• 12-7 【UI搭建】在线支付页面初始化
• 12-8 【Redux创建】订单 Slice
• 12-9 【redux连接】完成在线支付

13. 【项目上线】网站测试与部署

• 13-1 带着问题来学习
• 13-2 【章节总览】部署方案介绍
• 13-3 【静态部署】本地服务器托管
• 13-4 【概念理解】5分钟带你认识Docker
• 13-5 【速查表】常用的docker命令
• 13-6 【环境搭建】容器化方案与Docker配置
• 13-7 【速查表】Dockerfile 语法
• 13-8 【容器化改造】理解 Dockerfile 全过程
• 13-9 【容器化上线】实现阿里云部署

14. 【附录篇】TypeScript语法入门

• 14-1 什么是 TypeScript
• 14-2 开发环境配置
• 14-3 typescript工作流
• 14-4 变量声明
• 14-5 TypeScript类型简介
• 14-6 数字、布尔、与字符串
• 14-7 数组(Array)和元组(Tupple)
• 14-8 联合(Union)与字面量(Literal)类型
• 14-9 枚举类型 Enum
• 14-10 Any 与 unknow
• 14-11 void、undefined 与 Never-
• 14-12 类型适配 Type Assertions
• 14-13 函数类型
• 14-14 object对象类型
• 14-15 Interface 接口
• 14-16 class 类
• 14-17 Access Modifier 访问修饰符
• 14-18 Module 模块
• 14-19 Generics 泛型