Реагирование на рукопашный бой + библиотека компонентов сборника рассказов

внешний интерфейс JavaScript React.js Webpack

представлять

Как в процессе разработки библиотеки UI-компонентов удобно отображать компоненты, тестировать компоненты и писать документы? Storybook предоставляет такой инструмент, с помощью которого мы можем легче разрабатывать компоненты пользовательского интерфейса. Недавно я изучал реакцию, на что будет похоже столкновение между реакцией и сборником рассказов. Далее мы начнем с нуля и будем использовать сборник рассказов для создания компонента реакции вручную.

Быстро создавайте реактивную среду

Во-первых, на основеcreate-react-appБыстро создавайте реактивную среду

Сборники рассказов имеют отдельные конфигурации веб-пакетов и отдельные серверы. Его конфигурация веб-пакета похожа на create-react-app.

npm i -g create-react-app
create-react-app storybook-demo
cd storybook-demo
yarn start

Запустите приведенную выше команду в инструменте командной строки, чтобы быстро сгенерировать файл проекта storybook-demo с настроенной средой реагирования, введите файл проекта и запустите сервер веб-пакета через запуск пряжи.Если операция выполнена правильно, браузер автоматически откроет следующая страница:

установить сборник рассказов

После сопоставления среды реагирования установите плагин сборника рассказов.

npm i --save-dev @storybook/react

Настройте сценарии NPM

Как упоминалось ранее, у Storybook есть отдельный сервер, и вы можете добавить соответствующие командные сценарии в сценарии npm, чтобы упростить запуск службы позже.

Открытьpackage.json,существуетscriptsсвойство добавленоstorybookкоманда, как показано ниже:

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

Обратите внимание, что -p 9001 в скрипте указывает, что номер порта для запуска службы 9001, а -c .storybook указывает каталог файла конфигурации.Здесь файл конфигурации устанавливается в корневой каталог..storybookпапка.

Создайте файл конфигурации config.js

Создайте новый каталог .storybook в корневом каталоге проекта и добавьте в него файл config.js. Базовая конфигурация в основном используется для рассказа сборника рассказов, в котором хранятся ваши истории. Мы помещаем истории в каталог src.

// config.js
import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories/index.js');
}

configure(loadStories, module);

//

создавать истории

Далее идут рассказы, которые являются сердцем сборника рассказов. Откройте каталог src, создайте папку stories и папку компонентов. В компонентах создайте компонент Button.js и добавьте button.stories в истории

// .storybook/config.js中修改路径
import { configure } from '@storybook/react';

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

configure(loadStories, module);

// src/stories/button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import {Button} from '../components/Button';

storiesOf('Button', module)
  .add('基本用法',() => (
    <Button>按钮</Button>
  ))
  
// src/components/Button.js
import React from 'react'

export class Button extends React.Component{
  constructor (props) {
    super(props)    
  }

  render () {
    return (
      <button style={{backgroundColor: '#fff', border: '1px solid #ccc'}}>{this.props.children}</button>
    )
  }
}

Здесь в config.js введена только история кнопок, если компонентов много, есть ли способ импортировать истории пачками? можно использоватьrequire.contextметод, здесь папка src/stories начинается с.stories.jsМассовый импорт файлов с суффиксами.

require.contextЭто метод веб-пакета, конкретная ссылкаrequire.context

import { configure } from '@storybook/react';

const req = require.context('../src/stories', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

Запустить сервис сборника рассказов

yarn storybook

Откройте http://localhost:9001 в браузере, после успеха появится следующая страница, доказывающая, что вы преуспели!

Добавить дополнительную информацию о компонентах

Для того, чтобы сформировать полный компонентный документ, необходимо отображать различную информацию о компоненте, а показанной выше информации далеко не достаточно. Для этого можно установить плагин addon-info. Для получения дополнительной информации о плагине см.addon-info

npm i -D @storybook/addon-info

Представлено в файле button.stories.js.withInfoМетод, параметр может быть строкой, поддержка уценки

// src/stories/button.stories.js
import { withInfo } from '@storybook/addon-info';

storiesOf('Button', module)
  .add('基本用法',
    withInfo(`
      description or documentation about my component, supports markdown
    
      ~~~js
      <Button>测试按钮</Button>
      ~~~
    
    `)(() =>
      <Button>测试按钮</Button>
    )
  )

В этот момент страница браузера обновляется следующим образом. Нажмите кнопку «Показать информацию» справа, чтобы просмотреть информацию о добавленных компонентах.

использовать уценку

Информацию о компонентах можно извлечь и поместить в файл md. Перейдите непосредственно к коду:

// src/stories/button.md
description or documentation about my component, supports markdown
<Button>测试按钮</Button>

// src/stories/button.stories.js
import { withInfo } from '@storybook/addon-info';
import button from './button.md'

storiesOf('Button', module)
  .add('基本用法',
    withInfo({
      markdown: button
    })(() =>
      <Button>测试按钮</Button>
    )
  )

Отображение информации о компонентах на одной странице

Как напрямую отображать информацию о компонентах на текущей странице? Добавить в конфигурацию withInfoinline:true

storiesOf('Button', module)
  .add('基本用法',
    withInfo({
      inline: true,
      markdown: button
    })(() =>
      <Button>测试按钮</Button>
    )
  )

наконец

Есть еще много функций сборника рассказов, и заинтересованные друзья могут изучить его дальше.

Официальный сайт сборника рассказов:storybook

Другие дополнительные плагины могут относиться к:коллекция аддон плагинов

Категории