React+TypeScript高仿AntDesign开发企业级UI组件库

很多人简历上写着"熟悉 React"，但被问到"你封装的组件怎么处理 ref 转发""Modal 的挂载节点为什么要用 Portal""Form 的受控逻辑怎么设计"时，就开始含糊。这门课针对的正是这个缺口：它不是再教你写几个页面，而是让你把 Ant Design 这类组件库拆开、照着做一遍，从使用者变成实现者。

先说清楚：这门课补的是哪块能力

日常业务开发里，多数人用的是别人写好的组件，能传 props、能改样式就算会用。但一旦遇到这些场景，就开始卡：团队要统一交互规范，需要自研一套组件；用现成组件库但样式和交互总差一点，只能靠 hack 覆盖；面试官追问组件库原理，答不上来。

这门课的主题很明确——用 React + TypeScript 从零搭建一套企业级 UI 组件库。它要解决的不是"怎么写业务组件"，而是"怎么设计一个能被别人反复使用的组件"。这中间的差别很大：前者关心功能跑通，后者要关心 API 设计、类型定义、可访问性、样式隔离、打包产物、按需加载。

过程中会碰到哪些真问题

以下这些点，基本是跟着做就绕不开的，也是这门课值得花时间的地方：

• TypeScript 在组件库里的实际用法。不是简单给 props 加个 interface，而是用泛型约束、联合类型、类型收窄去描述 Button 的 size/variant、Form 的字段类型、Select 的选项结构。
• 组件 API 怎么设计才"顺手"。同名 prop 在不同组件里含义要一致，受控与非受控要能同时支持，默认值和必填项要分得清。
• 样式方案的选择与落地。CSS 变量、命名空间前缀、主题定制、样式覆盖顺序，这些在业务项目里往往被忽略，在组件库里是硬需求。
• Portal、ref 转发、context 传递、事件合成这些 React 机制，平时用得少，写组件库时会被反复用到。
• 组件库的工程化。目录结构怎么分、类型声明怎么出、单元测试怎么写、文档站怎么生成。

配套练习怎么用

课程给的章节笔记，建议不要当成"看一遍就过"的材料。更有效的用法是：每做完一个组件，先合上笔记，自己默写一遍它的 props 类型和核心渲染逻辑；写不出来的地方，就是没真懂的地方。

另外建议挑两三个组件做"改需求"练习。比如给 Button 增加 loading 状态下的禁用逻辑，给 Modal 增加嵌套打开的层级处理，给 Form 增加一个自定义校验规则。能改得动，说明你理解的是结构而不是抄了一遍代码。

最后，把整套组件库整理成一个可运行、可构建、有文档的仓库，比零散地写几个 demo 有价值得多。面试时能打开给别人看，比口头描述强。

看完应该能回答的问题

• 一个组件库的目录该怎么划分，哪些放通用逻辑，哪些放具体组件？
• Button 的 variant 和 size 用联合类型还是枚举？各自的取舍是什么？
• 受控组件和非受控组件如何在一个 API 里共存？
• Modal 为什么要用 Portal？不用会有什么问题？
• 组件库打包后如何支持按需引入？类型声明文件是怎么产出的？
• 如果让你从零设计一套主题变量，你会从哪几个维度切分？

如果这些问题你现在答不完整，说明这门课正好卡在你的能力缺口上。不必假装什么都会，缺什么补什么，做完一遍再回头看这些问题，答案自然会清楚。

React+TypeScript高仿AntDesign开发企业级UI组件库

课程推荐

《React+TypeScript高仿AntDesign开发企业级UI组件库》React+TypeScript高仿AntDesign开发企业级UI组件库【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。

视频目录（121 节）

*   1-1 导学（不看错过1个亿）.mp4

*   1-2 代码库使用注意事项（必看）.mp4

*   2-1 什么是 Typescript.mp4

*   2-2 为什么要使用 Typescript.mp4

*   2-3 安装和初试 Typescript.mp4

*   2-4 基础类型.mp4

*   2-5 any 类型和联合类型.mp4

*   2-6 Array 和  Tuple.mp4

*   2-7 interface 初探.mp4

*   2-8 函数和类型推断.mp4

*   2-9 类（Class）第一部分.mp4

*   2-10 类（Class）第二部分.mp4

*   2-11 类和接口.mp4

*   2-12 枚举（Enum）.mp4

*   2-13 泛型（Generics） 第一部分.mp4

*   2-14 泛型（Generics） 第二部分 - 约束泛型.mp4

*   2-15 泛型（Generics） 第三部分 - 类和接口.mp4

*   2-16 类型别名和类型断言.mp4

*   2-17 声明文件.mp4

*   3-1 React简介和基础知识回顾.mp4

*   3-2 配置 react 开发环境.mp4

*   3-3 第一个组件 - ts为组件助力.mp4

*   3-4 什么是 和 为什么要使用 React Hook.mp4

*   3-5 在函数组件使用 state - useState Hook.mp4

*   3-6 useEffect 第一部分 - 初出茅庐.mp4

*   3-7 useEffect 第二部分 - 有始有终.mp4

*   3-8 useEffect 第三部分 - 控制运行.mp4

*   3-9 自定义 Hook - 重构 MouseTracker.mp4

*   3-10 自定义 Hook 第二部分 - HOC的劣势.mp4

*   3-11 自定义 hook 第三部分 - 正确的方式完成 URLLoader.mp4

*   3-12 useRef - state遇到的难题.mp4

*   3-13 useRef - 多次渲染之间的纽带.mp4

*   3-14 useContext - 解决多层传递属性的灵丹妙药.mp4

*   3-15 hook 规则和其他 hook.mp4

*   4-1 组件库开始起航 - 需求分析.mp4

*   4-2  文件结构和代码规范.mp4

*   4-3 样式解决方案分析.mp4

*   4-4 做一次设计师 - 添加自己的色彩体系.mp4

*   4-5 更多样式变量 - 添加字体变量解决方案.mp4

*   4-6 初次亮相 - 添加 normalize.css.mp4

*   4-7 Button 组件需求分析.mp4

*   4-8 小试牛刀 - Button 组件编码 第一部分.mp4

*   4-9 添加 Button 基本样式.mp4

*   4-10 升级 Button 组件样式.mp4

*   4-11 精益求精 - Buton 组件编码第二部分.mp4

*   5-1 为什么要有测试.mp4

*   5-2 通用测试框架 Jest 出场.mp4

*   5-3 React 测试工具 - react-testing-library.mp4

*   5-4 添加Button 测试代码 第一部分.mp4

*   5-5 添加Button 测试代码 第二部分.mp4

*   6-1 Menu 组件需求分析.mp4

*   6-2 基础架构 - Menu组件编码第一部分.mp4

*   6-3 需求升级 - Menu 组件编码第二部分.mp4

*   6-4 添加 Menu 样式.mp4

*   6-5 测试驱动 - Menu 测试添加.mp4

*   6-6 日趋完美 - Menu 组件编码第三部分.mp4

*   6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分.mp4

*   6-8 添加交互 - SubMenu下拉菜单编码第二部分.mp4

*   6-9 大功告成 - SubMenu 下拉菜单编码第三部分.mp4

*   6-10 完美组件 - SubMenu 组件添加测试.mp4

*   7-1 图标解决方案简介.mp4

*   7-2 他山之石 - Icon组件编码第一部分.mp4

*   7-3 Icon 组件样式添加.mp4

*   7-4 让图标动起来 - 动画效果第一种实现方法.mp4

*   7-5 React Transition Group 简介.mp4

*   7-6 React Transition Group 实践 - 动画效果第二种实现方式.mp4

*   7-7 尽善尽美 - React Transition Group 添加菜单消失的动画.mp4

*   7-8 拿来主义 - 自定义 Transition 组件编码第一部分.mp4

*   7-9 拿来主义 - 自定义 Transition 组件编码第二部分.mp4

*   8-1 什么是 Storybook.mp4

*   8-2 安装 Stroybook.mp4

*   8-3 Storybook 支持 Typescript.mp4

*   8-4 展示秀- 为 Button 添加 Story.mp4

*   8-5 如虎添翼 - Stroybook addon插件系统介绍.mp4

*   8-6 更多信息 - 添加 Storybook addon-info 插件.mp4

*   8-7 自动生成文档 - 添加 react-docgen-typescript 第一部分.mp4

*   8-8 自动生成文档 - 添加 react-docgen-typescript 第二部分.mp4

*   8-9 大功告成 - Storybook 最终样式调整.mp4

*   9-1 知己知彼 -Input 组件需求分析.mp4

*   9-2 抛砖引玉 - Input 组件伪代码实现.mp4

*   9-3 持续优化 - Input组件代码实现和优化过程.mp4

*   9-4 新的挑战 - AutoComplete组件分析.mp4

*   9-5 基本骨架 - AutoComplete 编码第一部分.mp4

*   9-6 AutoComplete 支持自定义模版.mp4

*   9-7 异步来了 - AutoComplete 支持异步请求编码.mp4

*   9-8 老瓶新酒 - 使用自定义Hook实现 函数防抖.mp4

*   9-9 AutoComplete 支持键盘事件.mp4

*   9-10 妙用 useRef - 实现 clickOutSide 功能-.mp4

*   9-11 完美收尾 - AutoComplete 添加单元测试.mp4

*   10-1 最终任务 - Upload组件需求分析.mp4

*   10-2 下一代 HTTP 库 -  axios.mp4

*   10-3 在线 mock server 和 axios 简单使用.mp4

*   10-4 上传文件的基本方式.mp4

*   10-5 完成基本流程 - Upload 组件编码第一部分.mp4

*   10-6 完善生命周期 - Upload 组件编码第二部分.mp4

*   10-7 创建列表数据 - UploadList 组件编码第一部分.mp4

*   10-8 显示上传数据 - UploadList 组件编码第二部分.mp4

*   10-9 显示上传进度 - 添加 Progress 组件.mp4

*   10-10 精益求精 - 再次分析 Upload 组件更近一步需求.mp4

*   10-11 Upload 增强交互第一部分.mp4

*   10-12 拖动上传 - 支持 Drag and Drop.mp4

*   10-13 异步怎样测试？ - Upload 测试第一部分.mp4

*   10-14 拖动事件怎样测试？ - Upload 测试第二部分.mp4

*   11-1 Javascript模块化发展历史.mp4

*   11-2 webpack 到底完成什么任务？ - bundler的神奇功效.mp4

*   11-3 怎样选择 Javascript 模块格式？.mp4

*   11-4 创建组件库模块入口文件.mp4

*   11-5 驯服tsc - tsconfig 编写第一部分.mp4

*   11-6 驯服 tsc - tsconfig 编写第二部分.mp4

*   11-7 生成最终使用的样式文件.mp4

*   11-8 使用 npm link 本地测试组件库 第一部分.mp4

*   11-9 使用 npm link 本地测试组件库 第二部分.mp4

*   12-1 Npm 简介.mp4

*   12-2 发布组件库到 npm.mp4

*   12-3 瘦身任务 - 精简 package.json 依赖.mp4

*   12-4 万无一失 - 添加发布和 commit 前检查.mp4

*   12-5 使用 Storybook 生成静态文档页面.mp4

*   12-6 CI CD 简介.mp4

*   12-7 使用 travis 自动运行测试.mp4

*   12-8 使用 travis 自动发布文档页面.mp4

*   13-1 课程总结.mp4