转载

Storybook——React开发伴侣

React组件UI开发环境，其作用在于让前端工程师专注在样式，组件功能开发过程中。

安装初始化请按照官方文档指引进行，以下为我们开发中的一个片段

配置

// [Pro]/.storybook/config.js
import React from 'react';
import { configure } from '@kadira/storybook';
import 'normalize.css/normalize.css';

// 使用 material-ui 需配置
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
addDecorator((getStory) => (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
        {getStory()}
    </MuiThemeProvider>
))
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();


// 加载 *.css文件
const cssReq = require.context('../client/stylesheet', true, /.css$/);
// 加载 *.story.js文件
const viewReq = require.context('../imports/ui/pages/live', true, /.story.js$/);

function loadStories() {
    cssReq.keys().forEach((filename) => cssReq(filename));
    viewReq.keys().forEach((filename) => viewReq(filename));
}

configure(loadStories, module);

有时候，我们在开发时，还需要加载字体或者脚本，那么在上述文件同级的目录下增加如下文件即可：

// [Pro]/.storybook/config.html
<script src="xxxx"></script>

编写组件 story

配置完毕后，开始为每一个component编写story。我们推荐story文件以[componentName].story.js的文件命名，同时将story文件放在component的同级目录下。

以下为某一story文件：

//[Pro]/ui/component/bidOperator.story.js
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import BidOperator from './bidOperator.jsx';

storiesOf('view.LiveCar.comp.BidOperator', module)
    .add('可出价', () => (
        <BidOperator
            start={start}
            incRange={incRange}
            userCanBid={true}
            subBid={subBid}
        />
    ))
    .add('不可出价', () => (
        <BidOperator
            start={start}
            incRange={incRange}
            userCanBid={false}
            subBid={subBid}
        />
    ))
    ;
import Chance from 'chance';
const chance = new Chance();

const start = chance.floating({min: 2, max: 10, fixed: 0});
const incRange = chance.floating({min: 0, max: 1, fixed: 1});

const subBid = function(){
    console.log('subBid ');
}

启动

// 常用启动指令
start-storybook -p 9001 -c .storybook -s ./public

//-p 端口， -c 配置目录，-s 静态文件目录
//启动后 通过localhost:9001访问

如下是某组件的两种状态，通过属性(userCanBid)传递即可快速的测试出不同状态下的comp，下面看下效果图：

Storybook——React开发伴侣

(请注意中间有loading状态，其受组件内部state控制)

至此，我们完成了storybook基本工作，剩下的内容就是将开发重心放在component样式，组件功能中去。

以上仅为我们项目开发中的一个环节，除了上述内容外，实际中我们还需要编写接口文档，客户端渲染检测，浏览器兼容测试，这一系列的工作都需要有一套完整的开发环境，恰巧storybook满足了我们这个开发环节中的需求。这个工具非常有用！

使用storybook进行ui的开发，还存在一个重点问题， 组件嵌套 ，关于这个一内容，将在下一节中重点讲述

更多资料

官方文档

时间选择器demo ，源码

原文 http://div.io/topic/1887

正文到此结束

所属分类：编程技术

本文标签： 端口 IDE client 源码 UI provider id 测试配置开发 IO 目录安装 key plugin tar HTML ORM 时间 Action js 需求 http ip CSS src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Storybook——React开发伴侣

配置

编写组件 story

启动

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流