通常，在应用程序中，你有许多 UI 组件，并且每个组件都有许多不同的 states(状态)。 例如，一个简单的按钮组件可以具有以下 states(状态)：
- 在常规状态下，带有文本标签。
- 在禁用模式下。
- 处于加载状态。
通常，如果没有运行示例应用程序或一些示例，很难看到这些状态。
默认情况下，Create React App 不包含任何工具，但你可以轻松地将 Storybook for React (源代码) 或 React Styleguidist (源代码) 添加到项目中。这些是第三方工具，可让你开发组件并独立于应用程序查看其所有状态。
你还可以将 Storybook 或 风格指南 部署为静态应用程序。 这样，团队中的每个人都可以查看和查看 UI 组件的不同状态，而无需启动后端服务器或在应用中创建帐户。
Storybook 入门
Storybook 是 React UI 组件的开发环境。 它允许你浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。
在应用程序的目录中运行以下命令：
--- -- -------------- -- ----
之后，请按照说明进行操作。
了解有关 React Storybook 的更多信息：
- 学习 Storybook (tutorial)
- 文档
- GitHub 仓库
- Snapshot Testing UI 使用 Storybook + addon/storyshot
Styleguidist 入门
Styleguidist 结合了一个风格指南，其中所有组件都显示在一个页面上，包含 props 文档和用法示例，以及一个独立开发组件的环境，类似于 Storybook 。 在Styleguidist 中，你可以在 Markdown 中编写示例，其中每个代码段都呈现为可以实时可编辑的操练场。
首先，安装 Styleguidist:
--- ------- ------ ------------------
或者你可以使用 yarn:
---- --- ------------------
然后，将这些脚本添加到 package.json:
---------- -
- ------------- ------------- --------
- ------------------- ------------- -------
-------- -------------- -------
然后，在应用程序的目录中运行以下命令：
--- --- ----------
之后，请按照说明进行操作。
了解有关 React Styleguidist 的更多信息：