React组件化开发_React18实战 -
**** Hidden Message ***** 高阶前端进阶必修,自主打造同比AntD的React组件库React18 开发仿 AntD 组件库,学习业内一流的组件库设计思路与落地实践
前端项目到了一定规模,基本都会沉淀自身组件库 组件库服务于整个团队,是所有项目的基座。如果能开发符合团队需求的组件库,那么你已经是团队的核心主力了。本课程由大厂前端专家授课,从一个高级前端开发的角度做一套类似 AntD 的组件库,在这个过程中讲透优秀组件库的搭建思路及实现方式,让你迅速具备搭建前端基础设施的重要能力。
掌握高端、通用组件库的全流程开发,从团队边缘进军核心骨干
手把手带你实现20个实用组件,真落地
300 行代码,实现了弹窗类组件的最底层能力 (功能包含组件
定位、tooltips 12中对齐方式、自动位置订正)
弹窗组件的依赖关系非常深: rc-trigger -> rc-align -> dom-align,
还有其他的util类库,代码量非常大。依赖深也导致定位问题非常困难
Tooltips -> rc-tooltips-> rc-trigger (依赖组件 rc-trigger 代码超
1500 行) Overlay 底层强大能力
原子组件,通过开发button组件了解一个最简单的组件开发方式,了解组件和设计的一致性问题
原子组件,了解 @antd/icons 组件运行原理,了解 svg 组件开发方式
原子组件
原子组件,了解原生input在浏览器的兼容性问题,为何我们要自己绘制react组件;初步了解组件受控方式
原子组件
原子组件,原生input的兼容性问题,了解表单类组件受控的最基础组件。讲解 ref 使用方式
讲解如何做到根据文字内容多少做自动缩放
讲解如何跟随页面变化同时做自身位置变化
useContext 的使用
支持9种常用位置布局的弹窗组件,相当于为了常用的弹窗组件做了一个快捷能力
看看如何通过 Popup 可以快而非常少代码的实现 Dropdown 功能
用 CSS 的方式做一个固定位置的弹窗组件
课程中使用脚手架工具,一键命令,快速生成标准组件模板代码
0-1 搭建脚手架,你也可以实现小改进、大收获
第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。
查看完整目录
答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课
程教案、原理图解、技术文档、演示案
例等各种教材,保障你的学习效果。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
实用图文资料
部分简单内容以图文形式呈现,与视频相
配合,既保障学习效果,又提高了学习效
率。
**** Hidden Message *****
页:
[1]