React Storybook 시작하기: 구성 요소 카탈로그가 바삭바삭하고 스타일리시한 샌드박스 환경이 될 수 있음

리액트 스토리북은 구성 요소 단위로 샌드박스로 리액트를 개발할 수 있는 개발 환경이다.

Introducing React Storybook — KADIRA VOICE — Medium

kadirahq/react-storybook: Isolate your React UI Component development from the main app

React Storybook의 특징은

샌드박스에서 렌더링을 위해 실제 React Component를 호출합니다.따라서 구성 요소의 다양한 상태 (0개 혹은 새로 도착한 것) 도 코드 디렉터리화 가능성이 매우 적다.또한 action API를 사용하여 어셈블리의 이벤트를 캡처하여 로그에 재생할 수도 있습니다.
컨디션 있는 스타일 매뉴얼은 유지 보수가 까다롭고, 이걸 쓰면 혁신적이잖아요...

iframe 샌드박스에서 구성 요소 분리

모듈은 자동으로 다시 로드됩니다

.

Redux,Relay,Meteor 등도 사용 가능

다양한 유형의 CSS 지원()

빠르고 멋진 UI

프로젝트 내에서 작업하므로 npm 및 babel 등 어플리케이션 환경을 사용할 수 있음

도 정적 파일 서비스

가능

사용자 정의Webpack 또는 플러그인을 추가하여 확장 가능

데모를 더듬다

git clone https://github.com/kadira-samples/react-storybook-demo
npm install
npm run storybook

이것은 Redux에 구현된 TODO 애플리케이션의 데모입니다.
React Storybook이 순조롭게 시작되면http://localhost:9001 방문하십시오.

설치하다.

그럼 실제 자신의 React 프로젝트에 설치해 보세요.

설치@kadira/storybook

필요한 모듈 설치

package.json에 실행 스크립트 추가

npm i --save-dev @kadira/storybook
npm i --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 react react-dom stack-source-map webpack webpack-hot-middleware

package.json

{
  ...
  "scripts": {
    "storybook": "start-storybook -p 9001"
  }
  ...
}

시용하다

이야기 만들기(components/storiies/story.js)

일단 스토리부터.
어디서든 만들 수 있지만 기본적으로 구성 요소와 1:1로 대응하기 때문에 components/stories/ 같은 폴더를 만들어 넣는 것을 추천합니다.
샘플 문서에서 두 가지 버튼이 등록된 스토리를 만들죠.
components/stories/button.js

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button', module)
  .add('with a text', () => (
    <button>My First Button</button>
  ))
  .add('with no text', () => (
    <button></button>
  ));

storiesOf에서 지정한 것은 구성 요소입니다.추가 검사 후.add() 모듈의 상태를 추가합니다.
예를 들어 validateField 이 구성 요소에 대해'입력하지 않음''not valid''valid'세 가지.add()의 느낌.

Story 읽기(.storybook/config.js)

이렇게 하면 .storybook/config.js가 시작된다고 하니 문서를 참고하세요.
.storybook/config.js

import { configure } from '@kadira/storybook';
import 'css/style.css';

function loadStories() {
  require('../components/stories/button');
}

configure(loadStories, module);

loadStories() 방금 제작한 이야기를 도입한다.만약 많은 구성 요소가 있다면, 배열할 수도 있고, 문서에 폴더를 모아서 등록하는 방법을 쓸 수도 있다.
스타일시트를 설정하려면 import 가능하지만 React에는 다양한 CSS의 유파가 있으니 자세한 내용은 문서 읽어주세요.

부팅

npm run storybook

드디어 준비가 됐습니다.
액세스http://localhost:9001가 가능하고 왼쪽button에 표시되면 OK

이벤트 캡처(action()

스토리북에는 구성 요소 이벤트를 포착하는 기능도 탑재됐다.방금의button.js를 다음과 같은 내용으로 고쳐 쓰시오.
components/stories/button.js

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button', module)
  .add('with a text', () => (
    <button onClick={action('click')}>My First Button</button>
  ))
  .add('with no text', () => (
    <button></button>
  ));

텍스트가 첨부된 버튼을 누르면 아래 "ACTION LOGGER"에서 (위) 스트림을 기록할 수 있을 것 같습니다.

직접 만든 구성 요소를 이야기에 로그인

버튼의 샘플에는 자체 제작된 구성 요소가 설치되어 있지 않지만, 일반적인 경우 import 문자로 읽고, 이 이야기 .add() 를 사용하면 됩니다.샘플의 토도 앱에는 4개의 사연이 있는데 사연마다 각자의 특징이 있으니 참고할 수 있을 것 같습니다.

엔지니어와 디자이너의 소통 개선에 도움이 되겠죠?

순조롭게 진행될 수 있을지 모르겠지만 다음은'그건 없어!'이걸 알려주는 걸 깜빡한 예감이 든다.

엔지니어가 필요한 이야기를 작성하여 디자이너에게 전달

디자이너가 이를 디자인하고 인코딩한다

엔지니어가 코드를 구성화

이후 이 이야기에 대한 디자인 변경

또 상태의 패턴과 동작 등은 스토리를 보면 일목요연하니 설명서를 대신해서라도 역할을 할 수 있지 않을까 생각한다.
마지막으로 문서에'이렇게 하면 잘 될 거야'라는 만트라가 있으니 미리 의역해 두자.

구성 요소는 props로 데이터를 전달한다.간편한 분할

UI 구성 요소에서 어플리케이션 종속 코드를 쓰지 마십시오

이야기는 구성 요소 근처에 두세요.components 폴더 중 최적

Meteor를 사용할 때는 스토리를 tests 폴더에 설정하거나 .stories

로 설정해야 합니다.

하나의 이야기에 하나의 구성 요소에 대한 이야기를 써라

이야기에 접두사를 붙이면 추천점(예를 들어 storiesOf('core.Button', module)

이벤트 처리 프로그램의 디버깅은 반드시 사용해야 한다actions()