第1章 课程简介
1-1 课程导读 (14:37)
第2章 0-1 搭建开发环境
2-1 0-1 搭建开发环境 – 工具安装 (07:40)
2-2 初始化一个 React 项目 (08:25)
2-3 徒手写一个 button 组件感受下 (16:44)
2-4 组件开发 – 引入 storybook (27:09)
第3章 热身:完整的写一个 Button 组件
3-1 如何完善组件单测 (19:33)
3-2 使用 sass 写 css (14:05)
3-3 完整开发一个 Icon 组件 (15:37)
3-4 用 copy 的方式完成一个交互多一些的 Tag 组件开发(1) (17:42)
3-5 用 copy 的方式完成一个交互多一些的 Tag 组件开发(2)-完善代码 (08:05)
第4章 工欲善其事必先利其器:组件库的工程化
4-1 脚手架框架搭建 (09:59)
4-2 制作标准化组件模板 (17:54)
第5章 组件设计(Radio、checkbox、Input、TextArea等)
5-1 组件基础理论 (05:29)
5-2 组件开发 Radio-点击事件 (14:28)
5-3 组件开发 Radio-受控组件&非受控组件 (18:32)
5-4 RadioGroup 开发 (15:39)
5-5 RadioGroup 开发-补充 (04:17)
5-6 checkbox & checkboxgroup (21:02)
5-7 Input 组件开发-脚手架升级自动抓取 css (08:48)
5-8 Input 组件受控功能演示 (13:59)
5-9 Input & TextArea maxLength-1 (06:57)
5-10 Input & TextArea maxLength-2 (08:10)
5-11 TextArea 支持自动高度-1 (15:17)
5-12 TextArea 支持自动高度-2 (12:23)
5-13 TextArea 自动高度的另外一种思路 – 影子组件 (12:02)
5-14 受控&非受控单测编写 (05:16)
5-15 Avatar 开发 (18:45)
5-16 Switch 开发-1 (09:49)
5-17 Switch 开发-2 (09:03)
第6章 组件设计(Affix、progress、Menu)
6-1 固钉 Affix 组件开发-1 (13:03)
6-2 固钉 Affix 组件开发-2 (11:38)
6-3 固钉 Affix 组件,第二种实现方法和优化思路 (06:06)
6-4 progress 组件开发:用 css3 来开发进度条 (15:38)
6-5 circle 类型 progress:用 css3 来开发圆形进度条-1 (15:14)
6-6 circle 类型 progress:用 css3 来开发圆形进度条-2 (10:50)
6-7 Menu组件开发: UI 结构还原-1 (15:28)
6-8 Menu组件开发: UI 结构还原-2 (08:09)
6-9 Menu 逻辑完善-缩进实现 (14:23)
6-10 Menu 逻辑完善-高亮显示-1 (16:04)
6-11 Menu 逻辑完善-高亮显示-2 (09:22)
第7章 复杂组件设计-弹窗类
7-1 实现一个基础弹窗 (17:59)
7-2 完善弹窗基础事件 (19:19)
7-3 实现 Overlay 相对目标元素的定位计算-1 (14:29)
7-4 实现 Overlay 相对目标元素的定位计算-2 (16:21)
7-5 实现 Overlay 通用位置计算算法-1 (19:01)
7-6 实现 Overlay 通用位置计算算法-2 (16:36)
7-7 快捷弹窗组件 Popup-1 (11:44)
7-8 快捷弹窗组件 Popup-2 (15:37)
7-9 Tooltip文字提示组件的开发-1 (15:00)
7-10 Tooltip文字提示组件的开发-2 (14:53)
7-11 弹窗超出可视区域的自动订正-1 (15:10)
7-12 弹窗超出可视区域的自动订正-2 (11:50)
7-13 Dropdown 组件的开发-1 (13:04)
7-14 Dropdown 组件的开发-2 (14:47)
7-15 Dropdown 组件的开发-3 (14:49)
7-16 Message 组件开发-1 (13:54)
7-17 Message 组件开发-2 (15:22)
7-18 Message 组件开发-3 (08:36)
第8章 复杂复合组件- 表单
8-1 Form 布局和数据获取-1 (15:40)
8-2 Form 布局和数据获取-2 (17:58)
8-3 Form 数据获取优化 (20:29)
8-4 Form 表单校验 (22:06)
8-5 Form 表单校验问题处理 (09:18)
8-6 Form 使用现成的开源校验库 (15:55)
8-7 Form 数据手动 Reset 和填充 (16:12)
8-8 Form Reset 的时候清空错误提示 (07:43)
8-9 Form 通过 api 调用的方式提交、reset、fill 数据 (15:03)
8-10 编译 StoryBook,排查编译中遇到的 commonjs 规范问题 (17:41)
8-11 babel 编译 src 到 es5 (13:19)
网盘截图: