慕课网机构-【新升级】TS+ React18高仿AntD从零到一打造组件库

前端开发

课程简介

这门课解决什么问题这门课程重点在于帮助开发者掌握 TypeScript 和 React 18 的结合应用，特别是在构建组件库方面的实战技能。通过学习，开发者可以解决在大型项目中维护复杂类型和状态管理的问题，同时提升组件的复用性和可维护性。课程内容深入浅出，适合有一定前端基础但希望进一步提升技能的开发者。适合什么基础课程适合具有基本的 JavaScri…

已有 1 人浏览发布 2026-09-30 更新 2026-09-30

这门课解决什么问题

这门课程重点在于帮助开发者掌握 TypeScript 和 React 18 的结合应用，特别是在构建组件库方面的实战技能。通过学习，开发者可以解决在大型项目中维护复杂类型和状态管理的问题，同时提升组件的复用性和可维护性。课程内容深入浅出，适合有一定前端基础但希望进一步提升技能的开发者。

适合什么基础

课程适合具有基本的 JavaScript 和 HTML/CSS 知识，以及一些 React 基础的开发者。虽然课程尽量降低门槛，但建议已经具备前端开发基础，能够理解组件和状态管理等基本概念。

建议先看哪几块

建议先观看第2章的内容，特别是第2-9节到第2-16节，这些内容深入讲解了 TypeScript 的核心概念和特性，为后续学习打好基础。同时，第3章的第3-2节到第3-4节介绍了 React Hook 的使用，有助于理解状态管理的进阶技术。

学完能独立做什么

学完这门课后，开发者可以独立完成一个基于 TypeScript 和 React 的组件库项目，能够灵活运用 TypeScript 的各种特性进行类型定义和状态管理，更好地维护大型前端项目。还能自定义组件，实现复杂的验证逻辑和状态更新等功能。

资料怎么配合练习

课程资料包中包含详细的视频讲解，每节视频后配以实践练习，建议边学习边动手实践。第11章是终极大考，通过构建一个复杂的 Form 表单组件，加深对类型和状态管理的理解。结合课程提供的代码示例和练习题，开发者可以将学到的知识应用到实际项目中，逐步提升自己的前端开发能力。

课程目录

第2章欢迎来到类型的世界 - Typescript12 集

2-3 安装和初试 Typescript.mp4 [39.0 MB]
2-2 为什么要使用 Typescript.mp4 [24.6 MB]
2-5 any 类型和联合类型.mp4 [24.2 MB]
2-16 类型别名和类型断言.mp4 [51.3 MB]
2-9 绫伙紙Class锛夌涓€閮ㄥ垎.mp4 [77.0 MB]
2-17 声明文件.mp4 [32.7 MB]
2-4 基础类型.mp4 [30.8 MB]
2-14 泛型（Generics）第二部分 - 约束泛型.mp4 [34.1 MB]
2-8 函数和类型推断.mp4 [44.9 MB]
2-15 泛型（Generics）第三部分 - 类和接口.mp4 [67.1 MB]
2-11 绫诲拰鎺ュ彛.mp4 [39.3 MB]
2-13 泛型（Generics）第一部分.mp4 [39.9 MB]

第11章终极大考-Form表单组件15 集

[11.14]--11-14使用renderProps自定义展示.mp4 [72.5 MB]
[11.13]--11-13验证第五部分：表单整体验证第二部分【资源精选‖更多关注：CunworkNotes】.mp4 [78.7 MB]
[11.5]--11-5注册对应的Item到store.mp4 [106.9 MB]
[11.15]--11-15添加组件实例方法第一部分.mp4 [57.0 MB]
[11.7]--11-7更新值第二部分：自定义对应字段.mp4 [109.4 MB]
[11.16]--11-16添加组件实例方法第二部分.mp4 [121.7 MB]
[11.11]--11-11验证第三部分：添加自定义规则.mp4 [80.8 MB]
[11.17]--11-17Form琛ㄥ崟鎬荤粨.mp4 [34.8 MB]
[11.12]--11-12验证第四部分：表单整体验证.mp4 [137.1 MB]
[11.3]--11-3分析数据交互的思路.mp4 [89.5 MB]
[11.10]--11-10验证第二部分：展示错误信息.mp4 [71.0 MB]
[11.1]--11-1分析Form组件的需求.mp4 [41.9 MB]
[11.8]--11-8更新值第三部分：完善默认值以及修改对应的类型.mp4 [153.5 MB]
[11.2]--11-2创建基本的表单静态展示.mp4 [117.1 MB]
[11.9]--11-9添加验证第一部分：单个Item验证.mp4 [130.2 MB]

第3章神奇的 React 配合 typescript，完美输出12 集

3-4 什么是和为什么要使用 React Hook【不易整理‖请关注：CunWorkNoteS】.mp4 [9.5 MB]
3-10 自定义 Hook 第二部分 - HOC的劣势【公重号：CunWorkNotes】.mp4 [25.5 MB]
3-14 useContext - 解决多层传递属性的灵丹妙药.mp4 [58.8 MB]
3-2 配置 react 开发环境.mp4 [22.2 MB]
3-5 在函数组件使用 state - useState Hook.mp4 [21.9 MB]
3-1 React简介和基础知识回顾.mp4 [86.8 MB]
3-11 自定义 hook 第三部分 - 正确的方式完成 URLLoader.mp4 [34.4 MB]
3-13 useRef - 多次渲染之间的纽带.mp4 [38.6 MB]
3-6 useEffect 第一部分 - 初出茅庐.mp4 [10.0 MB]
3-3 第一个组件 - ts为组件助力.mp4 [17.2 MB]
3-7 useEffect 第二部分 - 有始有终.mp4 [24.2 MB]
3-8 useEffect 第三部分 - 控制运行.mp4 [17.9 MB]

第10章终极任务 - Upload 组件14 集

10-12 拖动上传 - 支持 Drag and Drop.mp4 [53.4 MB]
10-10 精益求精 - 再次分析 Upload 组件更近一步需求【资源精选‖更多关注：CunworkNotes】.mp4 [45.6 MB]
10-6 完善生命周期 - Upload 组件编码第二部分【更多精选‖公众号：CunWorknotes】 .mp4 [42.1 MB]
10-7 创建列表数据 - UploadList 组件编码第一部分【优质资源‖关注：cunWorkNotes 解锁】.mp4 [71.5 MB]
10-14 拖动事件怎样测试 - Upload 测试第二部分.mp4 [57.7 MB]
10-1 最终任务 - Upload组件需求分析.mp4 [34.4 MB]
10-13 异步怎样测试 - Upload 测试第一部分.mp4 [66.2 MB]
10-8 显示上传数据 - UploadList 组件编码第二部分.mp4 [65.4 MB]
10-3 在线 mock server 和 axios 简单使用.mp4 [53.4 MB]
10-11 Upload 增强交互第一部分.mp4 [46.8 MB]
10-2 下一代 HTTP 库 - axios.mp4 [39.9 MB]
10-9 显示上传进度 - 添加 Progress 组件.mp4 [71.3 MB]
10-4 上传文件的基本方式.mp4 [50.9 MB]
10-5 完成基本流程 - Upload 组件编码第一部分.mp4 [70.0 MB]

第13章大功告成-发布到Npm，以及添加CICD支持5 集

[13.8]--13-8使用travis自动发布文档页面【公重号：CunWorkNotes】.mp4 [20.9 MB]
[13.3]--13-3瘦身任务-精简package.json依赖.mp4 [44.5 MB]
[13.5]--13-5使用Storybook生成静态文档页面.mp4 [23.4 MB]
[13.7]--13-7使用travis自动运行测试.mp4 [29.1 MB]
[13.4]--13-4万无一失-添加发布和commit前检查.mp4 [71.1 MB]

第7章他山之石 - Icon 组件和 Transition 组件7 集

7-8 拿来主义 - 自定义 Transition 组件编码第一部分【整理不易‖记得关注：CunWorKNotes】.mp4 [58.0 MB]
7-10 完成的 Icon 和 Transition 组件【整理不易‖记得关注：CunWorKNotes】.pdf [30.6 KB]
7-4 让图标动起来 - 动画效果第一种实现方法.mp4 [29.9 MB]
7-9 拿来主义 - 自定义 Transition 组件编码第二部分.mp4 [36.4 MB]
7-2 他山之石 - Icon组件编码第一部分.mp4 [55.0 MB]
7-3 Icon 组件样式添加.mp4 [17.1 MB]
7-1 图标解决方案简介.mp4 [70.1 MB]

第4章组件库起航 - 你真的能写的好看起来简单的 Button 组件吗？12 集

4-2 文件结构和代码规范.mp4 [49.6 MB]
4-10 升级 Button 组件样式.mp4 [66.6 MB]
4-3 样式解决方案分析【不易整理‖请关注：CunWorkNoteS】.mp4 [48.4 MB]
4-5 更多样式变量 - 添加字体变量解决方案.mp4 [64.9 MB]
4-7 Button 组件需求分析.mp4 [31.2 MB]
4-8 小试牛刀 - Button 组件编码第一部分.mp4 [76.4 MB]
4-6 初次亮相 - 添加 normalize.css.mp4 [46.0 MB]
4-9 添加 Button 基本样式.mp4 [51.7 MB]
4-4 做一次设计师 - 添加自己的色彩体系.mp4 [44.3 MB]
4-11 精益求精 - Buton 组件编码第二部分.mp4 [43.1 MB]
4-1 组件库开始起航 - 需求分析.mp4 [30.7 MB]
4-12 完成 Alert 组件.pdf [55.0 KB]

第6章更上一层楼 - 完成 Menu 组件11 集

6-10 完美组件 - SubMenu 组件添加测试.mp4 [72.3 MB]
6-2 基础架构 - Menu组件编码第一部分.mp4 [54.7 MB]
6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分.mp4 [57.2 MB]
6-1 Menu 组件需求分析.mp4 [41.0 MB]
6-11 Tabs 组件.pdf [91.3 KB]
6-9 大功告成 - SubMenu 下拉菜单编码第三部分.mp4 [51.9 MB]
6-4 娣诲姞 Menu 鏍峰紡.mp4 [55.5 MB]
6-5 测试驱动 - Menu 测试添加.mp4 [93.0 MB]
6-8 添加交互 - SubMenu下拉菜单编码第二部分.mp4 [48.3 MB]
6-6 日趋完美 - Menu 组件编码第三部分.mp4 [49.8 MB]
6-3 需求升级 - Menu 组件编码第二部分.mp4 [59.1 MB]

第9章进入表单的世界 - Input 组件和 AutoComplete 组件12 集

9-8 老瓶新酒 - 使用自定义Hook实现函数防抖.mp4 [52.3 MB]
9-4 新的挑战 - AutoComplete组件分析【整理不易‖记得关注：CunWorKNotes】.mp4 [24.0 MB]
9-3 持续优化 - Input组件代码实现和优化过程【更多精选‖公众号：CunWorknotes】 .mp4 [61.4 MB]
9-2 抛砖引玉 - Input 组件伪代码实现.mp4 [28.7 MB]
9-9 AutoComplete 支持键盘事件.mp4 [47.7 MB]
9-11 完美收尾 - AutoComplete 添加单元测试.mp4 [69.5 MB]
9-6 AutoComplete 支持自定义模版.mp4 [54.3 MB]
9-7 异步来了 - AutoComplete 支持异步请求编码.mp4 [51.7 MB]
9-1 知己知彼 -Input 组件需求分析.mp4 [10.9 MB]
9-5 基本骨架 - AutoComplete 编码第一部分.mp4 [52.4 MB]
9-10 妙用 useRef - 实现 clickOutSide 功能.mp4 [51.8 MB]
9-12 Select 组件.pdf [83.1 KB]

第12章Javascript模块打包-需要什么类型的模块供各种环9 集

[12.6]--12-6驯服tsc-tsconfig编写第二部分.mp4 [32.8 MB]
[12.9]--12-9使用npmlink本地测试组件库第二部分【公重号：CunWorkNotes】.mp4 [17.7 MB]
[12.8]--12-8使用npmlink本地测试组件库第一部分【公重号：CunWorkNotes】.mp4 [17.5 MB]
[12.2]--12-2webpack到底完成什么任务？-bundler的神奇功.mp4 [16.4 MB]
[12.3]--12-3怎样选择Javascript模块格式？.mp4 [22.9 MB]
[12.4]--12-4创建组件库模块入口文件.mp4 [33.6 MB]
[12.1]--12-1Javascript模块化发展历史.mp4 [13.6 MB]
[12.7]--12-7生成最终使用的样式文件.mp4 [18.9 MB]
[12.5]--12-5驯服tsc-tsconfig编写第一部分.mp4 [18.5 MB]

第5章组件测试4 集

5-1 为什么要有测试.mp4 [35.4 MB]
5-4 添加Button 测试代码第一部分.mp4 [56.8 MB]
5-2 通用测试框架 Jest 出场.mp4 [49.9 MB]
5-6 Alert 组件添加测试用例.pdf [31.3 KB]

第14章使用Rollup打包多种模块格式6 集

[14.6]--14-6Rollup打包UMD格式第二部分.mp4 [50.8 MB]
[14.5]--14-5Rollup打包UMD格式第一部分.mp4 [92.5 MB]
[14.2]--14-2Rollup插件的简单使用.mp4 [87.0 MB]
[14.4]--14-4Rollup打包ES格式第二部分.mp4 [103.6 MB]
[14.3]--14-3Rollup打包ES格式第一部分.mp4 [70.1 MB]
[14.7]--14-7整合最终的打包配置文件.mp4 [31.2 MB]

第8章 Storybook - 本地调试组件和生成文档页面的利器9 集

8-1 什么是 Storybook【整理不易‖记得关注：CunWorKNotes】.mp4 [44.1 MB]
8-7 自动生成文档 - 添加 react-docgen-typescript 第一部分.mp4 [43.3 MB]
8-8 自动生成文档 - 添加 react-docgen-typescript 第二部分.mp4 [27.5 MB]
8-9 大功告成 - Storybook 最终样式调整.mp4 [30.4 MB]
8-2 安装 Stroybook.mp4 [28.9 MB]
8-5 如虎添翼 - Stroybook addon插件系统介绍.mp4 [38.3 MB]
8-4 展示秀- 为 Button 添加 Story.mp4 [45.7 MB]
8-10 完成的 storybook 的架构给剩下的组件添加 stories.pdf [29.1 KB]
8-6 更多信息 - 添加 Storybook addon-info.mp4 [45.3 MB]

第15章课程总结1 集

[15.1]--15-1课程总结.mp4 [21.6 MB]

课程资料2 条

新版资料.exe [938.4 KB]
课程资料.exe [829.2 KB]

第1章课程导学（此章节必看）2 集

1-1 导学（不看错过1个亿）.mp4 [87.5 MB]
1-2 代码库使用注意事项（必看）.mp4 [24.1 MB]