# 在隔离中开发组件
# 快速导航
通常，在应用程序中，您有许多UI组件，并且每个组件都有许多不同的状态。例如，一个简单的按钮组件可以具有以下状态：
在常规状态下，带有文本标签。 在禁用模式下。 处于加载状态。 通常，如果没有运行示例应用程序或一些示例，很难看到这些状态。
默认情况下，创建React App不包含任何工具，但您可以轻松地将Storybook for React（源代码） (opens new window)或React Styleguidist（源代码） (opens new window)添加到项目中。这些是第三方工具，可让您开发组件并独立于应用程序查看其所有状态。
您还可以将Storybook或样式指南部署为静态应用程序。这样，团队中的每个人都可以查看和查看UI组件的不同状态，而无需启动后端服务器或在应用中创建帐户。
# Storybook
Storybook是React UI组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。
在应用程序目录中运行以下命令：
npx -p @storybook/cli sb init
1
之后，请按照屏幕上的说明进行操作。