手動創建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">😀 😎 👍 💯</span></Button>
  ));   

6.Run your Storybook

npm run storybook

Reference: https://storybook.js.org/basics/guide-react/#create-the-config-file