手动建立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 ...
随机推荐
- ASP.NET MVC4 MVC 当前上下文中不存在名称“Scripts”
Views目录下的web.config文件 <pages>下<namespaces>下 加入<add namespace="System.Web.Optimiz ...
- (10)java基础知识-字符串
String s和 new String 的区别 String s1="hello"; String s2= new String("hello"); Stri ...
- string那些事之replace
/* 用法一: 用str替换指定字符串从起始位置pos开始 长度为为len的字符串 string &replace(size_t pos, size_t len, const string&a ...
- King of Karaoke
King of Karaoke Time Limit: 1 Second Memory Limit: 65536 KB It's Karaoke time! DreamGrid is performi ...
- POJ 2763 Housewife Wind(树链剖分)(线段树单点修改)
Housewife Wind Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 10378 Accepted: 2886 D ...
- Gmail进程信息转储分析工具pdgmail
Gmail进程信息转储分析工具pdgmail 进程信息转储(Process Memory Dump)是数字取证的重要方式.通过分析对应进程的信息转储,可以获取大量的信息.Kali Linux提供一 ...
- String&&StringBuilder&&StringBuffer
在java中提供三个操作字符串的类:String,StringBuilder,StringBuffer (1)什么是字符串:多个字符的集合 (2)String 是内容不可变的字符串.(底层使用了一个不 ...
- How to copy projects into workspace of eclipse after importing the project?
在eclipse中如果已经导入了一个别处的项目但导入时没有选“copy projects into workspace”怎么办? 答案是删掉该项目重新导入... http://stackoverflo ...
- PHP安全相关的配置
PHP作为一门强大的脚本语言被越来越多的web应用程序采用,不规范的PHP安全配置可能会带来敏感信息泄漏.SQL注射.远程包含等问题,规范的安全配置可保障最基本的安全环境.下面我们分析几个会引发安全问 ...
- cocurrent包semaphore信号量
semaphore英[ˈseməfɔ:(r)]美[ˈsɛməˌfɔr, -ˌfor]n. 臂板信号系统,(铁道)臂板信号装置; Semaphore 用法 信号量主要有两种用途: 保护一个重要(代码)部 ...