React Storybook 的介绍和安装

React Storybook 是一个 UI 组件开发环境，该环境允许我们在隔离的开发环境中开发和测试 React 组件，而无需在我们的应用程序中运行我们的整个应用程序。 Storybook 有助于保持您的组件库文档化、可重用、可维护和可调试。

安装

安装 Storybook 非常简单。请使用以下命令安装 Storybook：

npm i -g @storybook/cli

或者，您可以使用以下用于安装 Storybook 的命令：

yarn global add @storybook/cli

现在，在您的项目文件夹中运行以下命令，以设置和运行一个 Storybook 项目：

npx -p @storybook/cli sb init
npm run storybook

您还可以在 React 应用程序中集成 Storybook，这样您就可以为应用程序构建可重复使用的组件并运行单元测试。

Storybook 的特点

以下是 Storybook 的特点：

• 组件开发：Storybook 是针对组件开发的环境。这使开发人员可以专注于单个组件的构建和测试，而不是构建更大的应用程序。
• 隔离：Storybook 的隔离环境使开发人员可以在不干扰现有代码的情况下开发和测试组件。
• 可重用性：Storybook 确保您的组件库是可重用的，并提供文档化的API。
• 可视化测试：Storybook 允许您在 UI 上快速测试组件和交互式行为。
• 可维护性：Storybook 确保您的组件库是可维护的，并允许您根据需要进行更改和开发新特性。
• 快速迭代：Storybook 确保您可以快速迭代并快速更新组件。

如何使用 Storybook

Storybook 的工作原理是，您在项目中定义 Component.story.js 文件并告诉 Storybook 如何渲染它。以下是创建 Storybook 示例脚本的步骤：

1. 创建文件：在源代码的根目录中，创建名为 .storybook 的文件夹。在其中创建一个名为 config.js 的文件。

2. 配置参数：在 config.js 文件夹中配置以下可选参数：

import { configure } from '@storybook/react';

// webpack 的 .story 文件匹配模式
const req = require.context('../stories', true, /\.story\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

3. 创建组件脚本：在项目源代码的根目录中，创建名为 stories 的文件夹。在其中创建一个名为 Button.story.js 的文件。

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './button';

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);

4. 运行组件脚本：运行以下命令以启动 Storybook：

npm run storybook

5. 测试组件：通过 Storybook UI 测试组件并查看组件的不同交互方式。

结论

React Storybook 是一个非常有用的工具，它可以帮助您构建可重用、文档化、可维护和可调试的组件库。它允许开发人员专注于单个组件的构建和测试，而不是整个应用程序。安装和使用 Storybook 非常简单，并且可以在您的 React 应用程序中轻松集成。