create-react-app 组件状态隔离
🌙
手机阅读
本文目录结构
通常，在应用程序中，您有很多 UI 组件，并且每个组件都有许多不同的状态。
例如，一个基本的按钮组件可能具有以下状态：
- 在正常状态下，带有文本标签的状态。
- 在禁用模式下的状态。
- 处于加载期间的状态。
通常，不运行应用程序，很难看到这些状态。比如加载期间可能一闪而过之类的。
默认情况下，Create React App 不包括任何工具，但是您可以将
添加到项目中。这些是第三方工具，可让您开发组件并独立于您的应用查看所有状态。
您还可以将 Storybook 或样式指南部署为静态应用。
这样，您团队中的每个人都可以查看和查看 UI 组件的不同状态，而无需启动后端服务器或在应用中创建帐户。
Storybook
Storybook 是 React UI 组件的开发环境。它使您可以浏览组件库，查看每个组件的不同状态，以及以交互方式开发和测试组件。
在您应用的目录中运行以下命令：
npx -p @storybook/cli sb init
之后，请按照屏幕上的说明进行操作。
了解有关 React Storybook 的更多信息：
- 学习Storybook（教程）
- 文档
- GitHub
- storyshot的快照测试UI (带有Storybook +插件)
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 的更多信息：
