Storybook——React开发伴侣
<p>Storybook——React开发伴侣</p> <p>React组件UI开发环境,其作用在于让前端工程师专注在样式,组件功能开发过程中。</p> <p>安装初始化请按照 <a href="/misc/goto?guid=4959729895443928176" rel="nofollow,noindex">官方文档</a> 指引进行,以下为我们开发中的一个片段</p> <h3>配置</h3> <pre> // [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);</pre> <p>有时候,我们在开发时,还需要加载字体或者脚本,那么在上述文件同级的目录下增加如下文件即可:</p> <pre> // [Pro]/.storybook/config.html <script src="xxxx"></script></pre> <h3>编写组件 story</h3> <p>配置完毕后,开始为每一个component编写story。我们推荐story文件以[componentName].story.js的文件命名,同时将story文件放在component的同级目录下。</p> <p>以下为某一story文件:</p> <pre> //[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 '); }</pre> <h3>启动</h3> <pre> // 常用启动指令 start-storybook -p 9001 -c .storybook -s ./public //-p 端口, -c 配置目录,-s 静态文件目录 //启动后 通过localhost:9001访问</pre> <p>如下是某组件的两种状态,通过属性(userCanBid)传递即可快速的测试出不同状态下的comp,下面看下效果图:</p> <p><img src="https://simg.open-open.com/show/472898659bcca7c363fc00dea54f58c6.gif"></p> <p>(请注意中间有loading状态,其受组件内部state控制)</p> <p>至此,我们完成了storybook基本工作,剩下的内容就是将开发重心放在component样式,组件功能中去。</p> <p>以上仅为我们项目开发中的一个环节,除了上述内容外,实际中我们还需要编写接口文档,客户端渲染检测,浏览器兼容测试,这一系列的工作都需要有一套完整的开发环境,恰巧storybook满足了我们这个开发环节中的需求。这个工具非常有用!</p> <p>使用storybook进行ui的开发,还存在一个重点问题, <strong>组件嵌套</strong> </p> <p> </p> <p> </p> <p>来自:http://div.io/topic/1887</p> <p> </p>
本文由用户 1120101929 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!