Typescript + React 高仿 Antd 从零到一打造自己的组件库 完整无加密
《Typescript + React 高仿 Antd 从零到一打造自己的组件库 完整无加密》全网唯一的 Typescript 和 React 全流程开发UI组件库的课程【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化
如果你已经在业务里写过几个 React 页面，能熟练调 Antd 的Table、Form、Modal，但合上文档就说不清一个组件的 props 到底该怎么设计、样式怎么隔离、类型怎么收敛——那这套课正好卡在你的下一层。它的目标不是教你“用”组件库，而是教你“造”一个：用 TypeScript 把 Antd 里那批最常用的组件从零实现一遍。含金量集中在这里，而不是在 React 语法本身。
先判断：这门课适不适合你现在看
课纲的取舍很明确——它假设你已经会写 JSX、用过 hooks、能看懂基本的 TS 泛型与联合类型。所以它几乎不铺垫 React 基础，开局就把 React + TS 的工程配置、类型约定、目录分层摆出来，然后直接进入组件实现。对完全没写过 TS 的人来说会偏快；对写过 Vue 想转 React 的人，反而是一次看“同一件事在 React 里怎么组织”的机会，因为组件库本身就是最好的工程化教材。真正判断标准只有一个：你有没有动力把每个组件自己敲一遍。只跟着看视频不动手，收获会掉一大半。
课纲里最值得反复精看的几块
- 组件类型定义那一层。这是全课最容易被跳过、也最值钱的部分。props 怎么做继承与扩展、原生属性怎么透传、事件回调的参数类型怎么定，决定了你以后写业务组件的类型是“能用”还是“舒服”。
- 样式方案与样式隔离。组件库必然要面对命名冲突和主题变量，这块看完你会重新理解为什么 Antd 要那样组织 CSS。
- 从简单组件到复合组件的过渡。像图标、按钮这类先热身，真正的分水岭是带状态、带受控/非受控切换、带键盘交互的那几类组件——它们集中体现了 React 组件设计的权衡思路。
- 打包与按需引入。很多人卡在“我写的组件库怎么发布、怎么被别人 import”，这一块是把练习变成作品的最后一步。
资料包怎么拆开用，而不是一路看完
配套的章节笔记不要当成“视频的文字版”从头读到尾，那是浪费。更有效的用法是：先看视频里组件的最终形态和类型签名，自己试着写一版，写完再回头对笔记，重点看它和你写法的差异在哪里、为什么。笔记里的类型定义和接口设计可以单独抽出来，作为你自己项目的模板库。视频本身建议挑着看——组件实现过程如果已经想清楚，直接拉进度条跳到讲解“为什么这么设计”的段落，那几句才是课纲真正的信息密度所在。
学完之后你手里应该有什么
一门课的价值最终要落在一个能拿出手的东西上。理想状态是：你拥有一套自己实现、能跑起来、能按需引入的组件库，README 里写清楚覆盖了哪些组件、类型是怎么设计的、和 Antd 的取舍差别在哪。哪怕只做出来六七个核心组件，只要每一处设计决策你都能解释，它在面试和作品集里的说服力，都远高于“调过 Antd 很多组件”。这门课给的是流程和参照，成品能不能立住，取决于你在每个组件上停了多少次手。
全网唯一的 Typescript 和 React 全流程开发UI组件库的课程
课程推荐
《Typescript + React 高仿 Antd 从零到一打造自己的组件库 完整无加密》全网唯一的 Typescript 和 React 全流程开发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
![[衡天云]爆款云服务器 低至12元/月](/hty.png)
