首页实战 React18+TS高仿AntD从零到一打造组件库

TS+ React18高仿AntD从零到一打造组件库

用当下主流前端技术“造一次轮子”，解决初中级到高级前端的跃迁难题

￥448.00

已完结难度高级时长 25小时学习人数 2113 综合评分 9.99

立即购买加购物车

套餐1
套餐2
套餐3

全新好课组合，学好前端，拿好绩效

套餐价格：¥583.00

2门课总价：¥647.00

立即购买

React进阶必修

套餐价格：¥946.00

2门课总价：¥1,047.00

立即购买

从组件开发到原理剖析

套餐价格：¥940.00

2门课总价：¥1,047.00

立即购买

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

张轩

讲师

高级前端工程师

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定

重新观看

React18 +TS 开发UI组件，全流程、全体系复刻大厂标准

新框架特性深研+全流程组件开发，在“造轮子”的过程中，收获扎实的实战技能

完整模拟大厂组件库开发流程：分析→开发→测试→打包→发布，打造优质组件库

由易到难实现典型10大组件，包括大魔王 Upload和Form组件

使用storybook无缝衔接，生成直接可交互的文档页面

升级到 React 18，学习前沿的特性

遵循大厂流程，手把手带你完成组件开发，知其然更要知其所以然

Typescript 与 React Hooks
的概念及实践

大厂项目全流程 -需求分析
设计开发测试提交发布 CI/CD

了解组件框架底层逻辑和设计思路

用 React-testing-library 完成组
件单元测试

使用 Storybook 本地调试
并快速生成文档页面给用户使用

JS 模块种类、bundler 使用及样式
文件组织

10大典型组件原理与知识点全掌握，积累日常工作中可复用的前端工作经验

课程所造组件库文档已发布，体验一下：https://vikingship.xyz

npm 下载：https://www.npmjs.com/package/vikingship

Button 组件

classNames
React 内置类型
Typescript 字符串字面量
Scss 样式组织以及
Normalize.css

Menu 组件

多组件的组织以及结合
React.Children
React.cloneElement
useContext

Input 以及 AutoComplete 组件

函数防抖 debounce
React.KeyboradEvent
useRef
jest 异步请求测试

Upload 组件

axios
异步上传文件的方式
Drag and Drop 支持拖动上传
jest 模拟第三方库
jest 支持拖动

Icon 以及 Transition 组件

fontawesome
React Transition Group

Form 组件

复杂组件的组织以及需求分析
lodash
forwardRef 以及 useImperativeHandle
暴露实例属性以及方法
useReducer 实现单独的 store
async-validator 实现验证
renderProps 的展示方式

丰富全面的技术点，融入企业级组件开发项目，助你进阶中高级前端开发

了解全新 React18 框架特性，紧随技术发展大潮

手把手带你完成组件开发全流程，配套1:1实操训练，让你学完就会用

每一章组件开发完毕，都会布置一个类似的组件练习

《单个组件的开发全流程》

大厂技术专家经验之作，学员有收获，课程才有好口碑

课程大纲

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

介绍了整个课程的背景知识，项目简介，学习流程，可以掌握的知识点，以及学习方法和前置知识。

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

本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，带领大家学习 TS 中的各种基础类型，然后进阶到复杂类型，包括：Array, Tuple, interface, function, Class, Enum, Generices等，迅速帮助大家理解 TS 的基础使用方式和语法。

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

本章回顾了 React 的基础知识，从而引出了全新的 React Hooks，配合上一章typescript的基础知识，详细讲解了 useState, useEffect, 自定义Hook，useContext 和 useRef 等基础知识，为组件库的开发打下坚实基础。

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

本章正式进入组件库的编写，前半部分规定了文件结构和代码规范，分析了样式解决方案，添加了一系列样式的基础元素，后半部分渐进式的完成了 Button 组件的编码工作。

第5章组件测试

本章从什么是测试入手，简介了测试的基本概念，介绍通用测试工具 Jest 和 React 测试框架 react-testing-library，然后使用这两种工具完成Button组件的单元测试。

查看完整目录

专属服务