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的更多相关文章

  1. 手动建立mapping以及增加属性

    只能创建index时手动建立mapping,或者新增field mapping,但是不能update field mapping 1.手动建立mappingPUT /website{ "ma ...

  2. Oracle XE手动建立数据库实例

    参考资料为: [Oracle XE系列之三]使用OMF方式手工创建Oracle XE数据库 - 王立夫 - 博客园http://www.cnblogs.com/opfo/p/5056122.html ...

  3. Quarter square 查找表乘法器,手动建立rom

    建立一个C的范围为0~255,内容是(C)2/4的查表 占用256个存储空间,但可以计算出+-127的两个数之积.传统算法需要至少127×127个存储空间. 查找表模块的建立: module lut_ ...

  4. keystone 手动建立租户,用户,角色,服务,端口

    建立租户: root@cloud:~# keystone tenant-create --name=admin WARNING: Bypassing authentication using a to ...

  5. 手动建立数据库连接的BaseDAO

    package com.chinasoft.julong.dao; import java.sql.Connection; import java.sql.DriverManager; import ...

  6. Linux中yum手动安装、手动建立仓库文件夹关联实现关联包自动安装、yum相关命令使用

               yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指 ...

  7. LINUX 手动建立SWAP文件及删除

    原文:http://blog.itpub.net/7728585/viewspace-670175/ 1. 确定swap文件的大小,单位为M.将该值乘以1024得到块大小.例如,64MB的swap文件 ...

  8. 【转】LINUX 手动建立SWAP文件及删除

    如何在红帽 企业版Linux系统中添加swap文件? 解决方法: 1. 确定swap文件的大小,单位为M.将该值乘以1024得到块大小.例如,64MB的swap文件的块大小是65536. 2. 在ro ...

  9. Ubuntu14.04下手动建立快捷方式

    先在桌面创建一个文件:文件内容如下 [Desktop Entry]Encoding=UTF-8Name=eclipseComment=eclipse ideExec=/home/mars/eclips ...

随机推荐

  1. corosync基本使用

    相关rpm: corosync-2.4.0-4.el6.x86_64.rpm The Corosync Cluster Engine and Application Programming Inter ...

  2. poj 1265&&poj 2954(Pick定理)

    Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5811   Accepted: 2589 Description ...

  3. POJ 3468.A Simple Problem with Integers-线段树(成段增减、区间查询求和)

    POJ 3468.A Simple Problem with Integers 这个题就是成段的增减以及区间查询求和操作. 代码: #include<iostream> #include& ...

  4. 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 ...

  5. 在apache2.4.6中配置虚拟主机支持web.py

    web.py 是一个简单好用的python web框架. (http://webpy.org/) apache httpd是一款开源配置简单的web容器. (http://apache.org/) 假 ...

  6. (寒假集训)Mooo Moo (完全背包)

    Mooo Moo 时间限制: 1 Sec  内存限制: 64 MB提交: 5  解决: 4[提交][状态][讨论版] 题目描述 Farmer John has completely forgotten ...

  7. kibana- Timelion

    1. Visualize 新建图形 2. 选择图形类型 3. 选择索引 4. 设置Timelion表达式 5. 保存图形

  8. Filter过滤器笔记1

    Filter:过滤器 Filter主要用于对用户请求进行预处理,也可以对HttpServletResponse进行后处理,是个典型的处理链.使用Filter的完整流程是:Filter对用户请求进行预处 ...

  9. (转)Unity3D 开发优秀技术资源汇总

    原文:http://www.j2megame.com/html/xwzx/ty/3179.html Unity3D 博客 http://www.dapp.com.br/  by Dapp http:/ ...

  10. 前端JavaScript实现跨域的方式(转)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...