使用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 (

);
};

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