为了更快构建项目，创建一个自己的 React 组件库吧！

前端

2024-01-25 07:57:28

当然可以，以下是关于“创建 React 组件库流程 ”的文章。

作为一个开发者能够创建组件库是很棒的事情，如果你不知道如何开始，让我指导下。事先声明，我不是一个组件库开发专家，以下只是我先前搭建组件库的一些经验。

前置条件

在你开始之前，需要知道：

React
JavaScript（ES6+）
Package 管理工具，如 npm 或 yarn
Git

开始构建

1. 创建项目

首先，创建一个新的项目文件夹，使用 npm 或 yarn 初始化一个新的 React 项目。

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

2. 安装必要的依赖项

你需要安装一些必要的依赖项，包括：

@babel/preset-react
@babel/preset-typescript
babel-jest
eslint
eslint-config-airbnb
husky
lint-staged
prettier
react-scripts-ts
ts-jest
typescript

npm install --save-dev @babel/preset-react @babel/preset-typescript babel-jest eslint eslint-config-airbnb husky lint-staged prettier react-scripts-ts ts-jest typescript

3. 配置项目

你需要对项目进行一些配置，包括：

.babelrc 文件
.eslintrc 文件
.gitignore 文件
.husky 文件
.lintstagedrc 文件
.prettierrc 文件
package.json 文件

4. 创建组件

现在，你可以开始创建组件了。创建一个新的文件夹，比如 components，然后在其中创建你的第一个组件。

import React from 'react';

export const Button = ({ children, onClick }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

5. 导出组件

你需要将组件导出，以便可以在其他地方使用。

export { Button };

6. 编写测试用例

为了确保你的组件按预期工作，你需要编写一些测试用例。

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Button } from '../components/Button';

describe('Button', () => {
  it('should render the button', () => {
    const { getByText } = render(<Button>Click me</Button>);

    expect(getByText('Click me')).toBeInTheDocument();
  });

  it('should call the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    const { getByText } = render(<Button onClick={onClick}>Click me</Button>);

    fireEvent.click(getByText('Click me'));

    expect(onClick).toHaveBeenCalled();
  });
});