storybook的介绍和使用 比较火的响应式UI开发及测试环境

storybook是一套最近比较火的响应式UI 开发及测试环境。 可以可视化开发调试react,vue组件 官网:https://github.com/storybooks/storybook 至于为什么叫storybook,应该是敏捷开发中的user story有关,找了篇 文章,不了解的同学可以看下

根据官网介绍一个story是一个或多个UI组件的单一状态,基本上像一个可视化测试用例。 打开 这个,这是airbnb公司实现的一个react的datepicker组件。这个组件配置很多,怎么让大家直观的查看学习呢?他就利用storybook写了很多story,左侧的每一项点开后是datepicker组件不同的状态或配置,就是一个个story。

storybook本身提供了很多组件,也可以添加自己的组件作为story,方便他人查看,使用并测试。

使用storybook你需要有react或vue的开发经验,并且熟悉es6。

下来带大家简单使用一下:

  1. 首先全局安装storybook命令: npm i -g @storybook/cli
  2. 来到一个已存在的react项目,可以是由creat-react-app创建的 在根目录执行 getstorybook 命令 会出现如下画面

安装storybook

发现这个命令实际修改了package.json,对比如下

image.png

然后又多出来个名为.storybook的目录,里面有附件组件文件 addons.jsconfig.js

  1. 安装后根据提示执行 yarn run storybook 启动storybook服务,浏览器打开 http://localhost:9009

image.png

  1. 这个页面是咋生成的呢,我们打开\src\stories\index.js一看便知
import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

// 文档 https://storybook.js.org/basics/writing-stories/
// storiesOf应该是分组,每组添加一个个story
// 修改内容页面会实时发生变化
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

// 使用action让storybook去记录log,可以在页面的action logger中查看
storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>? ? ? ?</Button>);

今天就先研究到这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏狂码一生

QT5获取文件信息

13240
来自专栏编程微刊

小程序开发快速入门教程(附源码)小程序初始化目录:我是分割线===开发ing示例步骤:

26630
来自专栏狂码一生

thinkphp3.2简洁美观的分页样式

风格一 分页模块: <div class="tp_page">     {$pageShow} </div> 分页样式: .tp_page{     width...

39360
来自专栏建站相关

如何通过 cos 托管静态网站

对象存储(Cloud Object Storage,简称:COS)是腾讯云提供的面向非结构化数据,支持 HTTP/HTTPS 协议访问的分布式存储服务,它能容纳...

28700
来自专栏PHP在线

微信小程序

微信小程序今天正式上线了,但是怎么看到呢? 第一:升级微信到最新的版本:6.5.3 第二:在微信中搜索“小程序示例”,在搜索结果中找到黑色图标S形状点开它,进入...

2.7K100
来自专栏知晓程序

晓实战 | 最实用的微信支付模板消息实战分享(内含源码)

我们会定期邀请优秀的开发者,从实践的角度,亲自分享他们使用知晓云(cloud.minaapp.com)开发的实战经验,如果你也想分享你的小程序实战经验,欢迎加入...

15620
来自专栏Thinks

你的第一个渐进式网站应用(3)

应用程序的shell是为渐进式网站应用的用户界面提供所需的最小HTML,CSS和JavaScript能力,并且是确保可靠的良好性能的组件之一。它的第一次加载会非...

8010
来自专栏沈唁志

PHP简单判断手机设备的方法

23210
来自专栏微信平台开发

【腾讯游戏人生】微信小程序开发总结

目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。

68280
来自专栏cloudskyme

flex版的流程设计器

第一章 介绍 1.1 编写目的 介绍流程设计软件并且简单附上使用说明。因为还不是很完善,所以希望大家能多提出自己的意见的见解。 1.2 基本结构 ? 1.3 使...

47640

扫码关注云+社区

领取腾讯云代金券