首页 实战 （新升级）React18+TS高仿AntD从零到一打造组件库
收藏

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

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

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

￥448.00
难度 高级 时长 25小时 学习人数 1886 综合评分 9.99
立即购买 加购物车

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

立即购买
全新好课组合，学好前端，拿好绩效
套餐价格：¥583.00
2门课 总价：¥647.00
立即购买
课程介绍 
高级  · 1886人报名 ¥448.00
课程介绍 
初级  · 129人报名 ¥199.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实操训练，让你学完就会用

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

《 单个组件的开发全流程 》
使用React-testing-library
完成单元测试 贯穿开发全程

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

课程大纲
第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组件的单元测试。
查看完整目录
专属服务

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
课程全套代码下载
提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料上传更新，通过课程
教案、原理图解、技术文档、演示案例等
各种教材，保障你的学习效果。
实用电子文档
部分简单内容以图文形式呈现，与视频
相配合，既保障学习效果，又提高了学
习效率。
适合人群
1-3年开发经验的前端开发者
技术储备
HTML/CSS/JS(ES6)基础知识
环境参数
React 17
脚手架 create-react-app 3.2.0
TypeScript 3.7.2
Nodejs 10.0.0
Storybook 5.2.8
Husky 4.2.13.7.2

相关推荐
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题