开始吧

Storybook 是在开发模式下 与 您的应用程序一起运行的. 它可以帮助您构建UI组件,并与 应用程序的 业务逻辑和上下文 隔离开来. 本期"学习 Storybook"适用于 React; Vue和Angular版本即将推出.

Storybook and your app

整个页面 -> 拿出各种组件 -> 分隔出 每个组件 /组件组合用来测试与文档说明

设置React Storybook

我们需要按照几个步骤设置 Storybook 环境. 首先,我们想要使用Create React App (CRA) 快速设置我们的环境,并启用Storybook和 jest 测试我们创建的应用. 让我们运行以下命令: 

  1. # 创建应用:
  2. npx create-react-app taskbox
  3. cd taskbox
  5. # 加入 Storybook:
  6. npx -p @storybook/cli getstorybook

我们可以快速检查,我们的应用程序的各种命令是否正常工作: 

  1. # 运行 测试引擎(Jest):
  2. yarn test
  4. # 启动 storybook 在端口:9009 :
  5. yarn run storybook
  7. # 启动 前端 页面 在端口:3000:
  8. yarn start

注意: 如果 yarn test 运行错误, 你可能需要安装 watchman 具体问题来自 这个Issue.

我们的三个前端应用程序模式: 自动化测试 (Jest) ,组件开发 (Storybook) 和 应用程序本身.

3 modalities

根据您正在处理的应用程序的哪个部分,您可能希望同时运行其中一个或多个. 由于我们目前的重点是创建单个UI组件,因此我们将坚持运行 Storybook.

重用CSS

本例子Taskbox 重用了 GraphQL 和 React Tutorial示例应用中的设计元素,所以我们不需要在本教程中编写CSS. 我们只需将 LESS编译为单个CSS文件, 并将其包含在我们的应用程序中. 复制和粘贴这个编译的CSS根据 CRA的规则 进入 src/index.css 文件.

Taskbox UI

如果要修改样式，在GitHub存储库中有提供 源LESS文件。

添加资源

我们还需要添加 字体和图标文件夹到了public/文件夹. 添加 样式和静态资源 后,应用程序会奇奇怪怪的. 没关系. 因为我们还没有开发应用程序. 现在我们开始构建我们的第一个组件!