[600] 高阶前端进阶必修，自主打造同比AntD的React组件库 - 手把手带你实现20个实用组件，真落地

网盘链接：

1. 课程简介

• 1-1 课程导读

2. 0-1 搭建开发环境

• 2-1 0-1 搭建开发环境 – 工具安装
• 2-2 初始化一个 React 项目
• 2-3 徒手写一个 button 组件感受下
• 2-4 组件开发 – 引入 storybook

3. 热身：完整的写一个 Button 组件

• 3-1 如何完善组件单测
• 3-2 使用 sass 写 css
• 3-3 完整开发一个 Icon 组件
• 3-4 用 copy 的方式完成一个交互多一些的 Tag 组件开发(1)
• 3-5 用 copy 的方式完成一个交互多一些的 Tag 组件开发(2)-完善代码

4. 工欲善其事必先利其器：组件库的工程化

• 4-1 脚手架框架搭建
• 4-2 制作标准化组件模板

5. 组件设计（Radio、checkbox、Input、TextArea等）

• 5-1 组件基础理论
• 5-2 组件开发 Radio-点击事件
• 5-3 组件开发 Radio-受控组件&非受控组件
• 5-4 RadioGroup 开发
• 5-5 RadioGroup 开发-补充
• 5-6 checkbox & checkboxgroup
• 5-7 Input 组件开发-脚手架升级自动抓取 css
• 5-8 Input 组件受控功能演示
• 5-9 Input & TextArea maxLength-1
• 5-10 Input & TextArea maxLength-2
• 5-11 TextArea 支持自动高度-1
• 5-12 TextArea 支持自动高度-2
• 5-13 TextArea 自动高度的另外一种思路 – 影子组件
• 5-14 受控&非受控单测编写
• 5-15 Avatar 开发
• 5-16 Switch 开发-1
• 5-17 Switch 开发-2

6. 组件设计（Affix、progress、Menu）

• 6-1 固钉 Affix 组件开发-1
• 6-2 固钉 Affix 组件开发-2
• 6-3 固钉 Affix 组件，第二种实现方法和优化思路
• 6-4 progress 组件开发：用 css3 来开发进度条
• 6-5 circle 类型 progress：用 css3 来开发圆形进度条-1
• 6-6 circle 类型 progress：用 css3 来开发圆形进度条-2
• 6-7 Menu组件开发： UI 结构还原-1
• 6-8 Menu组件开发： UI 结构还原-2
• 6-9 Menu 逻辑完善-缩进实现
• 6-10 Menu 逻辑完善-高亮显示-1
• 6-11 Menu 逻辑完善-高亮显示-2

7. 复杂组件设计-弹窗类

• 7-1 实现一个基础弹窗
• 7-2 完善弹窗基础事件
• 7-3 实现 Overlay 相对目标元素的定位计算-1
• 7-4 实现 Overlay 相对目标元素的定位计算-2
• 7-5 实现 Overlay 通用位置计算算法-1
• 7-6 实现 Overlay 通用位置计算算法-2
• 7-7 快捷弹窗组件 Popup-1
• 7-8 快捷弹窗组件 Popup-2
• 7-9 Tooltip文字提示组件的开发-1
• 7-10 Tooltip文字提示组件的开发-2
• 7-11 弹窗超出可视区域的自动订正-1
• 7-12 弹窗超出可视区域的自动订正-2
• 7-13 Dropdown 组件的开发-1
• 7-14 Dropdown 组件的开发-2
• 7-15 Dropdown 组件的开发-3
• 7-16 Message 组件开发-1
• 7-17 Message 组件开发-2
• 7-18 Message 组件开发-3

8. 复杂复合组件- 表单

• 8-1 Form 布局和数据获取-1
• 8-2 Form 布局和数据获取-2
• 8-3 Form 数据获取优化
• 8-4 Form 表单校验
• 8-5 Form 表单校验问题处理
• 8-6 Form 使用现成的开源校验库
• 8-7 Form 数据手动 Reset 和填充
• 8-8 Form Reset 的时候清空错误提示
• 8-9 Form 通过 api 调用的方式提交、reset、fill 数据
• 8-10 编译 StoryBook，排查编译中遇到的 commonjs 规范问题
• 8-11 babel 编译 src 到 es5