阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    create-react-app 组件状态隔离

    通常,在应用程序中,您有很多 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 的更多信息:

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    本文目录
    目录