Docz를 사용해 보았습니다.
9465 단어 DoczJavaScriptstorybook
배경.
이 학습회 듣고 나서 이를 계기로 Docz
Docz 소개
https://www.docz.site/ 등
Docz 피쳐
사용법
Hello World까지.
yarn add -D docz
# or
npm i -D docz
---
name: Hello
---
# Hello world
Hello!
yarn docz dev
# or
npx docz dev
방문Storybook 시작 시 Hello World
http://localhost:3000/
React 구성 요소 포함
---
name: Button
---
import { Playground, PropsTable } from 'docz'
import Button from './Button'
# Button
- ボタンコンポーネント
## Usage
<Playground>
<Button onClick={() => alert('hello!')}>ボタン</Button>
</Playground>
<Playground>
<Button wide onClick={() => alert('hello!')}>ボタン</Button>
</Playground>
## Props
<PropsTable of={Button} />
특징1
<Playground>
에 둘러싸일 때 그림 내용과 jsx 탭을 자동으로 표시합니다 특징2
<PropsTable of={Button} />
Proops의 정보를 자동으로 표 작성// ...省略
// flowの場合
type Props = {
/** 横幅いっぱいにするかどうか */
wide?: boolean,
};
// PropTypesの場合
Button.propTypes = {
/** 横幅いっぱいにするかどうかにするかどうか */
wide: PropTypes.bool,
};
// DefaultPropsはFlowでもPropTypesでも共通
Button.defaultProps = {
wide: false,
};
(참조) Storybook과 비교
@storybook/addon-info
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import Button from './Button';
storiesOf('Button', module)
.addDecorator(withInfo)
.addParameters({
info: {
text: 'ボタンコンポーネント',
inline: true,
},
})
.add('通常パターン', () => (
<Button onClick={action('click!!')}>
{text('label', 'ボタン')}
</Button>
))
.add('幅広パターン', () => (
<Button onClick={action('click')} wide>
{text('label', 'ボタン')}
</Button>
));
총결산
Reference
이 문제에 관하여(Docz를 사용해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ozaki25/items/fdf1e0b52ff1fee26514텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)