Create React App 隔离开发组件

通常，在应用程序中，你有许多 UI 组件，并且每个组件都有许多不同的 states(状态)。 例如，一个简单的按钮组件可以具有以下 states(状态)：

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

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

默认情况下，Create React App 不包含任何工具，但你可以轻松地将 Storybook for React (源代码) 或 React Styleguidist (源代码) 添加到项目中。这些是第三方工具，可让你开发组件并独立于应用程序查看其所有状态。

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

Storybook 入门

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

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

npx -p @storybook/cli sb init

之后，请按照说明进行操作。

了解有关 React Storybook 的更多信息：

• 学习 Storybook (tutorial)
• 文档
• GitHub 仓库
• Snapshot Testing UI 使用 Storybook + addon/storyshot

Styleguidist 入门

Styleguidist 结合了一个风格指南，其中所有组件都显示在一个页面上，包含 props 文档和用法示例，以及一个独立开发组件的环境，类似于 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 仓库
• 文档