Storybook——React開發伴侶

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，下面看下效果圖：

(請注意中間有loading狀態，其受組件內部state控制)

至此，我們完成了storybook基本工作，剩下的內容就是將開發重心放在component樣式，組件功能中去。

以上僅為我們項目開發中的一個環節，除了上述內容外，實際中我們還需要編寫接口文檔，客戶端渲染檢測，瀏覽器兼容測試，這一系列的工作都需要有一套完整的開發環境，恰巧storybook滿足了我們這個開發環節中的需求。這個工具非常有用！

使用storybook進行ui的開發，還存在一個重點問題， 組件嵌套 

來自：http://div.io/topic/1887