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. ASP.NET MVC4 MVC 当前上下文中不存在名称“Scripts”

    Views目录下的web.config文件 <pages>下<namespaces>下 加入<add namespace="System.Web.Optimiz ...

  2. (10)java基础知识-字符串

    String s和 new String 的区别 String s1="hello"; String s2= new String("hello"); Stri ...

  3. string那些事之replace

    /* 用法一: 用str替换指定字符串从起始位置pos开始 长度为为len的字符串 string &replace(size_t pos, size_t len, const string&a ...

  4. King of Karaoke

    King of Karaoke Time Limit: 1 Second Memory Limit: 65536 KB It's Karaoke time! DreamGrid is performi ...

  5. POJ 2763 Housewife Wind(树链剖分)(线段树单点修改)

    Housewife Wind Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 10378   Accepted: 2886 D ...

  6. Gmail进程信息转储分析工具pdgmail

    Gmail进程信息转储分析工具pdgmail   进程信息转储(Process Memory Dump)是数字取证的重要方式.通过分析对应进程的信息转储,可以获取大量的信息.Kali Linux提供一 ...

  7. String&&StringBuilder&&StringBuffer

    在java中提供三个操作字符串的类:String,StringBuilder,StringBuffer (1)什么是字符串:多个字符的集合 (2)String 是内容不可变的字符串.(底层使用了一个不 ...

  8. How to copy projects into workspace of eclipse after importing the project?

    在eclipse中如果已经导入了一个别处的项目但导入时没有选“copy projects into workspace”怎么办? 答案是删掉该项目重新导入... http://stackoverflo ...

  9. PHP安全相关的配置

    PHP作为一门强大的脚本语言被越来越多的web应用程序采用,不规范的PHP安全配置可能会带来敏感信息泄漏.SQL注射.远程包含等问题,规范的安全配置可保障最基本的安全环境.下面我们分析几个会引发安全问 ...

  10. cocurrent包semaphore信号量

    semaphore英[ˈseməfɔ:(r)]美[ˈsɛməˌfɔr, -ˌfor]n. 臂板信号系统,(铁道)臂板信号装置; Semaphore 用法 信号量主要有两种用途: 保护一个重要(代码)部 ...