在大型业务开发中，原生 DOM 操作难以维护，引入全套 UI 库又因功能冗余而增加包体积，如何按需构建一套轻量、可定制的前端组件库，是区分中级与高级前端的关键能力。本课程基于 React 18 开发了一套仿 AntD 风格组件库，通过从零实现 20 个实用组件，完整覆盖组件设计、工程化落地及业务扩展的核心环节。课程聚焦组件化开发实战，不仅演示代码编写，更深入剖析一流组件库背后的设计逻辑，帮助学员理解高阶前端在架构层面的思考方式。
解决什么问题
许多开发者在使用成熟 UI 框架时，常遇到样式冲突、深度定制困难或无法二次开发等痛点。本课程解决的核心问题是：如何根据具体业务需求，自主设计并实现一套高扩展性的业务组件库。通过仿写 AntD 这一业界标杆，学员能掌握组件 API 设计、主题定制、交互逻辑封装等关键技能。课程强调"真落地"，所有组件均针对实际业务场景开发，旨在让学员跳出单纯调用框架的思维，建立独立构建前端基础设施的能力。学习过程中，将重点讲解如何处理组件间状态管理、如何优化渲染性能以及如何规范代码工程结构，这些细节正是大型项目稳定运行的基础。
适合基础与学习路径
本课程属于进阶内容，要求学员已熟练掌握 React 核心概念，理解 Hooks、Context 及组件生命周期，并具备一定的 TypeScript 基础。若仅处于初级阶段，建议先补齐 React 官方文档及相关基础教程，避免在复杂逻辑中迷失。学习时，不建议线性遍历所有组件，应优先选取高频且通用的基础组件进行深度剖析，例如按钮、表单、弹层等，理解其内部实现机制。随后再结合业务场景，尝试封装具有特定功能的复合组件。资料包中包含完整的代码工程与配套说明，建议将代码克隆至本地环境，逐行阅读源码，并主动修改参数观察行为变化，将被动观看转化为主动实践。
学完能做什么与资料配合
完成课程学习后，你将具备独立封装业务组件库的能力，能够在实际项目中快速响应个性化 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 └── 资料代码/
