개요

React에서 Storybook을 사용하려고 여러 결과를 조사했습니다.
설정이 번거로울 줄 알았는데 Create React App부터 추가가 아주 간단했다.

환경 구조

이번yarn고릴라만 들어가자.

yarn global add create-react-app
yarn create react-app sample-storybook
cd sample-storybook
yarn add storybook
yarn storybook

여기 와서 "사과로 만든 프로젝트가 멈췄어!"
이렇게 마음대로 해석하면 좋은 느낌을 준다.매우 편리합니다.
다시 yarn storybook걸면 http://localhost:9009스토리북으로
서버가 시작됩니다.그게 다야.

구성 요소 추가

Material-UI의 단추를 추가해 보세요.
(사실 나는 이것이 자제 성분을 첨가하는 사용 방법이라고 생각한다.)

yarn add @material-ui/core

src/stories/index.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

+ import MaterialButton from '@material-ui/core/Button';

storiesOf('Welcome', module).add('to Storybook', () => (
  <Welcome showApp={linkTo('Button')} />
));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
  ))
+  .add('material', () => (
+    <MaterialButton
+      variant="contained"
+      color="primary"
+      onClick={action('clicked')}
+    >
+      Primary
+    </MaterialButton>
+  ));

핫 리로드를 통해 화면이 업데이트되었습니다.좋다.