TS+ React18高仿AntD从零到一打造组件库

体系课

0 人浏览发布 2026-06-09更新 2026-06-09

用当下主流前端技术“造一次轮子”，解决初中级到高级前端的跃迁难题

* 00 资料/

* 源代码/

* 01 react-with-ts.zip (0.33 MB)

* 02 new-docs.zip (0.38 MB)

* 03 vikingship.zip (0.63 MB)

* 04 learn-typescript.zip (0.00 MB)

* 01 第1章课程导学（此章节必看）/

* 01 1-1 导学（不看错过1个亿）.mp4 (91.58 MB), 16:43

* 02 1-2 代码库使用注意事项（必看）.mp4 (25.44 MB), 04:37

* 03 1-3 2022年更新说明.mp4 (27.56 MB), 04:25

* 02 第2章欢迎来到类型的世界 - Typescript/

* 01 2-1 什么是 Typescript.mp4 (36.77 MB), 05:49

* 02 2-2 为什么要使用 Typescript.mp4 (25.90 MB), 04:56

* 03 2-3 安装和初试 Typescript.mp4 (41.02 MB), 07:06

* 04 2-4 基础类型.mp4 (32.34 MB), 05:54

* 05 2-5 any 类型和联合类型.mp4 (25.43 MB), 04:25

* 06 2-6 Array 和 Tuple.mp4 (34.95 MB), 06:05

* 07 2-7 interface 初探.mp4 (43.24 MB), 06:32

* 08 2-8 函数和类型推断.mp4 (47.13 MB), 08:06

* 09 2-9 枚举（Enum）.mp4 (43.86 MB), 07:08

* 10 2-10 泛型（Generics）第一部分.mp4 (41.91 MB), 07:30

* 11 2-11 泛型（Generics）第二部分 - 约束泛型.mp4 (35.80 MB), 06:24

* 12 2-12 泛型（Generics）第三部分 - 类和接口.mp4 (70.46 MB), 12:37

* 13 2-13 类型别名和类型断言.mp4 (52.89 MB), 09:02

* 14 2-14 声明文件第一部分.mp4 (79.55 MB), 13:34

* 15 2-15 声明文件第二部分.mp4 (65.86 MB), 10:43

* 16 2-16 内置类型.mp4 (48.61 MB), 08:36

* 17 2-17 配置文件.mp4 (62.18 MB), 10:44

* 03 第3章神奇的 React 配合 typescript，完美输出/

* 01 3-1 React简介和基础知识回顾.mp4 (83.39 MB), 14:42

* 02 3-2 配置 react 开发环境.mp4 (51.29 MB), 08:50

* 03 3-3 第一个组件 - ts为组件助力.mp4 (36.84 MB), 06:26

* 04 3-4 关于 React18 FC 升级后 children 属性.html (0.46 MB)

* 05 3-5 什么是和为什么要使用 React Hook.mp4 (44.71 MB), 07:25

* 06 3-6 在函数组件使用 state - useState Hook.mp4 (61.34 MB), 09:10

* 07 3-7 useEffect 第一部分 - 初出茅庐.mp4 (53.76 MB), 05:31

* 08 3-8 useEffect 第二部分 - 有始有终.mp4 (58.93 MB), 08:18

* 09 3-9 useEffect 第三部分 - 控制运行.mp4 (43.76 MB), 06:52

* 10 3-10 自定义 Hook - 重构 MouseTracker.mp4 (56.63 MB), 06:48

* 11 3-11 自定义 Hook 第二部分 - HOC的劣势.mp4 (64.29 MB), 08:10

* 12 3-12 自定义 hook 第三部分 - 正确的方式完成 URLLoader.mp4 (43.74 MB), 07:39

* 13 3-13 useRef - state遇到的难题.mp4 (27.50 MB), 05:08

* 14 3-14 useRef - 多次渲染之间的纽带.mp4 (40.63 MB), 07:30

* 15 3-15 useContext - 解决多层传递属性的灵丹妙药.mp4 (61.75 MB), 10:27

* 16 3-16 hook 规则和其他 hook.mp4 (36.37 MB), 03:56

* 17 3-17 React18 更新总览.mp4 (34.75 MB), 06:00

* 18 3-18 React18- createRoot 以及自动批处理.mp4 (69.32 MB), 12:22

* 19 3-19 Concurrent 并发的概念.mp4 (46.32 MB), 07:47

* 20 3-20 TransitionAPI的用法.mp4 (73.40 MB), 13:04

* 21 3-21 Suspense 的概念.mp4 (62.28 MB), 11:09

* 22 3-22 实践 Suspense.mp4 (61.02 MB), 10:50

* 04 第4章组件库起航 - 你真的能写的好看起来简单的 Button 组件吗/

* 01 4-1 组件库开始起航 - 需求分析.mp4 (32.24 MB), 05:31

* 02 4-2 文件结构和代码规范.mp4 (52.09 MB), 09:17

* 03 4-3 样式解决方案分析.mp4 (50.69 MB), 07:37

* 04 4-4 做一次设计师 - 添加自己的色彩体系.mp4 (46.42 MB), 07:02

* 05 4-5 更多样式变量 - 添加字体变量解决方案.mp4 (67.43 MB), 07:10

* 06 4-6 初次亮相 - 添加 normalize.css.mp4 (48.41 MB), 09:06

* 07 4-7 Button 组件需求分析.mp4 (32.68 MB), 04:58

* 08 4-8 小试牛刀 - Button 组件编码第一部分.mp4 (80.28 MB), 14:18

* 09 4-9 添加 Button 基本样式.mp4 (54.39 MB), 10:07

* 10 4-10 升级 Button 组件样式.mp4 (70.02 MB), 12:32

* 11 4-11 精益求精 - Buton 组件编码第二部分.mp4 (45.29 MB), 08:05

* 12 4-12 【学习任务】完成 Alert 组件.html (0.02 MB)

* 05 第5章组件测试/

* 01 5-1 为什么要有测试.mp4 (41.58 MB), 07:29

* 02 5-2 通用测试框架 Jest 出场.mp4 (52.50 MB), 09:36

* 03 5-3 React 测试工具 - react-testing-library.mp4 (49.93 MB), 09:17

* 04 5-4 添加Button 测试代码第一部分.mp4 (59.58 MB), 10:33

* 05 5-5 添加Button 测试代码第二部分.mp4 (59.25 MB), 10:53

* 06 5-6 【学习任务】给 Alert 组件添加测试用例.html (0.00 MB)

* 06 第6章更上一层楼 - 完成 Menu 组件/

* 01 6-1 Menu 组件需求分析.mp4 (42.93 MB), 07:20

* 02 6-2 基础架构 - Menu组件编码第一部分.mp4 (57.48 MB), 10:35

* 03 6-3 需求升级 - Menu 组件编码第二部分.mp4 (62.04 MB), 11:09

* 04 6-4 添加 Menu 样式.mp4 (58.30 MB), 10:21

* 05 6-5 测试驱动 - Menu 测试添加.mp4 (97.75 MB), 17:32

* 06 6-6 日趋完美 - Menu 组件编码第三部分.mp4 (52.35 MB), 09:15

* 07 6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分.mp4 (60.13 MB), 10:39

* 08 6-8 添加交互 - SubMenu下拉菜单编码第二部分.mp4 (50.78 MB), 09:29

* 09 6-9 大功告成 - SubMenu 下拉菜单编码第三部分.mp4 (54.67 MB), 10:18

* 10 6-10 完美组件 - SubMenu 组件添加测试.mp4 (76.23 MB), 13:55

* 11 6-11 Tabs 组件.html (0.11 MB)

* 12 6-12 Tabs 组件.html (0.57 MB)

* 07 第7章他山之石 - Icon 组件和 Transition 组件/

* 01 7-1 图标解决方案简介.mp4 (65.18 MB), 07:44

* 02 7-2 他山之石 - Icon组件编码第一部分.mp4 (57.71 MB), 10:12

* 03 7-3 Icon 组件样式添加.mp4 (33.79 MB), 06:00

* 04 7-4 让图标动起来 - 动画效果第一种实现方法.mp4 (46.30 MB), 08:19

* 05 7-5 React Transition Group 简介.mp4 (43.74 MB), 07:59

* 06 7-6 React Transition Group 实践 - 动画效果第二种实现方式.mp4 (37.85 MB), 06:52

* 07 7-7 尽善尽美 - React Transition Group 添加菜单消失的动画.mp4 (34.86 MB), 06:12

* 08 7-8 拿来主义 - 自定义 Transition 组件编码第一部分.mp4 (60.94 MB), 10:42

* 09 7-9 拿来主义 - 自定义 Transition 组件编码第二部分.mp4 (38.65 MB), 07:20

* 10 7-10 使用 Icon 和 Transition 改造 Alert.html (0.00 MB)

* 08 第8章 Storybook - 本地调试组件和生成文档页面的利器/

* 01 8-1 什么是 Storybook.mp4 (39.60 MB), 06:49

* 02 8-2 安装 Storybook.mp4 (37.39 MB), 06:41

* 03 8-3 Storybook 创建第一个 story.mp4 (55.97 MB), 09:59

* 04 8-4 storybook 中的 args 的概念.mp4 (46.31 MB), 08:19

* 05 8-5 argTypes 的功能和用法.mp4 (57.30 MB), 10:17

* 06 8-6 学习使用 parameter 修改插件的配置.mp4 (47.93 MB), 08:39

* 07 8-7 注释生成文档以及Decorators.mp4 (44.31 MB), 08:02

* 08 8-8 使用 MDX 书写 Story.mp4 (57.60 MB), 10:11

* 09 8-9 CSF 结合 MDX 完成终极目标.mp4 (47.03 MB), 08:32

* 10 8-10 完成的 storybook 的架构，给剩下的组件添加 stories.html (0.46 MB)

* 09 第9章进入表单的世界 - Input 组件和 AutoComplete 组件/

* 01 9-1 知己知彼 -Input 组件需求分析.mp4 (34.38 MB), 06:12

* 02 9-2 抛砖引玉 - Input 组件伪代码实现.mp4 (50.42 MB), 08:48

* 03 9-3 持续优化 - Input组件代码实现和优化过程.mp4 (64.83 MB), 12:11

* 04 9-4 新的挑战 - AutoComplete组件分析.mp4 (68.85 MB), 09:29

* 05 9-5 基本骨架 - AutoComplete 编码第一部分.mp4 (77.33 MB), 14:09

* 06 9-6 AutoComplete 支持自定义模版.mp4 (60.38 MB), 11:21

* 07 9-7 异步来了 - AutoComplete 支持异步请求编码.mp4 (51.46 MB), 09:42

* 08 9-8 老瓶新酒 - 使用自定义Hook实现函数防抖.mp4 (65.82 MB), 11:51

* 09 9-9 AutoComplete 支持键盘事件.mp4 (53.97 MB), 10:11

* 10 9-10 妙用 useRef - 实现 clickOutSide 功能-.mp4 (59.58 MB), 10:57

* 11 9-11 完美收尾 - AutoComplete 添加单元测试.mp4 (79.20 MB), 14:12

* 12 9-12 Select 组件.html (0.05 MB)

* 10 第10章终极任务 - Upload 组件/

* 01 10-1 最终任务 - Upload组件需求分析.mp4 (36.23 MB), 06:25

* 02 10-2 下一代 HTTP 库 - axios.mp4 (41.72 MB), 05:54

* 03 10-3 在线 mock server 和 axios 简单使用.mp4 (56.04 MB), 09:29

* 04 10-4 上传文件的基本方式.mp4 (53.52 MB), 09:39

* 05 10-5 完成基本流程 - Upload 组件编码第一部分.mp4 (73.64 MB), 13:23

* 06 10-6 完善生命周期 - Upload 组件编码第二部分.mp4 (44.28 MB), 08:00

* 07 10-7 创建列表数据 - UploadList 组件编码第一部分.mp4 (75.33 MB), 13:36

* 08 10-8 显示上传数据 - UploadList 组件编码第二部分.mp4 (68.64 MB), 11:59

* 09 10-9 显示上传进度 - 添加 Progress 组件.mp4 (74.50 MB), 10:29

* 10 10-10 精益求精 - 再次分析 Upload 组件更近一步需求.mp4 (47.69 MB), 06:33

* 11 10-11 Upload 增强交互第一部分.mp4 (49.21 MB), 08:50

* 12 10-12 拖动上传 - 支持 Drag and Drop.mp4 (56.08 MB), 10:05

* 13 10-13 异步怎样测试 - Upload 测试第一部分.mp4 (69.58 MB), 12:29

* 14 10-14 拖动事件怎样测试 - Upload 测试第二部分.mp4 (60.81 MB), 11:25

* 15 10-15 dragAndDrop 测试升级.html (0.46 MB)

* 11 第11章终极大考 - Form 表单组件/

* 01 11-1 分析 Form 组件的需求.mp4 (55.12 MB), 09:16

* 02 11-2 创建基本的表单静态展示.mp4 (79.31 MB), 14:07

* 03 11-3 分析数据交互的思路.mp4 (54.86 MB), 10:07

* 04 11-4 初始化 useStore.mp4 (79.81 MB), 14:12

* 05 11-5 注册对应的 Item 到 store.mp4 (52.03 MB), 09:30

* 06 11-6 使用黑科技自动更新 store 中的数据.mp4 (73.36 MB), 13:03

* 07 11-7 更新值第二部分：自定义对应字段.mp4 (57.93 MB), 10:17

* 08 11-8 更新值第三部分：完善默认值以及修改对应的类型.mp4 (67.15 MB), 12:00

* 09 11-9 添加验证第一部分：单个 Item 验证.mp4 (98.25 MB), 17:28

* 10 11-10 验证第二部分：展示错误信息.mp4 (59.69 MB), 10:52

* 11 11-11 验证第三部分：添加自定义规则.mp4 (71.72 MB), 12:39

* 12 11-12 验证第四部分：表单整体验证.mp4 (101.01 MB), 18:01

* 13 11-13 验证第五部分：表单整体验证第二部分.mp4 (56.95 MB), 10:15

* 14 11-14 使用 renderProps 自定义展示.mp4 (45.59 MB), 08:15

* 15 11-15 添加组件实例方法第一部分.mp4 (37.99 MB), 06:52

* 16 11-16 添加组件实例方法第二部分.mp4 (82.51 MB), 14:48

* 17 11-17 Form表单总结.mp4 (27.87 MB), 05:12

* 12 第12章 Javascript 模块打包 - 需要什么类型的模块供各种环境使用/

* 01 12-1 Javascript模块化发展历史.mp4 (50.40 MB), 07:22

* 02 12-2 webpack 到底完成什么任务 - bundler的神奇功效.mp4 (40.83 MB), 06:36

* 03 12-3 怎样选择 Javascript 模块格式.mp4 (35.47 MB), 06:38

* 04 12-4 创建组件库模块入口文件.mp4 (46.18 MB), 08:23

* 05 12-5 驯服tsc - tsconfig 编写第一部分.mp4 (43.78 MB), 08:08

* 06 12-6 驯服 tsc - tsconfig 编写第二部分.mp4 (36.02 MB), 06:28

* 07 12-7 生成最终使用的样式文件.mp4 (35.19 MB), 06:10

* 08 12-8 使用 npm link 本地测试组件库第一部分.mp4 (39.72 MB), 06:28

* 09 12-9 使用 npm link 本地测试组件库第二部分.mp4 (27.31 MB), 05:18

* 13 第13章大功告成 - 发布到 Npm，以及添加 CICD 支持/

* 01 13-1 Npm 简介.mp4 (41.31 MB), 05:35

* 02 13-2 发布组件库到 npm.mp4 (42.27 MB), 07:37

* 03 13-3 瘦身任务 - 精简 package.json 依赖.mp4 (39.80 MB), 07:12

* 04 13-4 万无一失 - 添加发布和 commit 前检查.mp4 (50.53 MB), 09:17

* 05 13-5 使用 Storybook 生成静态文档页面.mp4 (44.09 MB), 07:40

* 06 13-6 CI CD 简介.mp4 (24.63 MB), 04:59

* 07 13-7 使用 travis 自动运行测试.mp4 (45.91 MB), 08:02

* 08 13-8 使用 travis 自动发布文档页面.mp4 (35.45 MB), 06:35

* 14 第14章使用 Rollup 打包多种模块格式/

* 01 14-1 Rollup 简介.mp4 (50.30 MB), 08:41

* 02 14-2 Rollup 插件的简单使用.mp4 (54.97 MB), 09:38

* 03 14-3 Rollup 打包 ES 格式第一部分.mp4 (51.56 MB), 08:49

* 04 14-4 Rollup 打包 ES 格式第二部分.mp4 (49.23 MB), 08:53

* 05 14-5 Rollup 打包 UMD 格式第一部分.mp4 (69.13 MB), 12:22

* 06 14-6 Rollup 打包 UMD 格式第二部分.mp4 (43.89 MB), 08:05

* 07 14-7 整合最终的打包配置文件.mp4 (48.65 MB), 07:37

* 15 第15章课程总结/

* 01 15-1 课程总结.mp4 (59.29 MB), 08:24

TS+ React18高仿AntD从零到一打造组件库

体系课

0 人浏览发布 2026-06-09更新 2026-06-09

用当下主流前端技术“造一次轮子”，解决初中级到高级前端的跃迁难题

* 00 资料/

* 源代码/

* 01 react-with-ts.zip (0.33 MB)

* 02 new-docs.zip (0.38 MB)

* 03 vikingship.zip (0.63 MB)

* 04 learn-typescript.zip (0.00 MB)

* 01 第1章课程导学（此章节必看）/

* 01 1-1 导学（不看错过1个亿）.mp4 (91.58 MB), 16:43

* 02 1-2 代码库使用注意事项（必看）.mp4 (25.44 MB), 04:37

* 03 1-3 2022年更新说明.mp4 (27.56 MB), 04:25

* 02 第2章欢迎来到类型的世界 - Typescript/

* 01 2-1 什么是 Typescript.mp4 (36.77 MB), 05:49

* 02 2-2 为什么要使用 Typescript.mp4 (25.90 MB), 04:56

* 03 2-3 安装和初试 Typescript.mp4 (41.02 MB), 07:06

* 04 2-4 基础类型.mp4 (32.34 MB), 05:54

* 05 2-5 any 类型和联合类型.mp4 (25.43 MB), 04:25

* 06 2-6 Array 和 Tuple.mp4 (34.95 MB), 06:05

* 07 2-7 interface 初探.mp4 (43.24 MB), 06:32

* 08 2-8 函数和类型推断.mp4 (47.13 MB), 08:06

* 09 2-9 枚举（Enum）.mp4 (43.86 MB), 07:08

* 10 2-10 泛型（Generics）第一部分.mp4 (41.91 MB), 07:30

* 11 2-11 泛型（Generics）第二部分 - 约束泛型.mp4 (35.80 MB), 06:24

* 12 2-12 泛型（Generics）第三部分 - 类和接口.mp4 (70.46 MB), 12:37

* 13 2-13 类型别名和类型断言.mp4 (52.89 MB), 09:02

* 14 2-14 声明文件第一部分.mp4 (79.55 MB), 13:34

* 15 2-15 声明文件第二部分.mp4 (65.86 MB), 10:43

* 16 2-16 内置类型.mp4 (48.61 MB), 08:36

* 17 2-17 配置文件.mp4 (62.18 MB), 10:44

* 03 第3章神奇的 React 配合 typescript，完美输出/

* 01 3-1 React简介和基础知识回顾.mp4 (83.39 MB), 14:42

* 02 3-2 配置 react 开发环境.mp4 (51.29 MB), 08:50

* 03 3-3 第一个组件 - ts为组件助力.mp4 (36.84 MB), 06:26

* 04 3-4 关于 React18 FC 升级后 children 属性.html (0.46 MB)

* 05 3-5 什么是和为什么要使用 React Hook.mp4 (44.71 MB), 07:25

* 06 3-6 在函数组件使用 state - useState Hook.mp4 (61.34 MB), 09:10

* 07 3-7 useEffect 第一部分 - 初出茅庐.mp4 (53.76 MB), 05:31

* 08 3-8 useEffect 第二部分 - 有始有终.mp4 (58.93 MB), 08:18

* 09 3-9 useEffect 第三部分 - 控制运行.mp4 (43.76 MB), 06:52

* 10 3-10 自定义 Hook - 重构 MouseTracker.mp4 (56.63 MB), 06:48

* 11 3-11 自定义 Hook 第二部分 - HOC的劣势.mp4 (64.29 MB), 08:10

* 12 3-12 自定义 hook 第三部分 - 正确的方式完成 URLLoader.mp4 (43.74 MB), 07:39

* 13 3-13 useRef - state遇到的难题.mp4 (27.50 MB), 05:08

* 14 3-14 useRef - 多次渲染之间的纽带.mp4 (40.63 MB), 07:30

* 15 3-15 useContext - 解决多层传递属性的灵丹妙药.mp4 (61.75 MB), 10:27

* 16 3-16 hook 规则和其他 hook.mp4 (36.37 MB), 03:56

* 17 3-17 React18 更新总览.mp4 (34.75 MB), 06:00

* 18 3-18 React18- createRoot 以及自动批处理.mp4 (69.32 MB), 12:22

* 19 3-19 Concurrent 并发的概念.mp4 (46.32 MB), 07:47

* 20 3-20 TransitionAPI的用法.mp4 (73.40 MB), 13:04

* 21 3-21 Suspense 的概念.mp4 (62.28 MB), 11:09

* 22 3-22 实践 Suspense.mp4 (61.02 MB), 10:50

* 04 第4章组件库起航 - 你真的能写的好看起来简单的 Button 组件吗/

* 01 4-1 组件库开始起航 - 需求分析.mp4 (32.24 MB), 05:31

* 02 4-2 文件结构和代码规范.mp4 (52.09 MB), 09:17

* 03 4-3 样式解决方案分析.mp4 (50.69 MB), 07:37

* 04 4-4 做一次设计师 - 添加自己的色彩体系.mp4 (46.42 MB), 07:02

* 05 4-5 更多样式变量 - 添加字体变量解决方案.mp4 (67.43 MB), 07:10

* 06 4-6 初次亮相 - 添加 normalize.css.mp4 (48.41 MB), 09:06

* 07 4-7 Button 组件需求分析.mp4 (32.68 MB), 04:58

* 08 4-8 小试牛刀 - Button 组件编码第一部分.mp4 (80.28 MB), 14:18

* 09 4-9 添加 Button 基本样式.mp4 (54.39 MB), 10:07

* 10 4-10 升级 Button 组件样式.mp4 (70.02 MB), 12:32

* 11 4-11 精益求精 - Buton 组件编码第二部分.mp4 (45.29 MB), 08:05

* 12 4-12 【学习任务】完成 Alert 组件.html (0.02 MB)

* 05 第5章组件测试/

* 01 5-1 为什么要有测试.mp4 (41.58 MB), 07:29

* 02 5-2 通用测试框架 Jest 出场.mp4 (52.50 MB), 09:36

* 03 5-3 React 测试工具 - react-testing-library.mp4 (49.93 MB), 09:17

* 04 5-4 添加Button 测试代码第一部分.mp4 (59.58 MB), 10:33

* 05 5-5 添加Button 测试代码第二部分.mp4 (59.25 MB), 10:53

* 06 5-6 【学习任务】给 Alert 组件添加测试用例.html (0.00 MB)

* 06 第6章更上一层楼 - 完成 Menu 组件/

* 01 6-1 Menu 组件需求分析.mp4 (42.93 MB), 07:20

* 02 6-2 基础架构 - Menu组件编码第一部分.mp4 (57.48 MB), 10:35

* 03 6-3 需求升级 - Menu 组件编码第二部分.mp4 (62.04 MB), 11:09

* 04 6-4 添加 Menu 样式.mp4 (58.30 MB), 10:21

* 05 6-5 测试驱动 - Menu 测试添加.mp4 (97.75 MB), 17:32

* 06 6-6 日趋完美 - Menu 组件编码第三部分.mp4 (52.35 MB), 09:15

* 07 6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分.mp4 (60.13 MB), 10:39

* 08 6-8 添加交互 - SubMenu下拉菜单编码第二部分.mp4 (50.78 MB), 09:29

* 09 6-9 大功告成 - SubMenu 下拉菜单编码第三部分.mp4 (54.67 MB), 10:18

* 10 6-10 完美组件 - SubMenu 组件添加测试.mp4 (76.23 MB), 13:55

* 11 6-11 Tabs 组件.html (0.11 MB)

* 12 6-12 Tabs 组件.html (0.57 MB)

* 07 第7章他山之石 - Icon 组件和 Transition 组件/

* 01 7-1 图标解决方案简介.mp4 (65.18 MB), 07:44

* 02 7-2 他山之石 - Icon组件编码第一部分.mp4 (57.71 MB), 10:12

* 03 7-3 Icon 组件样式添加.mp4 (33.79 MB), 06:00

* 04 7-4 让图标动起来 - 动画效果第一种实现方法.mp4 (46.30 MB), 08:19

* 05 7-5 React Transition Group 简介.mp4 (43.74 MB), 07:59

* 06 7-6 React Transition Group 实践 - 动画效果第二种实现方式.mp4 (37.85 MB), 06:52

* 07 7-7 尽善尽美 - React Transition Group 添加菜单消失的动画.mp4 (34.86 MB), 06:12

* 08 7-8 拿来主义 - 自定义 Transition 组件编码第一部分.mp4 (60.94 MB), 10:42

* 09 7-9 拿来主义 - 自定义 Transition 组件编码第二部分.mp4 (38.65 MB), 07:20

* 10 7-10 使用 Icon 和 Transition 改造 Alert.html (0.00 MB)

* 08 第8章 Storybook - 本地调试组件和生成文档页面的利器/

* 01 8-1 什么是 Storybook.mp4 (39.60 MB), 06:49

* 02 8-2 安装 Storybook.mp4 (37.39 MB), 06:41

* 03 8-3 Storybook 创建第一个 story.mp4 (55.97 MB), 09:59

* 04 8-4 storybook 中的 args 的概念.mp4 (46.31 MB), 08:19

* 05 8-5 argTypes 的功能和用法.mp4 (57.30 MB), 10:17

* 06 8-6 学习使用 parameter 修改插件的配置.mp4 (47.93 MB), 08:39

* 07 8-7 注释生成文档以及Decorators.mp4 (44.31 MB), 08:02

* 08 8-8 使用 MDX 书写 Story.mp4 (57.60 MB), 10:11

* 09 8-9 CSF 结合 MDX 完成终极目标.mp4 (47.03 MB), 08:32

* 10 8-10 完成的 storybook 的架构，给剩下的组件添加 stories.html (0.46 MB)

* 09 第9章进入表单的世界 - Input 组件和 AutoComplete 组件/

* 01 9-1 知己知彼 -Input 组件需求分析.mp4 (34.38 MB), 06:12

* 02 9-2 抛砖引玉 - Input 组件伪代码实现.mp4 (50.42 MB), 08:48

* 03 9-3 持续优化 - Input组件代码实现和优化过程.mp4 (64.83 MB), 12:11

* 04 9-4 新的挑战 - AutoComplete组件分析.mp4 (68.85 MB), 09:29

* 05 9-5 基本骨架 - AutoComplete 编码第一部分.mp4 (77.33 MB), 14:09

* 06 9-6 AutoComplete 支持自定义模版.mp4 (60.38 MB), 11:21

* 07 9-7 异步来了 - AutoComplete 支持异步请求编码.mp4 (51.46 MB), 09:42

* 08 9-8 老瓶新酒 - 使用自定义Hook实现函数防抖.mp4 (65.82 MB), 11:51

* 09 9-9 AutoComplete 支持键盘事件.mp4 (53.97 MB), 10:11

* 10 9-10 妙用 useRef - 实现 clickOutSide 功能-.mp4 (59.58 MB), 10:57

* 11 9-11 完美收尾 - AutoComplete 添加单元测试.mp4 (79.20 MB), 14:12

* 12 9-12 Select 组件.html (0.05 MB)

* 10 第10章终极任务 - Upload 组件/

* 01 10-1 最终任务 - Upload组件需求分析.mp4 (36.23 MB), 06:25

* 02 10-2 下一代 HTTP 库 - axios.mp4 (41.72 MB), 05:54

* 03 10-3 在线 mock server 和 axios 简单使用.mp4 (56.04 MB), 09:29

* 04 10-4 上传文件的基本方式.mp4 (53.52 MB), 09:39

* 05 10-5 完成基本流程 - Upload 组件编码第一部分.mp4 (73.64 MB), 13:23

* 06 10-6 完善生命周期 - Upload 组件编码第二部分.mp4 (44.28 MB), 08:00

* 07 10-7 创建列表数据 - UploadList 组件编码第一部分.mp4 (75.33 MB), 13:36

* 08 10-8 显示上传数据 - UploadList 组件编码第二部分.mp4 (68.64 MB), 11:59

* 09 10-9 显示上传进度 - 添加 Progress 组件.mp4 (74.50 MB), 10:29

* 10 10-10 精益求精 - 再次分析 Upload 组件更近一步需求.mp4 (47.69 MB), 06:33

* 11 10-11 Upload 增强交互第一部分.mp4 (49.21 MB), 08:50

* 12 10-12 拖动上传 - 支持 Drag and Drop.mp4 (56.08 MB), 10:05

* 13 10-13 异步怎样测试 - Upload 测试第一部分.mp4 (69.58 MB), 12:29

* 14 10-14 拖动事件怎样测试 - Upload 测试第二部分.mp4 (60.81 MB), 11:25

* 15 10-15 dragAndDrop 测试升级.html (0.46 MB)

* 11 第11章终极大考 - Form 表单组件/

* 01 11-1 分析 Form 组件的需求.mp4 (55.12 MB), 09:16

* 02 11-2 创建基本的表单静态展示.mp4 (79.31 MB), 14:07

* 03 11-3 分析数据交互的思路.mp4 (54.86 MB), 10:07

* 04 11-4 初始化 useStore.mp4 (79.81 MB), 14:12

* 05 11-5 注册对应的 Item 到 store.mp4 (52.03 MB), 09:30

* 06 11-6 使用黑科技自动更新 store 中的数据.mp4 (73.36 MB), 13:03

* 07 11-7 更新值第二部分：自定义对应字段.mp4 (57.93 MB), 10:17

* 08 11-8 更新值第三部分：完善默认值以及修改对应的类型.mp4 (67.15 MB), 12:00

* 09 11-9 添加验证第一部分：单个 Item 验证.mp4 (98.25 MB), 17:28

* 10 11-10 验证第二部分：展示错误信息.mp4 (59.69 MB), 10:52

* 11 11-11 验证第三部分：添加自定义规则.mp4 (71.72 MB), 12:39

* 12 11-12 验证第四部分：表单整体验证.mp4 (101.01 MB), 18:01

* 13 11-13 验证第五部分：表单整体验证第二部分.mp4 (56.95 MB), 10:15

* 14 11-14 使用 renderProps 自定义展示.mp4 (45.59 MB), 08:15

* 15 11-15 添加组件实例方法第一部分.mp4 (37.99 MB), 06:52

* 16 11-16 添加组件实例方法第二部分.mp4 (82.51 MB), 14:48

* 17 11-17 Form表单总结.mp4 (27.87 MB), 05:12

* 12 第12章 Javascript 模块打包 - 需要什么类型的模块供各种环境使用/

* 01 12-1 Javascript模块化发展历史.mp4 (50.40 MB), 07:22

* 02 12-2 webpack 到底完成什么任务 - bundler的神奇功效.mp4 (40.83 MB), 06:36

* 03 12-3 怎样选择 Javascript 模块格式.mp4 (35.47 MB), 06:38

* 04 12-4 创建组件库模块入口文件.mp4 (46.18 MB), 08:23

* 05 12-5 驯服tsc - tsconfig 编写第一部分.mp4 (43.78 MB), 08:08

* 06 12-6 驯服 tsc - tsconfig 编写第二部分.mp4 (36.02 MB), 06:28

* 07 12-7 生成最终使用的样式文件.mp4 (35.19 MB), 06:10

* 08 12-8 使用 npm link 本地测试组件库第一部分.mp4 (39.72 MB), 06:28

* 09 12-9 使用 npm link 本地测试组件库第二部分.mp4 (27.31 MB), 05:18

* 13 第13章大功告成 - 发布到 Npm，以及添加 CICD 支持/

* 01 13-1 Npm 简介.mp4 (41.31 MB), 05:35

* 02 13-2 发布组件库到 npm.mp4 (42.27 MB), 07:37

* 03 13-3 瘦身任务 - 精简 package.json 依赖.mp4 (39.80 MB), 07:12

* 04 13-4 万无一失 - 添加发布和 commit 前检查.mp4 (50.53 MB), 09:17

* 05 13-5 使用 Storybook 生成静态文档页面.mp4 (44.09 MB), 07:40

* 06 13-6 CI CD 简介.mp4 (24.63 MB), 04:59

* 07 13-7 使用 travis 自动运行测试.mp4 (45.91 MB), 08:02

* 08 13-8 使用 travis 自动发布文档页面.mp4 (35.45 MB), 06:35

* 14 第14章使用 Rollup 打包多种模块格式/

* 01 14-1 Rollup 简介.mp4 (50.30 MB), 08:41

* 02 14-2 Rollup 插件的简单使用.mp4 (54.97 MB), 09:38

* 03 14-3 Rollup 打包 ES 格式第一部分.mp4 (51.56 MB), 08:49

* 04 14-4 Rollup 打包 ES 格式第二部分.mp4 (49.23 MB), 08:53

* 05 14-5 Rollup 打包 UMD 格式第一部分.mp4 (69.13 MB), 12:22

* 06 14-6 Rollup 打包 UMD 格式第二部分.mp4 (43.89 MB), 08:05

* 07 14-7 整合最终的打包配置文件.mp4 (48.65 MB), 07:37

* 15 第15章课程总结/

* 01 15-1 课程总结.mp4 (59.29 MB), 08:24