Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (42 sloc) 2.8 KB
title tocTitle description commit
开始吧
从头开始
在你的开发环境下, 设置 React Storybook
30939d5

开始吧

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

Storybook and your app

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

设置React Storybook

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

# 创建应用:
npx create-react-app taskbox
cd taskbox

# 加入 Storybook:
npx -p @storybook/cli getstorybook

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

# 运行 测试引擎(Jest):
yarn test

# 启动 storybook 在端口:9009 :
yarn run storybook

# 启动 前端 页面 在端口:3000:
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/文件夹. 添加 样式和静态资源 后,应用程序会奇奇怪怪的. 没关系. 因为我们还没有开发应用程序. 现在我们开始构建我们的第一个组件!