通常在应用程序中，有很多UI组件，每个组件都有许多不同的状态。例如，一个基本的按钮组件可能具有以下状态：
- 在正常状态下，带有文本标签
- 处于禁用状态下
- 处于加载状态 默认情况下，Create React App不包括任何工具，但是可以将Storybook for React或React Styleguidist添加到项目中。这些第三方工具，可以让您开发组件并独立于您的应用查看所有状态。
您还可以将Storybook或样式指南部署为静态应用。这样，您团队中的每个人都可以查看和查看UI组件的不同状态，而无需启动后端服务器或在您的应用程序中创建帐户。
开始Storybook
Storybook是React UI组件的开发环境，它使您可以浏览组件库，查看每个组件的不同状态，以及以交互方式开发和测试组件。
在应用的目录中运行：
npx -p @storybook/cli sb init
开始Styleguidist
Styleguidist结合了一个样式指南，该指南将所有组件及其道具文档和用法示例显示在一个页面上，并提供了一个独立的组件开发环境，类似于Storybook。在Styleguidist中，您可以在Markdown中编写示例，其中每个代码段均呈现为可实时编辑的操场。
安装Styleguidist：
npm install --save react-styleguidist
或者，使用yarn：
yarn add react-styleguidist
然后，将这些脚本添加到您的package.json：
npm run styleguide
之后，请按照屏幕上的说明进行操作。
分析bundle大小
Source map explorer使用源地图分析JavaScript包。这可以帮助您了解代码臃肿的来源。
将Source map explorer添加到Create React App项目中：
npm install --save source-map-explorer
你也可以使用yarn：
yarn add source-mapp-explorer
然后在package.json中添加：
npm run build
npm run analyze
在开发中使用HTTPS
注意，此功能可用于react-scripts@0.4.0或更高版本。
您可能需要开发服务器通过HTTPS提供页面。一种可能有用的特殊情况是，当该API服务器本身正在服务HTTPS 时，使用“proxy”功能将请求代理到该API服务器。 为此，请将HTTPS环境变量设置为true，然后像往常一样通过npm start以下方式启动开发服务器：
Windows（cmd.exe）
set HTTPS=true&& npm start
window(Powershell)
($env:HTTPS = "true") -and (npm start)
Linux,macOS(Bash)
HTTPS=true npm start
请注意，服务器将使用自签名证书，因此您的Web浏览器几乎肯定会在访问该页面时显示警告。
自定义SSL证书
要设置自定义证书，请使用SSL_CRT_FILE与SSL_KEY_FILE上述相同的方法，将和环境变量设置为证书和密钥文件的路径HTTPS。请注意，您还需要设置HTTPS=true。 Linux,macOS
HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start
为了避免每次都必须设置环境变量，可以在npm start脚本中包括如下所示：
或者，您可以创建.env带有HTTPS=trueset 的文件。 在CRA中了解有关环境变量的更多信息。
