为什么需要自建业务组件库
在中小团队中，前端开发往往依赖 Ant Design 等成熟开源库。虽然这能快速解决通用 UI 问题，但在业务逻辑复杂、交互定制需求高的场景下，通用库的扩展性逐渐成为瓶颈。强行修改开源源码不仅维护成本极高，还容易引入兼容性问题。这门课解决的核心痛点，是如何从业务实际需求出发，构建一套可复用、易扩展、符合团队规范的基础设施。它不教你堆砌 CSS 样式，而是深入探讨组件的设计原则、状态管理策略以及 API 设计逻辑。对于已经厌倦了“复制粘贴代码”、希望在前端工程中建立核心竞争力的开发者而言，这是从“功能实现者”向“架构参与者”转变的关键一步。
适合人群与前置知识
这门课并非前端入门教程，它有着明确的前置门槛。首先，你需熟练掌握 React 或 Vue 框架的核心生命周期与组合式 API，具备独立开发复杂单页应用的经验。其次，必须对 TypeScript 有深入理解，能够熟练运用泛型、工具类型及类型守卫来保障组件库的类型安全。此外，熟悉 Webpack 或 Vite 等现代打包工具的配置原理，了解模块化打包与产物优化策略，也是跟随课程思路的重要基础。如果你还停留在使用 JSX 写页面、缺乏对底层构建流程认知的阶段，直接学习此课程可能会感到吃力。建议你先补齐工程化基础，再尝试构建组件库，否则容易陷入“知其然不知其所以然”的困境。
学习路径与实操建议
建议不要按部就班地从头看完，而是采用“倒推式”学习。首先，重点研读关于组件设计模式与 API 规范的部分，理解“高扩展性”到底意味着什么，例如如何通过组合替代继承、如何利用 Context 管理全局状态。其次，深入研究构建工具链的配置环节，理解如何将组件库封装为可发布的 NPM 包，这涉及到源码编译、样式提取及文档自动化生成。在学习过程中，务必同步进行实操练习。不要只看不练，建议你选取自己当前项目中重复率最高的 2-3 个业务组件，尝试按照课程中的规范进行重构。利用课程资料中的代码片段作为参考，对比自己原有代码的差异，重点思考：如果下一个需求变化，当前的代码结构是否能低成本应对？学完这门课，你应当具备独立从零搭建团队内部组件库的能力，并能主导代码评审中的架构合理性讨论，而不仅仅是实现 UI 还原。
课程目录
├── 第1章课程简介/ │ ├── [ 68M] 1-1课程导读.mp4 ├── 第2章0-1搭建开发环境/ │ ├── [ 45M] 2-10-1搭建开发环境-工具安装.mp4 │ ├── [ 49M] 2-2初始化一个React项目.mp4 │ ├── [ 97M] 2-3徒手写一个button组件感受下.mp4 │ ├── [150M] 2-4组件开发-引入storybook.mp4 │ └── [ 131] README.md ├── 第3章热身：完整的写一个Button组件/ │ ├── [114M] 3-1如何完善组件单测.mp4 │ ├── [ 88M] 3-2使用sass写css.mp4 │ ├── [ 96M] 3-3完整开发一个Icon组件.mp4 │ ├── [108M] 3-4用copy的方式完成一个交互多一些的Tag组件开发(1).mp4 │ └── [ 55M] 3-5用copy的方式完成一个交互多一些的Tag组件开发(2)-.mp4 ├── 第4章工欲善其事必先利其器：组件库的工程化/ │ ├── [ 57M] 4-1脚手架框架搭建.mp4 │ └── [113M] 4-2制作标准化组件模板.mp4 └── 第5章组件设计/ ├── [ 55M] 5-10Input&amp_TextAreamaxLength-.mp4 ├── [111M] 5-11TextArea支持自动高度-1.mp4 ├── [ 97M] 5-12TextArea支持自动高度-2.mp4 ├── [ 95M] 5-13TextArea自动高度的另外一种思路-影子组件.mp4 ├── [ 39M] 5-14受控&amp_非受控单测编写.mp4 ├── [144M] 5-15Avatar开发.mp4 ├── [ 72M] 5-16Switch开发-1.mp4 ├── [ 65M] 5-17Switch开发-2.mp4 ├── [ 97M] 5-18affix开发-1.mp4 ├── [ 85M] 5-19affix开发-2.mp4 ├── [ 26M] 5-1组件基础理论.mp4 ├── [ 48M] 5-20affix第二种实现方法和优化思路.mp4 ├── [ 83M] 5-2组件开发Radio-点击事件.mp4 ├── [107M] 5-3组件开发Radio-受控组件&amp_非受控组件.mp4 ├── [ 88M] 5-4RadioGroup开发.mp4 ├── [ 30M] 5-5RadioGroup开发-补充.mp4 ├── [119M] 5-6checkbox&amp_checkboxgroup.mp4 ├── [ 58M] 5-7Input组件开发-脚手架升级自动抓取css.mp4 ├── [ 80M] 5-8Input组件受控功能演示.mp4 └── [ 50M] 5-9Input&amp_TextAreamaxLength-1.mp4 ├── 第6章组件设计（Affix、progress、Menu）/ │ ├── [137M] 6-10Menu逻辑完善-高亮显示-1.mp4 │ ├── [ 77M] 6-11Menu逻辑完善-高亮显示-2.mp4 │ ├── [ 97M] 6-1固钉Affix组件开发-1.mp4 │ ├── [ 84M] 6-2固钉Affix组件开发-2.mp4 │ ├── [ 47M] 6-3固钉Affix组件，第二种实现方法和优化思路.mp4 │ ├── [144M] 6-4progress组件开发：用css3来开发进度条.mp4 │ ├── [108M] 6-5circle类型progress：用css3来开发圆形进度.mp4 │ ├── [ 82M] 6-6circle类型progress：用css3来开发圆形进度.mp4 │ ├── [174M] 6-7Menu组件开发：UI结构还原-1.mp4 │ └── [ 88M] 6-8Menu组件开发：UI结构还原-2.mp4 └── 第7章复杂组件设计-弹窗类/ ├── [139M] 7-1实现一个基础弹窗.mp4 ├── [142M] 7-2完善弹窗基础事件.mp4 ├── [103M] 7-3实现Overlay相对目标元素的定位计算-1.mp4 ├── [114M] 7-4实现Overlay相对目标元素的定位计算-2.mp4 ├── [130M] 7-5实现Overlay通用位置计算算法-1.mp4 ├── [120M] 7-6实现Overlay通用位置计算算法-2.mp4 │ ├── [ 85M] 7-7 快捷弹窗组件 Popup-1.mp4 │ ├── [128M] 7-8快捷弹窗组件Popup-2.mp4 │ └── [132M] 7-9Tooltip文字提示组件的开发-1.mp4 │ ├── [114M] 7-10Tooltip文字提示组件的开发-2.mp4 │ ├── [103M] 7-11弹窗超出可视区域的自动订正-1.mp4 │ ├── [102M] 7-12弹窗超出可视区域的自动订正-2.mp4 │ ├── [123M] 7-13Dropdown组件的开发-1.mp4 │ ├── [142M] 7-14Dropdown组件的开发-2.mp4 │ ├── [124M] 7-15Dropdown组件的开发-3.mp4 │ ├── [159M] 7-16Message组件开发-1.mp4 │ ├── [157M] 7-17Message组件开发-2.mp4 │ ├── [ 79M] 7-18Message组件开发-3.mp4 └──第8章复杂复合组件-表单/ ├── [143M] 8-10编译StoryBook，排查编译中遇到的commonjs.mp4 ├── [127M] 8-11babel编译src到es5.mp4 ├── [178M] 8-1Form布局和数据获取-1.mp4 ├── [177M] 8-2Form布局和数据获取-2.mp4 ├── [175M] 8-3Form数据获取优化【更多it资源 www.】.mp4 ├── [205M] 8-4Form表单校验.mp4 ├── [ 75M] 8-5Form表单校验问题处理.mp4 ├── [141M] 8-6Form使用现成的开源校验库.mp4 ├── [122M] 8-7Form数据手动Reset和填充.mp4 ├── [ 57M] 8-8FormReset的时候清空错误提示.mp4 └── [161M] 8-9Form通过api调用的方式提交、reset、fill数据.mp4 └── 资料代码/
