2022【新升级】TS+ React18高仿AntD从零到一打造组件库（完结）

2023年11月6日 144条评论 3,734次阅读

资源简介

文章目录

从零到一高仿 AntD 使用 Typescript 和 React 开发组件库，在这其中穿插了一系列的知识点：大型项目的样式组织，react 组件测试，react 动画实现。开发完毕还实现了模块化打包，代码发布再到 CI/CD 的全流程。

大家好，本课录制于一年半前，版本是React16，受到了很多同学的好评，也有很多同学提出了意见建议，我也一直在搜集并消化这些内容。随着时间的发展，React18 在2022年3月正式推出以及 Storybook 6 的更新，为了让我们的组件库更上一层楼，跟上时代, 并且进一步提升竞争力，在 2022年6月做出一次大更新，时长在7.6 个小时，可以说是新增了 50% 的内容。算是非常充实了，内容如下： React18 的新知识 1、createRoot 2、自动批处理 3、Concurrent 4、TransitionAPI 5、Suspense 新增 Form 组件 1、复杂组件的组织以及需求分析 2、lodash 3、forwardRef 以及 useImperativeHandle 暴露实例属性以及方法 4、useReducer 实现单独的 store 5、async-validator 实现验证 6、renderProps 的展示方式新增 Rollup 打包工具使用 1、基本用法以及 plugins 的使用 2、打包生成 ESM 以及 UMD 格式的代码 3、十多个第三方插件的使用 Storybook 完全重录 1、args 以及 argTypes 2、parameter 3、Decorators 4、MDX Typescript 知识点补全 1、定义文件 2、内置类型 3、配置文件

资源目录

————\计算机教程BTDLG\01MOOC\MKSZ428-【新升级】TS+ React18高仿AntD从零到一打造组件库（完结）
├─第10章 终极任务 - Upload 组件
│   ├─10-1 最终任务 - Upload组件需求分析.mp4            34.43MB
│   ├─10-10 精益求精 - 再次分析 Upload 组件更近一步需求.mp4            45.65MB
│   ├─10-11 Upload 增强交互第一部分.mp4            46.81MB
│   ├─10-12 拖动上传 - 支持 Drag and Drop.mp4            53.38MB
│   ├─10-13 异步怎样测试 - Upload 测试第一部分.mp4            66.24MB
│   ├─10-14 拖动事件怎样测试 - Upload 测试第二部分.mp4            57.66MB
│   ├─10-2 下一代 HTTP 库 - axios.mp4            39.92MB
│   ├─10-3 在线 mock server 和 axios 简单使用.mp4            53.37MB
│   ├─10-4 上传文件的基本方式.mp4            50.91MB
│   ├─10-5 完成基本流程 - Upload 组件编码第一部分.mp4            70.04MB
│   ├─10-6 完善生命周期 - Upload 组件编码第二部分.mp4            42.13MB
│   ├─10-7 创建列表数据 - UploadList 组件编码第一部分.mp4            71.55MB
│   ├─10-8 显示上传数据 - UploadList 组件编码第二部分.mp4            65.36MB
│   └─10-9 显示上传进度 - 添加 Progress 组件.mp4            71.3MB
├─第11章终极大考-Form表单组件
│   ├─[11.10]--11-10验证第二部分：展示错误信息.mp4            70.98MB
│   ├─[11.11]--11-11验证第三部分：添加自定义规则.mp4            80.8MB
│   ├─[11.12]--11-12验证第四部分：表单整体验证.mp4            137.14MB
│   ├─[11.13]--11-13验证第五部分：表单整体验证第二部分.mp4            78.7MB
│   ├─[11.14]--11-14使用renderProps自定义展示.mp4            72.45MB
│   ├─[11.15]--11-15添加组件实例方法第一部分.mp4            57.03MB
│   ├─[11.16]--11-16添加组件实例方法第二部分.mp4            121.74MB
│   ├─[11.17]--11-17Form表单总结.mp4            34.82MB
│   ├─[11.1]--11-1分析Form组件的需求.mp4            41.88MB
│   ├─[11.2]--11-2创建基本的表单静态展示.mp4            117.13MB
│   ├─[11.3]--11-3分析数据交互的思路.mp4            89.54MB
│   ├─[11.4]--11-4初始化useStore.mp4            132.39MB
│   ├─[11.5]--11-5注册对应的Item到store.mp4            106.9MB
│   ├─[11.6]--11-6使用黑科技自动更新store中的数据.mp4            173.19MB
│   ├─[11.7]--11-7更新值第二部分：自定义对应字段.mp4            109.35MB
│   ├─[11.8]--11-8更新值第三部分：完善默认值以及修改对应的类型.mp4            153.51MB
│   └─[11.9]--11-9添加验证第一部分：单个Item验证.mp4            130.24MB
├─第12章Javascript模块打包-需要什么类型的模块供各种环
│   ├─[12.1]--12-1Javascript模块化发展历史.mp4            13.6MB
│   ├─[12.2]--12-2webpack到底完成什么任务？-bundler的神奇功.mp4            16.42MB
│   ├─[12.3]--12-3怎样选择Javascript模块格式？.mp4            22.89MB
│   ├─[12.4]--12-4创建组件库模块入口文件.mp4            33.62MB
│   ├─[12.5]--12-5驯服tsc-tsconfig编写第一部分.mp4            18.52MB
│   ├─[12.6]--12-6驯服tsc-tsconfig编写第二部分.mp4            32.81MB
│   ├─[12.7]--12-7生成最终使用的样式文件.mp4            18.92MB
│   ├─[12.8]--12-8使用npmlink本地测试组件库第一部分.mp4            17.47MB
│   └─[12.9]--12-9使用npmlink本地测试组件库第二部分.mp4            17.72MB
├─第13章大功告成-发布到Npm，以及添加CICD支持
│   ├─[13.1]--13-1Npm简介.mp4            11.95MB
│   ├─[13.3]--13-3瘦身任务-精简package.json依赖.mp4            44.46MB
│   ├─[13.4]--13-4万无一失-添加发布和commit前检查.mp4            71.09MB
│   ├─[13.5]--13-5使用Storybook生成静态文档页面.mp4            23.4MB
│   ├─[13.6]--13-6CICD简介.mp4            8.9MB
│   ├─[13.7]--13-7使用travis自动运行测试.mp4            29.14MB
│   └─[13.8]--13-8使用travis自动发布文档页面.mp4            20.94MB
├─第14章使用Rollup打包多种模块格式
│   ├─[14.1]--14-1Rollup简介.mp4            46.44MB
│   ├─[14.2]--14-2Rollup插件的简单使用.mp4            86.96MB
│   ├─[14.3]--14-3Rollup打包ES格式第一部分.mp4            70.12MB
│   ├─[14.4]--14-4Rollup打包ES格式第二部分.mp4            103.64MB
│   ├─[14.5]--14-5Rollup打包UMD格式第一部分.mp4            92.52MB
│   ├─[14.6]--14-6Rollup打包UMD格式第二部分.mp4            50.85MB
│   └─[14.7]--14-7整合最终的打包配置文件.mp4            31.25MB
├─第15章课程总结
│   └─[15.1]--15-1课程总结.mp4            21.62MB
├─第1章 课程导学（此章节必看）
│   ├─1-1 导学（不看错过1个亿）.mp4            87.52MB
│   ├─1-2 代码库使用注意事项（必看）.mp4            24.08MB
│   └─[1.3]--1-32022年更新说明.mp4            22.29MB
├─第2章 欢迎来到类型的世界 - Typescript
│   ├─2-1 什么是 Typescript.mp4            35.1MB
│   ├─2-10 类（Class）第二部分.mp4            35.44MB
│   ├─2-11 类和接口.mp4            39.34MB
│   ├─2-12 枚举（Enum）.mp4            41.81MB
│   ├─2-13 泛型（Generics） 第一部分.mp4            39.85MB
│   ├─2-14 泛型（Generics） 第二部分 - 约束泛型.mp4            34.1MB
│   ├─2-15 泛型（Generics） 第三部分 - 类和接口.mp4            67.06MB
│   ├─2-16 类型别名和类型断言.mp4            51.33MB
│   ├─2-17 声明文件.mp4            32.74MB
│   ├─2-2 为什么要使用 Typescript.mp4            24.57MB
│   ├─2-3 安装和初试 Typescript.mp4            39.03MB
│   ├─2-4 基础类型.mp4            30.77MB
│   ├─2-5 any 类型和联合类型.mp4            24.21MB
│   ├─2-6 Array 和 Tuple.mp4            33.29MB
│   ├─2-7 interface 初探.mp4            41.31MB
│   ├─2-8 函数和类型推断.mp4            44.89MB
│   └─2-9 类（Class）第一部分.mp4            76.98MB
├─第3章 神奇的 React 配合 typescript，完美输出
│   ├─3-1 React简介和基础知识回顾.mp4            86.84MB
│   ├─3-10 自定义 Hook 第二部分 - HOC的劣势.mp4            25.45MB
│   ├─3-11 自定义 hook 第三部分 - 正确的方式完成 URLLoader.mp4            34.41MB
│   ├─3-13 useRef - 多次渲染之间的纽带.mp4            38.63MB
│   ├─3-14 useContext - 解决多层传递属性的灵丹妙药.mp4            58.84MB
│   ├─3-15 hook 规则和其他 hook.mp4            35.32MB
│   ├─3-2 配置 react 开发环境.mp4            22.23MB
│   ├─3-3 第一个组件 - ts为组件助力.mp4            17.19MB
│   ├─3-4 什么是 和 为什么要使用 React Hook.mp4            9.52MB
│   ├─3-5 在函数组件使用 state - useState Hook.mp4            21.9MB
│   ├─3-6 useEffect 第一部分 - 初出茅庐.mp4            9.96MB
│   ├─3-7 useEffect 第二部分 - 有始有终.mp4            24.2MB
│   ├─3-8 useEffect 第三部分 - 控制运行.mp4            17.94MB
│   └─3-9 自定义 Hook - 重构 MouseTracker.mp4            18.59MB
├─第4章 组件库起航 - 你真的能写的好看起来简单的 Button 组件吗？
│   ├─4-1 组件库开始起航 - 需求分析.mp4            30.73MB
│   ├─4-10 升级 Button 组件样式.mp4            66.61MB
│   ├─4-11 精益求精 - Buton 组件编码第二部分.mp4            43.05MB
│   ├─4-12 完成 Alert 组件.pdf            54.99KB
│   ├─4-2 文件结构和代码规范.mp4            49.6MB
│   ├─4-3 样式解决方案分析.mp4            48.41MB
│   ├─4-4 做一次设计师 - 添加自己的色彩体系.mp4            44.31MB
│   ├─4-5 更多样式变量 - 添加字体变量解决方案.mp4            64.89MB
│   ├─4-6 初次亮相 - 添加 normalize.css.mp4            45.98MB
│   ├─4-7 Button 组件需求分析.mp4            31.21MB
│   ├─4-8 小试牛刀 - Button 组件编码 第一部分.mp4            76.4MB
│   └─4-9 添加 Button 基本样式.mp4            51.74MB
├─第5章 组件测试
│   ├─5-1 为什么要有测试.mp4            35.42MB
│   ├─5-2 通用测试框架 Jest 出场.mp4            49.94MB
│   ├─5-3 React 测试工具 - react-testing-library.mp4            47.48MB
│   ├─5-4 添加Button 测试代码 第一部分.mp4            56.77MB
│   └─5-6 Alert 组件添加测试用例.pdf            31.29KB
├─第6章 更上一层楼 - 完成 Menu 组件
│   ├─6-1 Menu 组件需求分析.mp4            41.03MB
│   ├─6-10 完美组件 - SubMenu 组件添加测试.mp4            72.3MB
│   ├─6-11 Tabs 组件.pdf            91.33KB
│   ├─6-2 基础架构 - Menu组件编码第一部分.mp4            54.66MB
│   ├─6-3 需求升级 - Menu 组件编码第二部分.mp4            59.06MB
│   ├─6-4 添加 Menu 样式.mp4            55.49MB
│   ├─6-5 测试驱动 - Menu 测试添加.mp4            93.03MB
│   ├─6-6 日趋完美 - Menu 组件编码第三部分.mp4            49.84MB
│   ├─6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分.mp4            57.24MB
│   ├─6-8 添加交互 - SubMenu下拉菜单编码第二部分.mp4            48.29MB
│   └─6-9 大功告成 - SubMenu 下拉菜单编码第三部分.mp4            51.93MB
├─第7章 他山之石 - Icon 组件 和 Transition 组件
│   ├─7-1 图标解决方案简介.mp4            70.12MB
│   ├─7-10 完成的 Icon 和 Transition 组件.pdf            30.63KB
│   ├─7-2 他山之石 - Icon组件编码第一部分.mp4            54.95MB
│   ├─7-3 Icon 组件样式添加.mp4            17.12MB
│   ├─7-4 让图标动起来 - 动画效果第一种实现方法.mp4            29.86MB
│   ├─7-5 React Transition Group 简介.mp4            41.65MB
│   ├─7-7.mp4            33.19MB
│   ├─7-8 拿来主义 - 自定义 Transition 组件编码第一部分.mp4            57.98MB
│   └─7-9 拿来主义 - 自定义 Transition 组件编码第二部分.mp4            36.42MB
├─第8章 Storybook - 本地调试组件和生成文档页面的利器
│   ├─8-1 什么是 Storybook.mp4            44.1MB
│   ├─8-10 完成的 storybook 的架构给剩下的组件添加 stories.pdf            29.09KB
│   ├─8-2 安装 Stroybook.mp4            28.85MB
│   ├─8-3 Storybook 支持 Typescript.mp4            37.91MB
│   ├─8-4 展示秀- 为 Button 添加 Story.mp4            45.73MB
│   ├─8-5 如虎添翼 - Stroybook addon插件系统介绍.mp4            38.29MB
│   ├─8-6 更多信息 - 添加 Storybook addon-info.mp4            45.33MB
│   ├─8-7 自动生成文档 - 添加 react-docgen-typescript 第一部分.mp4            43.31MB
│   ├─8-8 自动生成文档 - 添加 react-docgen-typescript 第二部分.mp4            27.52MB
│   └─8-9 大功告成 - Storybook 最终样式调整.mp4            30.43MB
├─第9章 进入表单的世界 - Input 组件和 AutoComplete 组件
│   ├─9-1 知己知彼 -Input 组件需求分析.mp4            10.9MB
│   ├─9-10 妙用 useRef - 实现 clickOutSide 功能.mp4            51.76MB
│   ├─9-11 完美收尾 - AutoComplete 添加单元测试.mp4            69.53MB
│   ├─9-12 Select 组件.pdf            83.06KB
│   ├─9-2 抛砖引玉 - Input 组件伪代码实现.mp4            28.75MB
│   ├─9-3 持续优化 - Input组件代码实现和优化过程.mp4            61.44MB
│   ├─9-4 新的挑战 - AutoComplete组件分析.mp4            24MB
│   ├─9-5 基本骨架 - AutoComplete 编码第一部分.mp4            52.37MB
│   ├─9-6 AutoComplete 支持自定义模版.mp4            54.26MB
│   ├─9-7 异步来了 - AutoComplete 支持异步请求编码.mp4            51.67MB
│   ├─9-8 老瓶新酒 - 使用自定义Hook实现 函数防抖.mp4            52.28MB
│   └─9-9 AutoComplete 支持键盘事件.mp4            47.72MB
└─课程资料