首页 实战 高阶前端进阶必修，自主打造同比AntD的React组件库
收藏

高阶前端进阶必修，自主打造同比AntD的React组件库

React18 开发仿 AntD 组件库，学习业内一流的组件库设计思路与落地实践

高阶前端进阶必修，自主打造同比AntD的React组件库

￥368.00
已完结 难度 高级 时长 18小时 学习人数 161 综合评分 7.50
立即购买 加购物车
立即购买 加购物车

前端项目到了一定规模，基本都会沉淀自身组件库——组件库服务于整个团队，是所有项目的基座。如果能开发符合团队需求的组件库，那么你已经是团队的核心主力了。本课程由大厂前端专家授课，从一个高级前端开发的角度做一套类似 AntD 的组件库，在这个过程中讲透优秀组件库的搭建思路及实现方式，让你迅速具备搭建前端基础设施的重要能力。

一只狍狍
讲师

前端专家

课程预览

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

掌握高端、通用组件库的全流程开发，从团队边缘进军核心骨干

手把手带你实现20个实用组件，真落地

一流组件库的设计理念
思维高度决定了产出的上限
阿里P8专家剖析 AntD 的设计思路
带你从第一步构建组件库的优秀之本
React 组件化开发实操
从原子组件、复合组件到业务组件
利用 React、TypeScript、Storybook
实现组件化开发优质实践
可复用、可扩展的业务组件库
跟着老师一步步自主打造20个实用
组件，后续可作为个人储备资源重
复使用及扩展

大厂前端专家授课，对标一流组件库标准，讲透其设计精髓所在

·  UI组件完善
·  高可用性
·  高可扩展性
·  高性能
一流组件库的定义标准
全局的设计思维
全局审视组件库的需求与功能
以架构的角度来统筹设计组件库
高效的流程规范
从技术选型到组件开发
工程化实践贯穿全流程
高质量极简代码
不断追求以更少的代码、
更简单的逻辑实现组件逻辑
有效的细节指导
大厂核心技术岗积累的细节经验
规避成熟团队已帮你踩过的坑

参照 Antd 开发核心组件（并优化部分组件），让优秀的你更进一步

主要涉及技术栈及方法工具
React hooks
TypeScript
Nodejs
Storybook
Script
单元测试
本课程组件
AntD 原版
5
大
优
化
组
件
Overlay
Tooltips
TextArea
Form
Progress
300 行代码，实现了弹窗类组件的最底层能力 (功能包含组件
定位、tooltips 12中对齐方式、自动位置订正）
76行代码实现，得益于 Overlay 底层强大能力
两种方法对比实现跟随内容伸缩功能，更易于理解
以极简的思路揭示一种表单的数据获取、校验方案
一个偏向css3解决方案，巧妙利用dom结构以极少的JS代码
实现
弹窗组件的依赖关系非常深： rc-trigger -> rc-align -> dom-align，
还有其他的util类库，代码量非常大。依赖深也导致定位问题非常困难
Tooltips -> rc-tooltips-> rc-trigger （依赖组件 rc-trigger 代码超
1500 行） Overlay 底层强大能力
逻辑复杂，难理解
方案完善，但代码量多，结构深，阅读难度大
较多JS计算
12
个
原
生
组
件

button

Icon

Tag

Radio &
RadioGroup

Checkbox &
Checkboxgroup

Input

Avatar & Switch

Affix

Menu

Popup

Dropdown

Message

原子组件，通过开发button组件了解一个最简单的组件开发方式，了解组件和设计的一致性问题
原子组件，了解 @antd/icons 组件运行原理，了解 svg 组件开发方式
原子组件
原子组件，了解原生input在浏览器的兼容性问题，为何我们要自己绘制react组件；初步了解组件受控方式
原子组件
原子组件，原生input的兼容性问题，了解表单类组件受控的最基础组件。讲解 ref 使用方式
讲解如何做到根据文字内容多少做自动缩放
讲解如何跟随页面变化同时做自身位置变化
useContext 的使用
支持9种常用位置布局的弹窗组件，相当于为了常用的弹窗组件做了一个快捷能力
看看如何通过 Popup 可以快而非常少代码的实现 Dropdown 功能
用 CSS 的方式做一个固定位置的弹窗组件

课程中使用脚手架工具，一键命令，快速生成标准组件模板代码

0-1 搭建脚手架，你也可以实现小改进、大收获

Node.js 工程开发四件套
path global
fs-extra chalk
脚手架相关知识点
如何实现一个工程模板
掌握模板制作过程
最基础组件如何被初始化出来
第1章 课程简介
主要是介绍课程的整体规划，包括：课程特点，效果展示，课程讲解思路，技术储备。
第2章 0-1 搭建开发环境
整体感觉，从 0-1 一步一步的介绍如何利用开源框架把一个环境搭建起来。
第3章 热身：完整的写一个 Button 组件
热身项目，简单一个 Button 组件，感受一下整个过程。
第4章 工欲善其事必先利其器：组件库的工程化
工程化的方式增加一个组件模板，演示一个 Icon 的开发过程，其中包括：工程四件套：path global fs-extra chalk ；Hbs 模板的介绍。https://www.npmjs.com/package/handlebars；模板制作、脚本编写。
第5章 组件设计（Radio、checkbox、Input、TextArea等）
系统的介绍组件开发，包括：Radio、RadioGroup、checkbox、Input、TextArea、Avatar、Switch、affix。
查看完整目录

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

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

答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
独家“动态”教辅材料
丰富的专属教辅资料上传更新，通过课
程教案、原理图解、技术文档、演示案
例等各种教材，保障你的学习效果。
课程全套代码下载
提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
实用图文资料
部分简单内容以图文形式呈现，与视频相
配合，既保障学习效果，又提高了学习效
率。
适合人群
已经有了 react 、TS 基础小伙伴们~~
技术储备
react
typescript
环境参数
react 18

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

学习咨询

选课、学习遇到问题？

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

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