联系

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

从零到一高仿 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、配置文件

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

资源目录

\计算机教程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

课程资料

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注