使用React开始使用Storybook Storybook是一款用于开发和测试React组件的工具。它可以让您在一个独立的环境中创建和展示组件，以便更轻松地构建用户界面。 在本教程中，我们将介绍如何在React项目中使用Storybook。 步骤1：安装Storybook 首先，您需要在项目中安装Storybook。可以通过运行以下命令来完成安装： “` npm install @storybook/react –save-dev “` 步骤2：创建.storybook目录 在项目的根目录下创建一个名为.storybook的文件夹。 步骤3：创建配置文件 在.storybook目录中创建一个名为main.js的文件，并将以下内容复制到文件中： “`javascript module.exports = { stories: [‘../src/**/*.stories.js’], }; “` 步骤4：创建组件 在src目录中创建一个名为Button.js的文件，并在其中添加以下代码： “`jsx import React from ‘react’; const Button = ({ label }) => { return {label}; }; export default Button; “` 步骤5：创建故事 在src目录中创建一个名为Button.stories.js的文件，并在其中添加以下代码： “`jsx import React from ‘react’; import { storiesOf } from ‘@storybook/react’; import Button from ‘./Button’; storiesOf(‘Button’, module) .add(‘Default’, () => ) .add(‘Primary’, () => ); “` 步骤6：运行Storybook 最后，通过运行以下命令来启动Storybook： “` npx start-storybook -p 6006 “` 现在，您可以在浏览器中访问http://localhost:6006来查看Storybook界面，并测试和展示您的组件。 这就是使用React和Storybook的基本步骤！希望本教程能帮助您开始使用Storybook来提高React组件的开发效率。

你曾经试过在React中将所有UI组件放在一个地方吗？

如果你是React世界的新手，那么你可能不会。

这是什么意思呢？

看看示例。

你在示例中看到的被称为stories。创建stories的工具被称为Storybook。

现在，你已经理解了我们在本文中要讨论的内容。不多说了，让我们来探索一下。

什么是Storybook？

Storybook是一个用户界面隔离的开发环境，为你的组件提供了一个游乐场。我们可以以不同的方式玩弄我们的组件，而不必运行我们的主应用程序。我们可以使用设置在其端口上运行storybook。

它不仅限于React。我们可以将storybook与大多数类似Vue、Angular、Mithril、Marko、Svelte等的框架一起使用。

你可以在here中了解更多关于storybook的信息。

什么是story？

一个story定义了组件的渲染状态。如果我们拿一个常见的组件来说，我们可以使用props以不同的方式使用它。我们可以为每个状态编写一个story。

假设我们有一个Button组件。

一个按钮可以有不同的状态，如disabled、loading、primary、secondary、small、large、medium等。如果我们列出所有的状态，那么在教程中继续前进将会非常困难。我认为你理解它。当你开始使用storybook时，你会更加理解它。

你可以在storybook中看到按钮的不同情况的stories（大型、中型、小型）。

在项目中设置Storybook

我们将在一个React项目中设置storybook。

让我们开始吧。

• 使用以下命令创建一个React项目。你可以随意命名。

npx create-react-app storybook-demo

• 现在，使用以下命令在你的项目中安装storybook。

npx sb init

我们已经完成了storybook的设置。

storybook为我们提供了一个单独的服务器。

如何启动它？

storybook会自动在我们的脚本文件中添加一个命令。你可以在package.json文件的scripts部分中检查它。暂时运行以下命令启动storybook服务器。

npm run storybook

storybook将在package.json文件的scripts部分给定的端口上启动一个新的服务器。它将自动在我们的默认浏览器中打开storybook（与react服务器相同）。

你将在其中看到不同的stories。如果你不想要它们或者想要保留它们作为参考，你可以将它们移除。正如我们在前一节中讨论的，一个按钮可以有多个状态，你可以在storybook中看到它们（没有列出所有状态）。我们将在本教程的最后一节中为按钮编写一系列的stories。

探索storybook的不同部分，并熟悉不同的部分。我们将在本教程中介绍其中的一些部分。

让我们写下我们的第一个story。

测试storybook

我们已经看到了storybook的运行和其中的一些示例。

• 在src文件夹中创建一个名为Button的文件夹。
• 创建名为Button.jsx、Button.css和constants.js的文件。
• 将下面片段中的相应代码放入文件中。

Button.jsx

import React, { Component } from “react”;
import PropTypes from “prop-types”;

import “./Button.css”;

import { buttonTypes, buttonVariants, buttonSizes } from “./constants”;

class Button extends Component {
static defaultProps = {
isDisabled: false,
type: “filled”,
variant: “oval”,
size: “medium”,
backgroundColor: “#1ea7fd”,
textColor: “#ffffff”,
};

static buttonTypes = buttonTypes;
static buttonVariants = buttonVariants;
static buttonSizes = buttonSizes;

renderButton = () => {
const {
text,
isDisabled,
type,
variant,
size,
backgroundColor,
textColor,
onClick,
} = this.props;
return (

{text}

);
};

render() {
return this.renderButton();
}
}

Button.propTypes = {
text: PropTypes.string,
isDisabled: PropTypes.bool,
type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
size: PropTypes.oneOf([
buttonSizes.small,
buttonSizes.medium,
buttonSizes.large,
]),
backgroundColor: PropTypes.string,
textColor: PropTypes.string,
onClick: PropTypes.func,
};

export { Button };
我们已经完成了第一个故事。使用以下命令运行storybook并查看输出。

npm run storybook

在前端开发中它有什么用处？

使用storybook的主要优势是什么？

假设我们是一个由10个成员组成的团队。我们需要检查每个成员为当前工作项目编写的通用组件。

我们该如何做到这一点？

我们必须去检查每个通用组件。但是，这是耗时的且不是我们首选的方式。这就是我们的新来宾storybook的用武之地。

如何利用它来解决我们的问题？

我们可以使用storybook为通用组件编写故事(任何UI组件)。每当你的队友想要检查其他人的通用组件时，他们只需要运行storybook服务器，就可以在其中看到所有的UI组件，就像我们之前所看到的一样。

我们可以在storybook中使用渲染组件做更多的事情。storybook有一个称为Addon的概念，它赋予了我们的故事超能力。

假设我们需要在storybook本身中检查UI组件的响应性，我们可以在storybook中使用一个名为Viewport的插件。在接下来的章节中，我们将更多地了解插件。

使用storybook

在本节中，我们将编写不同状态的common component Button的不同故事。

编写故事并不难。一个故事定义了一个组件的状态。如果你查看组件的props，你将很容易理解组件的不同用例。

让我们通过添加可选的props来写一些故事。

export const largeButton = () => (
{}} size=”large” />
);

export const outlineSmallButton = () => (

{}}
size=”small”
type=”outline”
/>
);

export const rectangularLargeButton = () => (

{}}
size=”large”
variant=”rectangular”
/>
);

export const disabledButton = () => (

{}} isDisabled={true} />
);

export const warningButton = () => (

{}}
backgroundColor=”orange”
/>
);

以上三个故事定义了我们组件Button的不同用例。现在轮到你为我们的通用组件添加一些其他用例的故事。尝试添加disabledSamllRectangularButton、dangerButton、successDisabledButton等等。

我不会为上述用例提供代码。你必须自己编写以理解它。你可以查看我们目前编写的完整故事代码。

import React from “react”;

import { Button } from “./Button”;

export default {
title: “src/common/Button”,
};

export const defaultButton = () => (

{}} />
);

export const largeButton = () => (

{}} size=”large” />
);

export const outlineSmallButton = () => (

{}}
size=”small”
type=”outline”
/>
);

export const rectangularLargeButton = () => (

{}}
size=”large”
variant=”rectangular”
/>
);

export const disabledButton = () => (

{}} isDisabled={true} />
);

export const warningButton = () => (

{}}
backgroundColor=”orange”
/>
);
现在，你已经完全掌握了为组件编写故事的技巧。

让我们进入下一章节，了解一下插件以及它们如何提升我们的故事效果。

Storybook插件

默认情况下，我们将提供多个插件。在这个章节中，我们将探索对我们的开发最有用的插件。

让我们提升一下我们的Button故事效果。

控件

控件可以在Storybook本身中为组件添加自定义属性。对于我们的Button组件，我们可以添加控件来改变Storybook中的不同属性。

假设我们需要找出Button背景色的最佳颜色。如果我们逐个测试将不同的颜色应用到组件中来检查背景色，那将非常耗时。相反，我们可以添加一个控件，允许我们在Storybook中选择不同的颜色。我们可以在Storybook中测试背景色。

让我们看看如何为我们的Button故事添加控件。

首先，在标题下方定义所有属性，如下所示。

export default {
title: “src/common/Button”,
argTypes: {
text: { control: “text” },
backgroundColor: { control: “color” },
isDisabled: { control: “boolean” },
size: {
control: { type: “select”, options: [“small”, “medium”, “large”] },
},
type: {
control: { type: “select”, options: [“filled”, “outline”] },
},
variant: {
control: { type: “select”, options: [“oval”, “rectangular”] },
},
},
};

接下来，从组件中分离属性，并将它们作为args传递，如下所示。

export const outlineSmallButton = (args) => (

{}} />
);
outlineSmallButton.args = {
text: “Outline Small Button”,
size: “small”,
type: “outline”,
};

你可以在组件预览窗口底部看到控件。

你可以在组件预览窗口底部看到控件选项卡。随意尝试一下。

将所有故事更新为上述方式。这更像是了解Storybook插件的语法。在argTypes中，我们使用了不同类型的控件。你可以在storybook的链接中找到所有的控件。

更新后的button故事将如下所示。
import React from “react”;

import { Button } from “./Button”;

export default {
title: “src/common/Button”,
argTypes: {
text: { control: “text” },
backgroundColor: { control: “color” },
isDisabled: { control: “boolean” },
size: {
control: { type: “select”, options: [“small”, “medium”, “large”] },
},
type: {
control: { type: “select”, options: [“filled”, “outline”] },
},
variant: {
control: { type: “select”, options: [“oval”, “rectangular”] },
},
},
};

export const defaultButton = (args) =>

{}} />;
defaultButton.args = {
text: “默认按钮”,
};

export const largeButton = (args) => (

{}} size=”large” />
);
largeButton.args = {
text: “大按钮”,
};

export const outlineSmallButton = (args) => (

{}} />
);
outlineSmallButton.args = {
text: “小轮廓按钮”,
size: “small”,
type: “outline”,
};

export const rectangularLargeButton = (args) => (

{}} />
);
rectangularLargeButton.args = {
text: “大矩形按钮”,
size: “large”,
variant: “rectangular”,
};

export const disabledButton = (args) =>

{}} />;
disabledButton.args = {
text: “禁用按钮”,
isDisabled: true,
};

export const warningButton = (args) =>

{}} />;
warningButton.args = {
text: “警告按钮”,
backgroundColor: “橙色”,
};

动作

动作是JavaScript中的事件。我们可以点击一个

在JavaScript中。我们可以使用动作插件在按钮点击时执行一些动作。

通过使用动作，我们可以测试事件是否正常工作。禁用的按钮不能被点击，启用的按钮必须可点击。我们可以使用动作来确保它。

让我们看看如何将动作添加到按钮点击事件中。

我们以前给onClick属性传递了匿名函数。现在，我们需要更新它。

• 使用以下语句从storybook插件中导入动作。

import { action } from "@storybook/addon-actions";

• 将所有的() => {}替换为以下语句。

action("按钮被点击了！")

现在，转到storybook并点击按钮。您将在控制台选项卡旁边的动作选项卡下看到打印的消息。如果您点击禁用的按钮，消息将不会被打印。

我们可以使用动作来测试不同的事件，如onChange、onMouseOver、onMouseOut等，以确保它们正常工作。尝试为输入框的onChange事件实现相同的操作。

请参阅动作的文档here。

背景

我们可以使用背景插件更改预览窗口的背景。我们不需要编写任何代码。只需在storybook中进行更改即可。您可以在下面的gif图中看到效果。

视口

我们还可以在storybook中测试组件的响应性。查看下面的gif图了解有关视口选项的更多信息。

文档

我们可以使用文档插件在storybook中为组件编写文档。在团队中工作时，这非常有用。他们可以直接阅读并理解组件。这为开发人员节省了大量时间。

在故事书的组件预览窗口中，您可以在右上角的“画布”选项卡中看到Docs。它将包含组件的所有故事的所有文档。如果我们想要为同时包含Markdown和组件渲染的组件编写文档，我们必须使用Button.stories.mdx。我们只需要在其中写入一些额外的Markdown代码以及组件故事。

我们正在为我们的故事书写一份文档。代码中包含了Markdown和组件渲染。这只是学习语法。你一眼就会明白。

让我们来看看Button.stories.mdx的文档代码。

import {
    Meta,
    Story,
    Preview,
    ArgsTable
} from '@storybook/addon-docs/blocks';

import { Button } from './Button';



# Button Documentation

使用`MDX`，我们可以在我们的Markdown文档中间为`Button`定义一个故事。



export const Template = (args) => 

## 默认按钮 我们可以编写与默认按钮相关的文档 {Template.bind({})} ## 大型按钮 我们正在为两个故事编写示例文档，您可以编写其余的故事 {Template.bind({})}

了解有关文档化组件 here的更多信息。

了解有关插件 here的更多信息。

结论

希望您喜欢本教程并了解故事书。并在团队中有效地使用它，以提高您的工作效率。

React初学者？看看这些 learning resources。

Happy Coding 🙂

相关