React劲爆新特性Hooks 重构旅游电商网站火车票PWA

第1章 课程简介

在这里，你可以知道为什么要学习这门课程，会学习到哪些内容，等等... ...你会了解到学习本
课程所需要的先决条件
1-1 关于这门课程，你想了解的都在这里 (17:09)
1-2 看了这一节，对学习更有帮助 (16:33)

第2章 [操作篇]项目搭建

万事万物，都要从项目搭建开始。这一章，你一定要跟着老师一步一步地操作！不然，你可能连门都进不
去 ... ...
2-1 创建项目：使用react-create-app构建工具 (03:22)
2-2 编译脚本：react-scripts的作用与工作原理 (05:31)
2-3 解构编译脚本：eject的具体用法 (03:39)

第3章 [新特性]React新特性一览

这一章你可以学到React最近一年来最新最高频使用的新特性，让你紧跟React发展的前沿。
3-1 Context实现跨层级的组件数据传递 (14:40)
3-2 静态属性ContextType访问跨层级组件的数据 (03:26)
3-3 Lazy与Suspense实现延迟加载 (12:02)
3-4 Memo实现指定组件进行渲染 (12:54)

第4章 [新特性]React颠覆性新特性Hooks

这一章主要围绕Hooks这一颠覆性新特性进行学习，从概念入手、细数Hooks的核心内容，最后
还会列举常见问题。
4-1 React Hooks的概念与意义 (09:28)
4-2 使用State Hooks (13:59)
4-3 使用Effect Hooks (19:11)
4-4 使用Context Hooks (06:43)
4-5 使用Memo&Callback Hooks (14:25)
4-6 使用Ref Hooks (08:11)
4-7 【讨论题】使用 Ref Hooks
4-8 自定义Hooks (08:21)
4-9 Hooks的使用法则 (03:46)
4-10 Hooks的常见问题 (09:45)
4-11 【讨论题】Hooks的常见问题

第5章 [新特性]React新特性之Redux

这一章主要是以Redux为核心讲解，讲解了Redux的概念和意义，没有Redux的情况，以及
Redux的常用API。
5-1 React Redux的概念与意义 (04:22)
5-2 没有Redux的世界 (24:30)
5-3 Dispatch与Action (21:27)
5-4 使用Reducer拆解数据更新 (13:48)
5-5 异步Action (11:24)

第6章 [新特性]渐进式Web App

Progress Web Application（渐进式Web应用）是谷歌推出的前沿技术，可
以把它理解为国外版的小程序。这一章，学习有关渐进式Web应用的核心以及在项目中的应用。
6-1 PWA简介 (05:43)
6-2 服务工作线程：Service Worker (12:27)
6-3 “承诺”控制流：Promise (08:44)
6-4 更优雅的请求：fetch (06:14)
6-5 资源的缓存系统：Cache API (10:34)
6-6 消息推送：Notification API (07:02)
6-7 如何在项目中开启PWA (04:16)

第7章 [项目篇]火车票业务架构

这一章是本课程项目的最开始，学习项目如何进行技术选型、页面的交互设计，最后要如何准备Mock数据。
7-1 项目业务选型以及演示分析 (04:26)
7-2 项目模块交互设计演示与分析 (07:55)
7-3 项目工程初始化 (18:31)
7-4 为项目搭建Mock Server (07:50)

第8章 [项目篇]火车票首页

这一章完成火车票首页模块。在这一章将学习如何设计数据结构和模块，使用React Hooks创
建第一个组件，并完成火车票首页的所有功能。
8-1 数据结构与模块设计 (26:35)
8-2 顶部导航栏 (08:09)
8-3 始发终到站 (14:43)
8-4 城市选择浮层-顶部搜索栏 (21:05)
8-5 城市选择浮层-城市的异步加载 (12:01)
8-6 城市选择浮层-渲染城市列表 (15:00)
8-7 城市选择浮层-字母快速定位 (09:51)
8-8 【讨论题】城市选择浮层-字母快速定位
8-9 城市选择浮层-搜索建议 (12:09)
8-10 出发日期控件 (14:20)
8-11 日期选择浮层-搭建 (08:37)
8-12 日期选择浮层-日历组件(上) (16:30)
8-13 日期选择浮层-日历组件(下) (12:04)
8-14 只看高铁&动车控件 (06:53)
8-15 提交按钮控件 (05:39)

第9章 [项目篇]搜索结果页

这一章主要讲解搜索结果页模块。这一章依旧从设计数据结构和模块开始，通过一众React新特性来
完成搜索结果页的功能。
9-1 数据结构与模块设计(上) (16:26)
9-2 数据结构与模块设计(下) (10:15)
9-3 URL解析与数据请求 (19:02)
9-4 日期导航 (15:27)
9-5 车次列表 (12:15)
9-6 底部筛选按钮栏 (12:38)
9-7 综合筛选浮层-缓存状态(上) (16:16)
9-8 综合筛选浮层-缓存状态(下) (15:30)
9-9 【讨论题】综合筛选浮层-缓存状态(下)
9-10 综合筛选浮层-时间区间滑块(上) (17:22)
9-11 综合筛选浮层-时间区间滑块(下) (18:12)
9-12 【讨论题】综合筛选浮层-时间区间滑块(下)
9-13 综合筛选浮层 - 其他逻辑 (18:51)
9-14 数据联动与缓冲区重构 (16:26)

第10章 [项目篇]座次选择页

这一章主要讲解座次选择页模块。在这一章中，将使用到Redux控制流代码，Hooks自定义一个
通用组件，以及lazy懒加载不常用的组件等。
10-1 数据结构与模块设计 (17:34)
10-2 URL解析与数据请求 (20:06)
10-3 车次详细信息 (16:31)
10-4 异步加载时刻表(上) (14:12)
10-5 异步加载时刻表(下) (14:26)
10-6 车次列表 (24:31)

第11章 [项目篇]订单填写页

同样的配方，同样的原料。这一章完成订单填写页模块，将学习对现有Hooks组件的通用化改造。
11-1 数据结构与模块设计 (13:13)
11-2 URL解析与数据请求 (19:54)
11-3 乘客信息填写(一) (19:01)
11-4 乘客信息填写(二) (18:48)
11-5 -1 乘客信息填写(三) (18:16)
11-6 -2乘客信息填写(四) (17:52)
11-7 在线选座 (11:47)
11-8 结算提交 (10:04)

第12章 [提高篇]工程优化

这一章将学习如何控制项目打包体积，怎么对PWA应用进行部署，以及生产环境的部署等内容。
12-1 代码规范格式化 (14:52)
12-2 性能与部署 (15:02)

第13章 课程总结

最后，在这一章，总结一下React的一众新特性，最主要的是Hooks。
13-1 课程总结 (12:07)