手动建立storybook
1. Add @storybook/react
npm i --save-dev @storybook/react
2. Add react, react-dom, and babel-core
npm i --save react react-dom
npm i --save-dev babel-core
3. Then add the following NPM script to your package json in order to start the storybook later in this guide
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
}
4. Create the config file
To do that, simply create a file at .storybook/config.js
with the following content:
import { configure } from '@storybook/react'; function loadStories() {
require('../stories/index.js'); // You can require as many stories as you need.
}
configure(loadStories, module);
5. Write your stories
Now you can write some stories inside the ../stories/index.js
file, like this:
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from '../components/Button'; storiesOf('Button', module)
.add('with text', () => (
<Button onClick={action('clicked')}>Hello Button</Button>
))
.add('with some emoji', () => (
<Button onClick={action('clicked')}><span role="img" aria-label="so cool">手动建立storybook的更多相关文章
- 手动建立mapping以及增加属性
只能创建index时手动建立mapping,或者新增field mapping,但是不能update field mapping 1.手动建立mappingPUT /website{ "ma ...
- Oracle XE手动建立数据库实例
参考资料为: [Oracle XE系列之三]使用OMF方式手工创建Oracle XE数据库 - 王立夫 - 博客园http://www.cnblogs.com/opfo/p/5056122.html ...
- Quarter square 查找表乘法器,手动建立rom
建立一个C的范围为0~255,内容是(C)2/4的查表 占用256个存储空间,但可以计算出+-127的两个数之积.传统算法需要至少127×127个存储空间. 查找表模块的建立: module lut_ ...
- keystone 手动建立租户,用户,角色,服务,端口
建立租户: root@cloud:~# keystone tenant-create --name=admin WARNING: Bypassing authentication using a to ...
- 手动建立数据库连接的BaseDAO
package com.chinasoft.julong.dao; import java.sql.Connection; import java.sql.DriverManager; import ...
- Linux中yum手动安装、手动建立仓库文件夹关联实现关联包自动安装、yum相关命令使用
yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指 ...
- LINUX 手动建立SWAP文件及删除
原文:http://blog.itpub.net/7728585/viewspace-670175/ 1. 确定swap文件的大小,单位为M.将该值乘以1024得到块大小.例如,64MB的swap文件 ...
- 【转】LINUX 手动建立SWAP文件及删除
如何在红帽 企业版Linux系统中添加swap文件? 解决方法: 1. 确定swap文件的大小,单位为M.将该值乘以1024得到块大小.例如,64MB的swap文件的块大小是65536. 2. 在ro ...
- Ubuntu14.04下手动建立快捷方式
先在桌面创建一个文件:文件内容如下 [Desktop Entry]Encoding=UTF-8Name=eclipseComment=eclipse ideExec=/home/mars/eclips ...
随机推荐
- corosync基本使用
相关rpm: corosync-2.4.0-4.el6.x86_64.rpm The Corosync Cluster Engine and Application Programming Inter ...
- poj 1265&&poj 2954(Pick定理)
Area Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5811 Accepted: 2589 Description ...
- POJ 3468.A Simple Problem with Integers-线段树(成段增减、区间查询求和)
POJ 3468.A Simple Problem with Integers 这个题就是成段的增减以及区间查询求和操作. 代码: #include<iostream> #include& ...
- Codeforces Round #445 A. ACM ICPC【暴力】
A. ACM ICPC time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- 在apache2.4.6中配置虚拟主机支持web.py
web.py 是一个简单好用的python web框架. (http://webpy.org/) apache httpd是一款开源配置简单的web容器. (http://apache.org/) 假 ...
- (寒假集训)Mooo Moo (完全背包)
Mooo Moo 时间限制: 1 Sec 内存限制: 64 MB提交: 5 解决: 4[提交][状态][讨论版] 题目描述 Farmer John has completely forgotten ...
- kibana- Timelion
1. Visualize 新建图形 2. 选择图形类型 3. 选择索引 4. 设置Timelion表达式 5. 保存图形
- Filter过滤器笔记1
Filter:过滤器 Filter主要用于对用户请求进行预处理,也可以对HttpServletResponse进行后处理,是个典型的处理链.使用Filter的完整流程是:Filter对用户请求进行预处 ...
- (转)Unity3D 开发优秀技术资源汇总
原文:http://www.j2megame.com/html/xwzx/ty/3179.html Unity3D 博客 http://www.dapp.com.br/ by Dapp http:/ ...
- 前端JavaScript实现跨域的方式(转)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...