React Storybook：轻松开发美丽的用户界面

前端项目伊始，通常先设计精美界面。您会精心规划和绘制所有UI组件及其各种状态和效果。然而，开发过程中，情况往往会发生变化。新的需求和不可预见的用例层出不穷。最初精美的组件库无法涵盖所有这些需求，您需要不断添加新的设计。

如果此时您身边还有设计专家，固然很好，但他们往往已经转投其他项目，留下开发者独自应对这些变化。结果，设计的一致性开始下降。难以追踪组件库中已有的组件及其状态和外观。

为避免这种设计混乱，通常最好为所有组件创建单独的文档。虽然有多种工具可用于此目的，但本文将重点介绍一款专为React应用程序设计的工具——React Storybook。它允许您轻松浏览组件集合及其功能。React Native组件库就是一个此类应用程序的实例。

关键要点

• 简化UI开发： React Storybook简化了UI组件的开发和管理流程，允许开发者独立构建组件并实时可视化其行为。
• 增强协作： 它作为一个协作平台，通过提供一个查看和交互所有UI组件的单一位置，弥合了设计师、开发者和其他利益相关者之间的差距。
• 可定制和可扩展： 通过附加组件和配置设置提供广泛的定制选项，使开发者能够根据其特定项目需求定制工具。
• 支持自动化测试： 与Jest等测试框架集成，方便在UI组件开发环境中直接进行自动化测试。
• 用途广泛且可扩展： 适用于小型和大型项目，并支持React以外的其他JavaScript框架，使其成为各种开发团队的多功能选择。

为什么需要React Storybook？

那么，这个展示如何提供帮助呢？为了回答这个问题，让我们尝试列出参与UI组件开发的人员，并评估他们的需求。根据您的工作流程，此列表可能有所不同，但通常包括以下人员：

设计师或UX专家

负责用户界面的外观和感觉。项目原型设计阶段完成后，设计师通常会离开团队。当出现新需求时，他们需要快速了解UI的当前状态。

开发者

开发者是创建这些组件的人，可能是样式指南的主要受益者。开发者有两个主要用例：能够从库中找到合适的组件，并在开发过程中对其进行测试。

测试人员

测试人员会仔细检查组件是否按预期实现。测试人员的一项主要工作是确保组件在各个方面都能正确运行。虽然这并不能消除集成测试的必要性，但这通常比在项目本身中单独进行更方便。

产品负责人

接受设计和实现的人员。产品负责人需要确保项目的每个部分都符合预期，并且品牌风格保持一致。

您可能已经注意到，所有相关人员的共同点是拥有一个包含所有组件的单一位置。在项目本身中查找所有组件可能会非常繁琐。想想看，找到项目中所有可能的按钮变体（包括其状态（禁用、主要、次要等））需要多长时间？因此，拥有一个单独的库会方便得多。

如果我已经说服您，让我们看看如何在项目中设置Storybook。

设置React Storybook

要设置React Storybook，首先需要一个React项目。如果您目前没有合适的项目，可以使用create-react-app轻松创建一个。

要生成Storybook，请全局安装getstorybook：

<code>npm i -g getstorybook</code>

然后导航到您的项目并运行：

<code>getstorybook</code>

此命令将执行以下三项操作：

• 将@kadira/storybook安装到您的项目中。
• 将storybook和build-storybook脚本添加到您的package.json文件中。
• 创建一个.storybook文件夹，其中包含基本配置和一个包含示例组件和故事的stories文件夹。

要运行Storybook，请执行npm run storybook并打开显示的地址（https://www.php.cn/link/93e4d7106625e1b0f2eb8af065c83452：

添加新内容

现在我们已经运行了React Storybook，让我们看看如何添加新内容。每个新页面都是通过创建故事来添加的。这些是呈现组件的代码片段。getstorybook生成的示例故事如下所示：

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

storiesOf函数在导航菜单中创建一个新部分，add方法创建一个新子部分。您可以随意组织Storybook，但不能创建超过两级的层次结构。组织Storybook的一种直接方法是为相关元素组创建常见的顶级部分，例如“表单输入”、“导航”或“小部件”，以及各个组件的子部分。

您可以自由选择放置故事文件的位置：在单独的stories文件夹中或组件旁边。我个人更喜欢后者，因为将故事与组件放在一起有助于保持它们的易访问性和最新性。

故事在.storybook/config.js文件中加载，该文件包含以下代码：

<code>npm i -g getstorybook</code>

默认情况下，它加载src/stories/index.js文件，并期望您在那里导入您的故事。这有点不方便，因为它需要我们导入我们创建的每个新故事。我们可以修改此脚本以使用Webpack的require.context方法自动加载所有故事。为了区分故事文件与其余代码，我们可以约定为它们添加.stories.js扩展名。修改后的脚本应如下所示：

<code>getstorybook</code>

如果您使用不同的文件夹作为源代码，请确保将其指向正确的位置。重新运行Storybook以使更改生效。Storybook将为空，因为它不再导入index.js文件，但我们很快就会解决这个问题。

(以下内容与原文基本一致，略作调整，保持语义不变，并精简部分描述)

编写新的故事

现在我们已经稍微调整了Storybook以满足我们的需求，让我们编写我们的第一个故事。但首先我们需要创建一个组件来展示。让我们创建一个简单的Name组件，在一个彩色块中显示名称。该组件将具有以下JavaScript和CSS。

//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>? ? ? ?</Button>);

import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

您可能已经注意到，这个简单的组件可以有三种状态：默认、突出显示和禁用。可视化所有这些状态岂不是很好？让我们为此编写一个故事。在您的组件旁边创建一个新的Name.stories.js文件，并添加以下内容：

import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(() => {
    const req = require.context('../src', true, /.stories\.js$/);
    req.keys().forEach(filename => req(filename));
  },
  module
);

打开Storybook并查看您的新组件。结果应如下所示：

随意尝试更改组件的显示方式及其源代码。请注意，由于React的热重载功能，每当您编辑故事或组件时，更改都会立即出现在您的Storybook中，无需手动刷新浏览器。但是，当您添加或删除文件时，可能需要刷新。Storybook并不总是注意到这些更改。

(以下内容同样精简并调整，保持语义一致)

视图自定义

如果您想更改故事的显示方式，可以使用容器将其包装起来。这可以使用addDecorator函数来完成。例如，您可以为所有页面添加“示例”标题，方法是将以下代码添加到.storybook/config.js：

import React from 'react';
import './Name.css';

const Name = (props) => (
  <div className={`name ${props.type}`}> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;

您也可以通过在storiesOf之后调用addDecorator来自定义单独的部分。

发布您的Storybook

完成Storybook的工作并认为它已准备好发布后，您可以将其构建为静态网站，方法是运行：

.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}

默认情况下，Storybook构建到storybook-static文件夹中。您可以使用-o参数更改输出目录。现在您只需要将其上传到您喜欢的托管平台即可。

如果您正在GitHub上处理项目，您可以通过将其构建到docs文件夹并将它推送到存储库来发布您的Storybook。可以将GitHub配置为从那里提供您的GitHub Pages网站。如果您不想将构建的Storybook保存在存储库中，也可以使用storybook-deployer。

构建配置

Storybook配置为支持故事中的许多功能。您可以使用与create-react-app相同的ES2015 语法编写，但是，如果您的项目使用不同的Babel配置，它将自动拾取您的.babelrc文件。您还可以导入JSON文件和图像。

如果您觉得这还不够，您可以通过在.storybook文件夹中创建一个webpack.config.js文件来添加额外的webpack配置。此文件导出的配置选项将与默认配置合并。例如，要在您的故事中添加对SCSS的支持，只需添加以下代码：

<code>npm i -g getstorybook</code>

不要忘记安装sass-loader和node-sass。

您可以添加任何所需的webpack配置，但是，您不能覆盖入口、输出和第一个Babel加载器。

如果您想为开发和生产环境添加不同的配置，您可以导出一个函数。它将使用基本配置和设置为“DEVELOPMENT”或“PRODUCTION”的configType变量来调用。

使用附加组件扩展功能

Storybook本身非常有用，但为了使其更好，它还有一些附加组件。在本文中，我们只介绍其中一些，但请务必稍后查看官方列表。

(以下部分精简，并对addon的介绍方式进行调整)

Storybook自带两个预配置的附加组件：Actions和Links。您无需进行任何额外的配置即可使用它们。

• Actions: 允许您在“Action Logger”面板中记录组件触发的事件。
• Links: 允许您在组件之间添加导航。

Knobs: 允许您通过在运行时直接从UI修改React属性来自定义组件。安装方法：npm i --save-dev @storybook/addon-knobs，注册方法：在.storybook/addons.js中导入。使用withKnobs装饰器包装故事。

Info: 允许您添加有关故事的更多信息，例如其源代码、描述和React propTypes。安装方法：npm i --save-dev @storybook/addon-info，注册方法：在.storybook/preview.js中使用addDecorator。

自动化测试

Storybook的一个重要方面（本文未介绍）是将其用作运行自动化测试的平台。您可以执行各种测试，从单元测试到功能测试和视觉回归测试。不出所料，有一些附加组件旨在增强Storybook作为测试平台的功能。我们不会详细介绍它们，因为它们值得单独成文，但仍然想提及它们。

• Specifications: 允许您直接在故事文件中编写单元测试。
• Storyshots: 允许您根据故事执行Jest快照测试。

Storybook 作为服务

Kadira 还提供 Storybook 作为一项名为 Storybook Hub 的服务。它允许您在其上托管 Storybook，并将协作提升到一个新的水平。除了标准功能外，它还与 GitHub 集成，并且可以为您的每个拉取请求生成一个新的 Storybook。您还可以在 Storybook 中直接留下评论，以与您的同事讨论更改。

结论

如果您觉得维护项目中的UI组件开始变得痛苦，请退一步看看您错过了什么。您可能只需要所有相关方之间方便的协作平台。在这种情况下，对于您的React项目，Storybook是您的完美工具。

您是否已经在使用Storybook？您打算尝试一下吗？为什么？或者为什么不呢？我很乐意在评论中听到您的声音。

(FAQ部分精简，并调整结构)

常见问题解答 (FAQ)

• React Storybook与其他UI开发工具有何不同？ React Storybook允许开发者独立构建组件，使开发过程更快更高效，并提供实时可视化测试环境。
• 我可以在其他JavaScript框架中使用React Storybook吗？ 是的，它支持Vue.js和Angular等框架。
• 如何向我的Storybook添加附加组件？ 通过npm或yarn安装，添加到.storybook/addons.js文件，并根据文档进行配置。
• React Storybook的学习曲线如何？ 如果您熟悉JavaScript和React，应该很快就能上手。
• 我可以将React Storybook用于大型项目吗？ 是的，它被Airbnb、IBM和Lyft等大型组织使用。
• 如何与他人共享我的Storybook？ 可以使用Storybook Deployer将其部署到静态托管服务，如GitHub Pages或Netlify。
• 我可以在React Storybook中测试我的组件吗？ 是的，它提供可视化测试环境，并可与Jest等测试库集成。
• 如何自定义Storybook的外观？ Storybook提供主题定制、自定义webpack配置和创建自定义附加组件等选项。
• 我可以将React Storybook用于移动应用程序开发吗？ 是的，它支持React Native。
• React Storybook是开源的吗？ 是的，它托管在GitHub上，并欢迎来自世界各地开发者的贡献。

总而言之，对原文进行了大幅度的改写，使其更简洁流畅，并保持了原意。 图片格式保持不变。

以上是React Storybook：轻松开发美丽的用户界面的详细内容。更多信息请关注PHP中文网其他相关文章！