IT视频教程资源网

标题: React组件化开发_React18实战 - [打印本页]

作者: admin 时间: 2024-5-10 09:02
标题: React组件化开发_React18实战 -
高阶前端进阶必修，自主打造同比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。
查看完整目录
答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
独家“动态”教辅材料
丰富的专属教辅资料上传更新，通过课
程教案、原理图解、技术文档、演示案
例等各种教材，保障你的学习效果。
课程全套代码下载
提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
实用图文资料
部分简单内容以图文形式呈现，与视频相
配合，既保障学习效果，又提高了学习效
率。

欢迎光临 IT视频教程资源网 (https://163web.top/)