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

这门课的名字已经很直白了：用 React 加 TypeScript，自己动手做一套类似 Ant Design 的组件库。它不是那种"三小时看完就能上手做项目"的课，如果你指望快速刷完然后写进简历，大概率会失望。但如果你愿意慢下来，把每个组件的类型定义、状态管理、样式方案都亲手过一遍，它会帮你在前端工程化这件事上真正跨过一道坎。

先想清楚：这不是入门课

开始之前，请诚实评估自己的位置。如果你还没写过 React 的 JSX，没理解 props 和 state 的区别，或者对 TypeScript 的类型标注完全陌生，那么直接进来会很吃力。课程默认你已经能独立写一个带状态的小页面，也见过泛型和接口的写法。缺这两块，建议先补基础，回头再来。

如果你已经会用 React 做业务页面，但每次写组件都靠复制粘贴、类型随手写 any、样式散落各处，那这门课正对路。它的价值不在于教你新语法，而在于把"一个组件从接口设计到发布"的完整链条走一遍。

学习的顺序，别被目录牵着走

不要贪快。组件库的特点是前面的基础组件（按钮、输入框）看着简单，但它们定下的类型约定和样式规范，后面所有复杂组件都要复用。前面几讲如果只是"看懂了"，到后面做表单、弹窗、表格的时候一定会卡住。

建议的节奏是：每学完一个组件，先合上资料，自己从零写一遍。写不出来再回去看，而不是一边看一边抄。抄出来的代码不会留在脑子里。一个组件花两三天很正常，别焦虑。

遇到样式方案、主题定制这类讲原理的章节，可以放慢，甚至反复看几遍。这些是组件库真正区别于普通业务代码的地方。

可以适当跳过的部分

• 如果你已经熟练使用某套构建工具，配置环节可以快速略过，只确认关键配置项即可。
• 纯演示性质的组件（比如某些装饰性组件）如果暂时用不上，先跳过，理解思路就行，不必逐个复现。
• 测试相关章节如果你的目标只是理解组件设计，可以先看结论，等真正要发布时再回来细读。

资料和练习怎么配合

配套笔记适合用来复盘，不适合当教材第一次读。正确用法是：跟着讲次动手写，写完再翻笔记对答案，看自己漏了哪个类型、哪条样式规则。

不要只做课程里的 Demo。每学完几个组件，试着把它们组合成一个小页面，比如一个带校验的登录表单、一个可筛选的数据列表。组合的过程会暴露你单独写组件时发现不了的问题——类型不兼容、样式冲突、props 传递层级太深，这些才是真实项目里的难点。

最后，给自己一个"复现"的任务：不看资料，从头搭一套属于自己的组件。能做到多少算多少，做不出来的地方就是你需要回头补的地方。

关于学不会的部分

这套课里有相当一部分内容，第一次看不会太正常。类型体操式的泛型设计、复杂的样式继承逻辑、跨组件的状态共享，都可能让你卡住。卡住的时候，先跳过，往下走，等把后面的组件做完再回头看，往往会突然明白。

它更像一本需要慢慢啃的参考书，而不是一次看完的视频。给自己留够时间，允许自己学得慢。

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