青训营笔记
组件库的使用与定义组件
课程介绍
本次课程主要介绍了如何更好的使用组件库，了解组件库的一些常用能力底层如何设计实现，以及在进行业务组件库搭建时，需要注意哪些技术点，最后结合组件开发实例演示如何设计一个通用组件，并进行快速托管。
课程重点
-
组件库介绍
-
组件库的使用
- 组件库快速上手
- 暗黑模式
- 主题定制
- 国际化（语言国际化，视图国际化）
- 全局配置组件默认行为
- 常见业务问题
-
自定义组件
- 业务组件库基础搭建
- 业务组件开发 good vs bad
- 示例实践
- 快速托管
组件库介绍-组件
组件
- 部件
- 原件
- 构建
- 组成
- 分支
工业组件
具有标准接口和某种功能且可服用的标准零部件
软件组件
封装好的可复用的程序“零部件”
组件库介绍-组件库
社区组件库
组件库特点
- 一致性
- 效率
- 协同
组件库的使用
- 快速上手
- 主题定制
- 暗黑模式
- 国际化
- 业务常见问题
快速上手-引入组件库
引入组件库
需同时安装react>=16.8和react-dom>=16.8
》 npm i @arrco-design/web-react
基础使用
import React from "react";
import ReactDOM from "react-dom";
import {Button} from "@arco-design/web-react/dist/css/arco.css";
ReactDOM.render{
Hello Arco,
document.querySelector("#root")
}
主题定制
快速上手-Arco Pro
技术栈
- React
- TypeScript
- BizCharts
- Arco Design
- 多架构
-
- Next.js
-
- Create React APP
-
- Vite
暗黑模式
在不同模式下改变的只有颜色。尺寸、边距都没有发生改变
