学习在 React 项目中使用 StorybookJS

Storybook是一个 UI 开发环境，由于它在应用程序外部运行，因此允许开发人员独立地与组件进行交互。它就像一个 UI 组件的游乐场。

为了更好地理解这一点，假设你的项目中有几个组件，需要与它们进行交互。“正常”的工作流程是在浏览器中本地运行应用，然后与组件进行交互或测试。

然而，对于一个包含众多组件的大型应用来说，每次都执行这样的操作可能会令人望而生畏。这时 Storybook 就派上用场了。它允许你测试组件并进行交互，而无需在本地运行实际的应用。

Storybook 最棒的地方在于它本身就是一个 JavaScript 工具，因此几乎可以与任何 JavaScript 框架一起使用。本文将重点介绍如何在ReactJS项目中使用 Storybook。

步骤1：安装所需的软件包

在深入学习 Storybook 之前，您需要确保您的项目中拥有所需的软件包。

引导创建 React 应用程序

（如果已经设置了 React 项目，请跳过此步骤）

如果你还没有 React 项目，那么你需要做的第一件事就是启动一个 CRA 项目。
使用以下命令：
npx create-react-app storybook-project

注意：storybook-project将是我们的目录的名称，但您可以用任何您喜欢的名称替换您的目录。

安装 StorybookJS

cd 进入你的项目目录，在本例中storybook-project运行命令：
npx sb init
这将在你的 React 项目中完全安装 storybook

安装完成后，运行yarn storybook即可在本地运行故事书。

如果您在运行故事书时遇到困难，请删除yarn.lock项目的和节点模块，然后yarn再次运行。

仍然遇到问题？查看他们的 文档

步骤2：浏览 Storybook 界面

运行后yarn storybook，您将看到 Storybook 界面出现在浏览器中。

左侧面板有一个搜索栏，可以搜索不同的组件

您还会注意到一个分组，标题为“Example”。然后是按钮、页眉和页面组件。每个组件都有各自的故事，我们稍后会进行探讨。

步骤3：理解代码结构

在代码中，有两点需要注意：

1. 一个.storybook包含一些设置的文件夹。
   目前，我们不需要对此文件夹进行任何编辑。需要注意的是，要使组件显示在 Storybook 中，您需要一个.stories.js文件扩展名。您也可以使用.jsx, .ts, .tsx文件扩展名。

2. 所有故事均位于src目录中的故事文件夹中。

探索stories文件

查看Button, Header and Page. stories files。您会注意到一个模式，每个文件都有一个带有标题和组件的导出默认值。

为了使故事书发挥作用，每个故事文件都必须有一个带有标题和组件属性的导出默认值。

标题为：'Example/Page'是将我们之前看到的示例组下的每个组件分组。

组件属性是组件在故事书中显示的名称。

理解故事是什么

一个组件可以有多个状态或用例。

单个组件的多种状态就是我们所说的故事。

例如，同一个按钮组件可以有主要故事、次要故事和大故事。

在代码中，story 是一个函数，它根据一组参数返回组件的状态。它位于 stories 文件底部的名为 exports 的文件中。

步骤4：为按钮组件构建故事

为了更好地了解如何创建故事，让我们为Button组件创建两个新故事 - 默认故事和禁用故事。

首先，删除安装时附带的故事文件夹并创建一个新的文件夹。

构建按钮组件

Button.jsx在故事目录内的文件中使用一些样式构建按钮组件。

import React from 'react';

export function Button({disabled, children} ) {
  return (
    <button
      disabled={disabled}
      style={{
        padding: 12,
        fontSize: 12,
        background: disabled ? 'lightgray' : 'green',
        color: disabled ? 'gray' : 'white',
      }}
    >
      {children}
    </button>
  );
}

构建故事

创建一个Button.stories.jsx文件来构建两个故事：默认故事和禁用故事。不要忘记导出默认故事并指定标题和组件。

import React from 'react';

import { Button } from './Button';

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

export const Default = () => <Button>Click me</Button>


export const Disabled = () => <Button disabled>Don't click me</Button>;

定义 ArgTypes

ArgTypes 是控制每个故事的一种方式。可以把它想象成一种修改组件内 props 的方法。

对于我们的按钮，我们将添加一个disabledargType 并将控件指定为布尔值（因为这将是真或假）。

另外，由于 children 属性是文本，因此将 argTypes 控件设置为text。参见以下代码：

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Components / Button',
  component: 'Button',
  argTypes: {
    disabled: { control: 'boolean' },
    children: { control: 'text' },
  },
};

export const Default = (args) => <Button {...args} />;

Default.args = {
  disabled: false,
  children: 'Click me',
};

export const Disabled = (args) => <Button {...args} />;

Disabled.args = {
  disabled: true,
  children: "Don't click me",
};

现在您可以调整每个故事组成部分。

恭喜！您刚刚学习了如何为 React 项目创建故事。

观看视频教程，8分钟学会 Storybook

Storybook 提供更多功能，例如对故事执行单元测试以确认功能、进行可访问性检查等等。最棒的是，您可以使用Vercel、GitHub Pages和其他托管平台在线发布您的 Storybook。