Storybook是一种开源工具，可帮助开发人员与应用程序的其余部分隔离地构建，测试和展示其组件。它提供了一个用户界面，使您可以交互开发和测试组件。在此博客文章中，我们将为您提供故事书的初学者指南，并向您展示如何使用它来开发您的组件。

为什么使用故事书？

Storybook是开发和测试组件的绝佳工具，因为它允许您与应用程序的其余部分隔离地处理它们。这意味着您可以开发组件，而不必担心它们将如何与应用程序中的其他组件或功能进行交互。这也意味着您可以在受控环境中测试组件，从而更容易找到和修复错误。

Storybook

要开始Storybook，您需要将其作为项目中的依赖性安装。您可以通过在终端中运行以下命令来执行此操作：

npm install @storybook/react --save-dev

安装了故事书后，您需要将其配置为与您的项目一起使用。您可以通过在项目的根目录中创建一个称为.storybook/main.js的配置文件来做到这一点。在此文件中，您需要指定故事的位置和要使用的任何插件。这是一个示例配置文件：

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

在此配置文件中，我们指定我们的故事位于src/components目录中，并且它们具有.stories.js文件扩展名。我们还添加了两个插件： @storybook/addon-actions和@storybook/addon-links。

创建故事
配置了故事书后，您可以开始为组件创建故事。故事是在特定状态或特定输入中的组件的视觉表示。要创建一个故事，您需要使用.stories.js文件扩展名中的项目中创建一个新文件。这是Button组件的示例故事：

import React from 'react';
import { action } from '@storybook/addon-actions';

import Button from './Button';

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

export const Text = () => <Button onClick={action('clicked')}>Hello, Button</Button>;

export const Emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

在这个故事中，我们正在创建两个版本的Button组件：一个带有文本的版本，一个带有表情符号。我们还使用@storybook/addon-actions插件在单击按钮时登录。

查看故事

要查看您的故事，您需要启动Storybook服务器。您可以通过在终端中运行以下命令来执行此操作：

npm run storybook

这将启动Storybook服务器并在默认的Web浏览器中打开它。从那里，您可以导航到组件故事并与它们进行互动。

结论

总而言之，故事书是开发和测试组件的绝佳工具。它使您可以与应用程序的其余部分隔离地处理组件，从而更容易