Create React App 隔离开发组件

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

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

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

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

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

Storybook 入门

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

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

--- -- -------------- -- ----

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

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

Styleguidist 入门

Styleguidist 结合了一个风格指南,其中所有组件都显示在一个页面上,包含 props 文档和用法示例,以及一个独立开发组件的环境,类似于 Storybook 。 在Styleguidist 中,你可以在 Markdown 中编写示例,其中每个代码段都呈现为可以实时可编辑的操练场。

首先,安装 Styleguidist:

--- ------- ------ ------------------

或者你可以使用 yarn:

---- --- ------------------

然后,将这些脚本添加到 package.json:

   ---------- -
-    ------------- ------------- --------
-    ------------------- ------------- -------
     -------- -------------- -------

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

--- --- ----------

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

了解有关 React Styleguidist 的更多信息:


上一篇:编辑器设置
下一篇:分析 Bundle (包) 大小