首页 实战 高级前端进阶必修,自主打造高扩展的业务组件库
收藏

高级前端进阶必修:自主打造高扩展的业务组件库

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

高级前端进阶必修,自主打造高扩展的业务组件库

难度 中级 时长 18小时 学习人数 66 综合评分 10.00

高级前端进阶必修,自主打造高扩展的业务组件库

前端项目到了一定规模,基本都会沉淀自身组件库——组件库服务于整个团队,是所有项目的基座。如果能开发符合团队需求的组件库,那么你已经是团队的核心主力了。本课程由大厂前端专家授课,从一个高级前端开发的角度做一套类似 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 帮助你!

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