Storybook 初学者指南（story booked）

关注留言点赞，带你了解最流行的软件开发知识与最新科技行业趋势。

Storybook 是一种开源工具，可帮助开发人员独立于应用程序的其余部分构建、测试和展示其组件。它提供了一个用户界面，允许您以交互方式开发和测试您的组件。在这篇博文中，我们将为您提供 Storybook 初学者指南，并向您展示如何使用它来开发您的组件。

为什么使用Storybook？

Storybook 是用于开发和测试组件的出色工具，因为它允许您在与应用程序的其余部分隔离的情况下处理它们。这意味着您可以开发您的组件，而不必担心它们将如何与您应用程序中的其他组件或功能交互。这也意味着您可以在受控环境中测试您的组件，从而更轻松地查找和修复错误。
Storybook入门

要开始使用 Storybook，您需要将其作为项目的依赖项进行安装。您可以通过在终端中运行以下命令来执行此操作：
npm install @storybook/react --save-dev
安装 Storybook 后，您需要配置它以与您的项目一起使用。您可以通过在项目的根目录中创建一个名为.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.

创建Storybook
一旦您配置了 Storybook，您就可以开始为您的组件创建Story。Story是您的组件在特定状态下或具有特定输入的可视化表示。要创建Story，您需要在项目中使用.stories.js文件扩展名创建一个新文件。这是一个Button组件的示例Story：
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插件在单击按钮时进行记录。

查看Story

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

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

结论

总之，Storybook 是开发和测试组件的优秀工具。它允许您在与应用程序的其余部分隔离的情况下处理您的组件，从而使它更容易