create-react-app 组件状态隔离

🌙
手机阅读
本文目录结构
axihe

通常,在应用程序中,您有很多 UI 组件,并且每个组件都有许多不同的状态。

例如,一个基本的按钮组件可能具有以下状态:

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

通常,不运行应用程序,很难看到这些状态。比如加载期间可能一闪而过之类的。

默认情况下,Create React App 不包括任何工具,但是您可以将

添加到项目中。这些是第三方工具,可让您开发组件并独立于您的应用查看所有状态。

https://a.axihe.com/react/create-react-app/developing-components-in-isolation.gif

您还可以将 Storybook 或样式指南部署为静态应用。

这样,您团队中的每个人都可以查看和查看 UI 组件的不同状态,而无需启动后端服务器或在应用中创建帐户。

Storybook

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

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

npx -p @storybook/cli sb init

之后,请按照屏幕上的说明进行操作。

了解有关 React 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 的更多信息:


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang