Storybookことはじめ（React編）

https://gyazo.com/693c223891831c18abe6d233e428cad0

npm

package.json

scriptsに以下追加

"storybook": "start-storybook -p 9001 -c .storybook"

code:package.json

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"storybook": "start-storybook -p 9001 -c .storybook"

},

config file

code:.storybook/config.js

import { configure } from '@storybook/react';

function loadStories() {

require('../stories/index.js'); //対象のファイルを指定

}

configure(loadStories, module);

Story file

code:stories/index.js

import React from 'react';

import { storiesOf } from '@storybook/react';

import { action } from '@storybook/addon-actions';

storiesOf('Button', module)

.add('with text', () => (

<button onClick={action('clicked')}>Hello Button</button>

))

.add('with some emoji', () => (

<button onClick={action('clicked')}>😀 😎 👍 💯</button>

));

Run

code:zsh

storybooks@1.0.0 storybook /xxxxx/xxxxxx/xxxxx/my-storybook-project

start-storybook -p 9001 -c .storybook

@storybook/react v3.2.4

=> Using default webpack setup based on "Create React App".

webpack built d241cc2eb44f804346e9 in 17197ms

https://gyazo.com/5b45d785caa8f16aa1b492f0dfd7b979