React18+TS+Vite 从0自定义组件库实战复杂项目

来百度APP畅享高清图片

步骤一：项目初始化

1. 创建项目：使用 Vite 初始化一个新项目，选择 TypeScript 模板：
2. bashnpm init @vitejs/app my-custom-components --template react-tscd
3. my-custom-components
4. 安装依赖：安装开发所需的依赖项：
5. bashnpm install --save react react-dom

步骤二：组件开发

1. 创建组件：在 src/components 目录下创建你的自定义组件，例如 Button.tsx：
2. tsximport React from 'react';interface ButtonProps { label: string; onClick: () => void;}const Button: React.FC<ButtonProps> = ({ label, onClick }) =>
3. { return ( <button onClick={onClick}> {label} </button> );};export default Button;
4. 编写样式：如果需要，可以在组件目录下编写相应的样式文件。

步骤三：文档编写

1. 安装文档工具：安装文档编写和展示所需的工具，例如 storybook：
2. bashnpx sb init
3. 编写文档：在 .storybook 目录下编写你的组件文档，例如 Button.stories.tsx：
4. tsximport React from 'react';import { Story, Meta } from '
5. @storybook/react';import Button from '../src/components/Button
6. ';export default { title: 'Example/Button', component: Button,} as Meta;const Template: Story = (args) => <Button {...args} />
7. ;export const Primary = Template.bind({});Primary.args =
8. { label: 'Primary Button', onClick: () => alert
9. ('Button clicked!'),};

步骤四：测试与调试

1. 测试组件：编写测试用例并确保组件的功能和表现符合预期。
2. 调试：使用开发者工具和调试器对组件进行调试，确保没有潜在的问题。

步骤五：发布

1. 构建组件库：使用 Vite 构建你的组件库：
2. bashnpm run build
3. 发布到 npm：将组件库发布到 npm 上：
4. bashnpm loginnpm publish --access public

结语

通过以上步骤，你可以完成一个基本的 React 组件库的开发流程。记得持续维护你的组件库，响应用户的反馈，并不断改进和完善组件的功能和文档。祝你的组件库开发顺利！