React组件库开发实战指南

 1. 为什么前端开发者需要掌握组件库开发？   
企业级组件库开发能力已成为高阶前端核心竞争力。本课程通过复刻AntD的设计理念，系统讲解从环境搭建到复杂组件实现的完整流程。学员将掌握可复用的工程化思维，摆脱对现成组件库的依赖，提升代码抽象与架构设计能力。   

 2. 课程核心内容模块解析   
课程分为8大实战章节：   

- 基础建设：Storybook环境配置、Sass样式方案、自动化测试   

- 原子组件开发：Button、Icon、Tag等基础组件的标准化开发范式   

- 工程化体系：脚手架搭建、模板生成、CSS自动抓取等提效工具   

- 复合组件实战：RadioGroup、Form表单等带状态管理的复杂组件   

- 弹窗类组件：Overlay定位算法、Tooltip、Dropdown等动态组件开发   

 3. 特色技术亮点深度剖析   
定位算法与性能优化章节尤为硬核：   

- 独创"影子组件"方案实现TextArea自适应高度   

- 可视化区域自动订正技术解决弹窗溢出问题   

- CSS3纯前端方案开发圆形进度条（Progress组件）   

- 受控/非受控组件的统一处理模式与单测编写规范   

 4. 适合哪些开发者学习？   
- 具备React基础，希望进阶前端架构的开发者   

- 需要提升组件抽象能力的技术骨干   

- 计划开发私有组件库的团队技术负责人   

课程提供完整源码课件，包含30+组件的实现细节与设计思路。   

 5. 课程带来的长期价值   
通过复刻AntD的核心机制，学员不仅能掌握企业级代码规范，更能理解顶级开源库的设计哲学。特别适合希望提升技术影响力的开发者，为参与开源项目或打造技术品牌奠定基础。

资源目录列表：

├─高阶前端进阶必修，自主打造同比AntD的React组件库 - 带源码课件
│  ├─{1}--第1章课程简介
│  │  ├─[1.1]--1-1课程导读.mp4
│  ├─{2}--第2章0-1搭建开发环境
│  │  ├─[2.1]--2-10-1搭建开发环境-工具安装.mp4
│  │  ├─[2.2]--2-2初始化一个React项目.mp4
│  │  ├─[2.3]--2-3徒手写一个button组件感受下.mp4
│  │  ├─[2.4]--2-4组件开发-引入storybook.mp4
│  ├─{3}--第3章热身：完整的写一个Button组件
│  │  ├─[3.1]--3-1如何完善组件单测.mp4
│  │  ├─[3.2]--3-2使用sass写css.mp4
│  │  ├─[3.3]--3-3完整开发一个Icon组件.mp4
│  │  ├─[3.4]--3-4用copy的方式完成一个交互多一些的Tag组件开发(1).mp4
│  │  ├─[3.5]--3-5用copy的方式完成一个交互多一些的Tag组件开发(2)-.mp4
│  ├─{4}--第4章工欲善其事必先利其器：组件库的工程化
│  │  ├─[4.1]--4-1脚手架框架搭建.mp4
│  │  ├─[4.2]--4-2制作标准化组件模板.mp4
│  ├─{5}--第5章组件设计（Radio、checkbox、Input、Tex
│  │  ├─[5.1]--5-1组件基础理论.mp4
│  │  ├─[5.2]--5-2组件开发Radio-点击事件.mp4
│  │  ├─[5.3]--5-3组件开发Radio-受控组件非受控组件.mp4
│  │  ├─[5.4]--5-4RadioGroup开发.mp4
│  │  ├─[5.5]--5-5RadioGroup开发-补充.mp4
│  │  ├─[5.6]--5-6checkboxcheckboxgroup.mp4
│  │  ├─[5.7]--5-7Input组件开发-脚手架升级自动抓取css.mp4
│  │  ├─[5.8]--5-8Input组件受控功能演示.mp4
│  │  ├─[5.9]--5-9InputTextAreamaxLength-1.mp4
│  │  ├─[5.10]--5-10InputTextAreamaxLength-.mp4
│  │  ├─[5.11]--5-11TextArea支持自动高度-1.mp4
│  │  ├─[5.12]--5-12TextArea支持自动高度-2.mp4
│  │  ├─[5.13]--5-13TextArea自动高度的另外一种思路-影子组件.mp4
│  │  ├─[5.14]--5-14受控非受控单测编写.mp4
│  │  ├─[5.15]--5-15Avatar开发.mp4
│  │  ├─[5.16]--5-16Switch开发-1.mp4
│  │  ├─[5.17]--5-17Switch开发-2.mp4
│  ├─{6}--第6章组件设计（Affix、progress、Menu）
│  │  ├─[6.1]--6-1固钉Affix组件开发-1.mp4
│  │  ├─[6.2]--6-2固钉Affix组件开发-2.mp4
│  │  ├─[6.3]--6-3固钉Affix组件，第二种实现方法和优化思路.mp4
│  │  ├─[6.4]--6-4progress组件开发：用css3来开发进度条.mp4
│  │  ├─[6.5]--6-5circle类型progress：用css3来开发圆形进度.mp4
│  │  ├─[6.6]--6-6circle类型progress：用css3来开发圆形进度.mp4
│  │  ├─[6.7]--6-7Menu组件开发：UI结构还原-1.mp4
│  │  ├─[6.8]--6-8Menu组件开发：UI结构还原-2.mp4
│  │  ├─[6.9]--6-9Menu逻辑完善-缩进实现.mp4
│  │  ├─[6.10]--6-10Menu逻辑完善-高亮显示-1.mp4
│  │  ├─[6.11]--6-11Menu逻辑完善-高亮显示-2.mp4
│  ├─{7}--第7章复杂组件设计-弹窗类
│  │  ├─7-7快捷弹窗组件Popup-1.mp4
│  │  ├─[7.1]--7-1实现一个基础弹窗.mp4
│  │  ├─[7.2]--7-2完善弹窗基础事件.mp4
│  │  ├─[7.3]--7-3实现Overlay相对目标元素的定位计算-1.mp4
│  │  ├─[7.4]--7-4实现Overlay相对目标元素的定位计算-2.mp4
│  │  ├─[7.5]--7-5实现Overlay通用位置计算算法-1.mp4
│  │  ├─[7.6]--7-6实现Overlay通用位置计算算法-2.mp4
│  │  ├─[7.8]--7-8快捷弹窗组件Popup-2.mp4
│  │  ├─[7.9]--7-9Tooltip文字提示组件的开发-1.mp4
│  │  ├─[7.10]--7-10Tooltip文字提示组件的开发-2.mp4
│  │  ├─[7.11]--7-11弹窗超出可视区域的自动订正-1.mp4
│  │  ├─[7.12]--7-12弹窗超出可视区域的自动订正-2.mp4
│  │  ├─[7.13]--7-13Dropdown组件的开发-1.mp4
│  │  ├─[7.14]--7-14Dropdown组件的开发-2.mp4
│  │  ├─[7.15]--7-15Dropdown组件的开发-3.mp4
│  │  ├─[7.16]--7-16Message组件开发-1.mp4
│  │  ├─[7.17]--7-17Message组件开发-2.mp4
│  │  ├─[7.18]--7-18Message组件开发-3.mp4
│  ├─{8}--第8章复杂复合组件-表单
│  │  ├─[8.1]--8-1Form布局和数据获取-1.mp4
│  │  ├─[8.2]--8-2Form布局和数据获取-2.mp4
│  │  ├─[8.3]--8-3Form数据获取优化.mp4
│  │  ├─[8.4]--8-4Form表单校验.mp4
│  │  ├─[8.5]--8-5Form表单校验问题处理.mp4
│  │  ├─[8.6]--8-6Form使用现成的开源校验库.mp4
│  │  ├─[8.7]--8-7Form数据手动Reset和填充.mp4
│  │  ├─[8.8]--8-8FormReset的时候清空错误提示.mp4
│  │  ├─[8.9]--8-9Form通过api调用的方式提交、reset、fill数据.mp4
│  │  ├─[8.10]--8-10编译StoryBook，排查编译中遇到的commonjs.mp4
│  │  ├─[8.11]--8-11babel编译src到es5.mp4
│  ├─课件.7z