使用dumi2开React组件库

1、新建项目 f-react-ui

cd f-react-ui
npx create-dumi

2、选择对应的模板，初始化项目

3、项目初始化完成后，npm start

4、新增button组件
src目录下新建Button文件夹。
Button文件夹中新建组件相关文件
index.tsx

import React, { FC } from 'react';

const Button: FC<{ text: string }> = (props) => {
  return <button type="button">{props.text}</button>;
};

export default Button;

index.md

# Button

button component.

```jsx
import { Button } from 'f-react-ui';

export default () => <Button text="按钮" />;

5、src/index.tsx中导出新增的button组件

export { default as Button } from './Button';
export { default as Foo } from './Foo';

6、自定义导航栏及分组

---
title: Button
order: 1
nav:
  title: 组件
  order: 1
  path: /components
group:
  title: components
  order: 1
  path: /components
---

7、在组件示例中引入组件
Button文件夹中新建demos文件夹
demos/index.tsx

import React from 'react';
import { Button } from 'f-react-ui';

function ButtonDemo() {
  return <Button text="提交"/>;
}

export default ButtonDemo;

Button/index.md中使用

<code src="./demos/index.tsx"></code>