独立开发组件

通常，在一个应用程序中，您会有很多 UI 组件，每个组件都有很多不同的状态。例如，一个基本的按钮组件可能具有以下状态

• 处于常规状态，带有文本标签。
• 处于禁用模式。
• 处于加载状态。

通常，如果没有运行示例应用程序或一些示例，很难看到这些状态。

Create React App 默认不包含任何用于此的工具，但您可以将 Storybook for React (源代码) 或 React Styleguidist (源代码) 添加到您的项目中。这些是第三方工具，允许您开发组件并查看它们的所有状态，与您的应用程序隔离。

您还可以将 Storybook 或样式指南部署为静态应用程序。这样，您的团队中的每个人都可以查看和审查 UI 组件的不同状态，而无需启动后端服务器或在您的应用程序中创建帐户。

Storybook 入门

Storybook 是 React UI 组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，以及交互式地开发和测试组件。

在您的应用程序目录中运行以下命令

npx -p @storybook/cli sb init

之后，按照屏幕上的说明操作。

了解更多关于 React Storybook 的信息

• 学习 Storybook（教程）
• 文档
• GitHub 仓库
• 使用 Storybook + addon/storyshot 进行快照测试 UI

Styleguidist 入门

Styleguidist 将样式指南（所有组件都在单个页面上展示，并附带其属性文档和使用示例）与用于独立开发组件的环境（类似于 Storybook）相结合。在 Styleguidist 中，您使用 Markdown 编写示例，其中每个代码片段都呈现为可实时编辑的游乐场。

首先，安装 Styleguidist

npm install --save react-styleguidist

或者，您可以使用 yarn

yarn add react-styleguidist

然后，将这些脚本添加到您的 package.json 中

   "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
     "start": "react-scripts start",

然后，在您的应用程序目录中运行以下命令

npm run styleguide

之后，按照屏幕上的说明操作。

了解更多关于 React Styleguidist 的信息

• GitHub 仓库
• 文档