引入组件库

需要同时安装 react >= 16.8 和 react-dom >= 16.8。

// npm
npm i @arco-design/web-react

// yarn
yarn add @arco-design/web-react

除了可以通过 npm 安装之外，也可以直接使用 CDN 资源，不建议通过 CDN 使用，因为 CDN 会引入全量的组件代码，这样会影响页面加载速度

补充：CDN是什么

CDN(content delivery networks，内容分发网络），其目的是通过在源服务器和用户之间增加一层新的网络架构，将网站的内容分发到最接近用户的网络“边缘”，使用户可以就近取得所需的内容

Arco design快速上手:arco.design/react/docs/… 可以打开这个网页，进行一步一步实操

简单的使用教程

以 Button 组件为例

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";

ReactDOM.render(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);

@arco-design/web-react 的组件默认支持 tree shaking
补充：tree shaking

tree-shaking：通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。
编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）
传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注于消除没有用到的代码

出现了以上样式的按钮 通过以上案例我们已经可以简单的获取我们想要的组件了

使用 Arco 官方插件按需加载

import { Button } from "@arco-design/web-react";

使用以上语句我们按照自己的需求加载的自己需要的按钮组件，但是我们引入的体积依然很大，我们可以进行需要样式按需加载以及图标按需加载，使用按需加载可以加快页面加载速度 @arco-plugins/webpack-react 是协助处理 arco 使用问题的 webpack 插件 通过 npm/yarn 安装这个工具：

# npm
$ npm install -D @arco-plugins/webpack-react

# yarn
$ yarn add @arco-plugins/webpack-react

具体使用教程网站分享github.com/arco-design…

暗黑模式arco.design/react/docs/…

组件库内置暗色的主题，你可以轻易的切换到暗色，也可以简单的通过调整色板来自动生成基于色板的新暗色主题 自定义组件

在自定义组件的 js 文件中，需要使用 Component ()  来注册组件，并提供组件的属性定义、内部数据和自定义方法。