1react+dumi+typescript搭建组件库开发环境

以下是一个使用React, dumi和TypeScript搭建组件库的基本步骤和示例代码：

1. 初始化项目：

npx create-react-app my-component-library --template typescript
cd my-component-library

2. 添加dumi支持：

npm install --save-dev dumi

3. 修改package.json，添加dumi脚本：

{
  "scripts": {
    "start": "dumi dev",
    "build": "dumi build",
    "preview": "dumi preview"
  }
}

4. 创建组件文件，例如Button.tsx：

import React from 'react';
 
export type ButtonProps = {
  label: string;
  onClick: () => void;
};
 
const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);
 
export default Button;

5. 创建dumi配置文件.umirc.ts：

export default {
  mfsu: {},
  theme: {
    // 自定义主题配置
  },
  // 其他dumi配置
};

6. 创建组件的API文档，在docs/button.mdx：

import { Button } from '../src/Button';
 
# Button
 
A simple button component.
 
## Usage
 
```jsx
import React from 'react';
import { Button } from 'my-component-library';
 
export default () => <Button label="Click Me" onClick={() => alert('Clicked!')} />;

 
7. 启动dumi开发服务器：
```bash
npm start

8. 构建组件库：

npm run build

9. 预览构建结果：

npm run preview

以上步骤和代码示例展示了如何使用React和TypeScript搭建一个简单的组件库，并使用dumi进行文档编写和组件展示。开发者可以根据自己的需求进一步扩展和定制。