삼행

범용 React 구성 요소 제작

어디서 사용했는지 잘 모르겠어

Storybook으로 카탈로그 만들기

Storybook 소개

Storybook - UI dev environment you'll love to use

구성 요소 디렉터리 같은 것을 표시하는 도구입니다.명령을 누르면 서버에서 좋은 구성 요소 표시를 시작합니다. 웹 브라우저에서 우리가 만든 React 구성 요소의 디렉터리를 볼 수 있습니다.

배경.

스토리북을 도입하기 전에 위키로 관리하려고 했지만 실패했다.Storybook이 좋다는 말을 듣고 보니 확실히 괜찮은 것 같아서 해 봤어요.

시작 방법

명령을 내리다

Storybook의 첫 페이지에 표시된 대로 아래에서 진행할 수 있습니다.

npm i -g @storybook/cli
cd my-react-app
getstorybook

자신의 프로젝트 디렉터리에 getstorybook 명령을 직접 입력하면storybook을 마음대로 설정할 수 있기 때문에 어떤 문제도 고려할 필요가 없다.덧붙이면 구체적으로 설정 파일 등을 만들어 package.json에 명령을 추가한다.
즉석에서 아래를 치면 서버가 시작됩니다.

npm run storybook

구성 요소 설정

getstorybook 시위 행진의 구성 요소가 놓인 상태에서storybook 서버 같은 것이 움직이기 때문에 그 구성 요소를 모방하면 된다.잠깐 놓을게요.
my-react-app/stories/index.stories.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 LikeButton from '../app/javascript/components/common/LikeButton';

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

// デモで最初から置かれているやつ
storiesOf('Button(Demo)', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀) 😎😀 👍😎 💯👍</Button>);

// 上のデモを真似て追加
storiesOf('LikeButton', module)
  .add('いいね済み, 10いいね', () => {
    return (
      <LikeButton
        liked={true}
        likeCount={10}
        onLike={() => {} }
        onUnlike={() => {} }
      />
    );
  });

순조롭게 진행되는 것은 느껴지지 않지만 사이드바에 먼저 추가하고 클릭하면 표시된다.

정적 파일 전송

그림이 들어가지 않았기 때문에 CSS가 구성 요소에 없습니다.둘 다 문서에 쓰여 있는 것 같아서 보고 수정할게요.

이미지

Serving Static Files

이미지에 관해서는 이번에는 어셈블리에서 참조하는 아이콘 이미지./public의 느낌이므로 위에서 설명한 대로 package.json를 다음과 같이 수정하면 됩니다.
package.json

- start-storybook -p 6006
+ start-storybook -s ./public -p 6006

다시npm run storybook 잘 나왔어요.

CSS

다음은 CSS.구성 요소에서 스타일이 닫혔으면 좋겠지만 Bootstrap3과 같은 CSS 프레임워크가 디자인을 실현했다면 그 CSS를 맞혀야 합니다.
Add Custom Head Tags에 적힌 바와 같이 preview-head.html 이 파일로 헤드 탭에 HTML을 추가하면 됩니다.이번에는 CSS 다운로드이기 때문에 Bootstrap과 다양한 스타일application.css이 있다면 링크 라벨로 그걸 읽으면 OK.
.storybook/preview-head.html

<link rel="stylesheet" media="all" href="/assets/application.css" />

의도대로 스타일을 반영했다.

총결산

만약 이 요점에 따라 구성 요소를 배열한다면, "사용할 수 있는 구성 요소가 있습니까?"라고 대충 확인할 수 있지 않습니까?또 다른 할 수 있는 일이 있는 것 같아서 더듬으면서 여기서 추모하고 싶어요.