# 快速上手
跟随以下的步骤，快速上手组件库的使用。

## 安装

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

```bash
# npm
npm i @gingkoo/pandora

# yarn 
yarn add @gingkoo/pandora
```


## 基础使用
以 Button 组件为例。

```tsx
import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@gingkoo/pandora";

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

## 按需加载
`@gingkoo/pandora` 的组件默认支持 `tree shaking`, 使用 `import { Button } from '@gingkoo/pandora'`; 方式引入即可按需加载。


### 使用 babel-plugin-import

- 安装
```bash
npm i babel-plugin-import -D
```

- 添加配置
**组件和样式的按需加载**

在 babel 配置中加入：
```js
plugins: [
  [
    'babel-plugin-import',
    {
      libraryName: '@gingkoo/pandora',
      libraryDirectory: 'lib/es/components',
      camel2DashComponentName: false,
      style: true, // 样式按需加载
    },
  ],
];
```

`vite` 在 `vite.config.js` 配置中加入：

```js
import usePluginImport from 'vite-plugin-importer';

plugins: [
  usePluginImport({
    libraryName: '@gingkoo/pandora',
    libraryDirectory: 'lib/es/components',
    style: true, // 样式按需加载
  })
]
```