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
└─课程资料

资源下载

抱歉,只有登录并在本文发表评论才能阅读隐藏内容,切记不要恶意刷,否则会被限制,先阅读用户规则,一旦进入黑名单,不可能再放出来。同时注意,暂停在线支付,请联系客服QQ2441105221。
  1. starCoder说道:

    非常好 学习下

  2. yeah说道:

    感谢分享

  3. luooo说道:

    o快速学习

  4. ysnnn说道:

    感谢分享

  5. 黑白灰说道:

    感谢分享

  6. 热舞说道:

    学习一下 ,多谢

  7. 这次不abandon了说道:

    充呀

  8. 大西瓜之舞说道:

    感谢分享

  9. aaaaaaaa说道:

    啊啊啊啊啊啊啊啊啊啊

  10. yunshangmanbu说道:

    感谢分享

  11. 途径三年说道:

    感谢分享

  12. Lyle说道:

    学习一下

  13. ermaiqaq说道:

    学习一下

发表回复