妙手筑组件，React开源库——React组件库轻松搭

2024-02-06 03:24:35

React 组件库的快速构建

组件库是前端开发人员和设计师的宝贵工具，它可以帮助他们快速构建一致且可重用的 UI 组件。构建组件库可以是一个耗时的过程，但可以通过使用适当的工具和技术来简化。

目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件库和 React 技术栈的 yep-react 组件库。然而这些组件库大都从零开始搭建，包括 Webpack 的繁杂配置，Markdown 文件转 Vue 文件功能的开发，单元测试功能的开发、按需加载的开发等等，在此基础上进行二次开发成本极高。

因此，构建一个新的组件库需要另辟蹊径，做到高效而强大。我们尝试使用现有的构建工具和框架，比如 Create React App 和 Storybook，来简化组件库的构建过程。

构建工具和框架

Create React App

Create React App 是一个官方的 React CLI 工具，它可以帮助你快速创建一个新的 React 项目。它已经预先配置好了 Webpack 和 Babel 等工具，并提供了许多有用的脚手架命令。

Storybook

Storybook 是一个用于构建和测试 UI 组件的工具。它可以帮助你快速创建组件的演示页面，并允许你交互式地探索和测试组件。

使用 Create React App 和 Storybook 构建组件库

创建一个新的 React 项目

使用 Create React App 创建一个新的 React 项目：

npx create-react-app my-component-library

安装 Storybook

使用以下命令安装 Storybook：

npm install --save-dev @storybook/react @storybook/addon-actions @storybook/addon-links

配置 Storybook

在项目根目录下创建一个名为 .storybook 的目录，并在其中创建一个名为 main.js 的文件。在这个文件中，你可以配置 Storybook：

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

创建组件

在 src 目录下创建一个名为 components 的目录，并在其中创建一个名为 Button.js 的文件。在这个文件中，你可以创建你的第一个组件：

import React from 'react';

const Button = (props) => {
  return (
    <button onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

创建组件的故事

在 src 目录下创建一个名为 stories 的目录，并在其中创建一个名为 Button.stories.js 的文件。在这个文件中，你可以创建你的组件的故事：

import React from 'react';
import Button from '../components/Button';

export default {
  title: 'Button',
  component: Button,
};

const Template = (args) => <Button onClick={args.onClick}>{args.children}</Button>;

export const Primary = Template.bind({});
Primary.args = {
  children: 'Primary',
  onClick: () => {
    alert('Button clicked!');
  },
};

export const Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary',
  onClick: () => {
    alert('Button clicked!');
  },
};