Я слышал части о Storybook от множества друзей, которые либо работают, либо работают в стартапе, потратив около половины дня на правильную настройку и понимание правильного инструмента разработки. . Я настоятельно рекомендую его всем разработчикам и командам React по следующей причине:

  • Storybook работает вне вашего приложения, это позволяет вам разрабатывать компоненты пользовательского интерфейса изолированно.
  • Это может улучшить повторное использование компонентов, возможность тестирования и скорость разработки.
  • Быстрая разработка, не беспокоясь о зависимостях конкретного приложения.

(По сборнику рассказов)

1- Установить

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

2- Сделайте правильную конфигурацию

В git commit задействовано 5 конфигурационных файлов, все они генерируются getstorybook CLI. Тот, на который я потратил немного больше времени, - этоwebpack.config.js, поскольку в цели используется css-модуль.

.storybook/config.js

.storybook/webpack.config.js

./package.json

./stories/index.js

Целевые компоненты

Целевой компонент должен быть простой функцией, возвращающей HTML Elements / React.Component.

const Hello = ({ onClick, message }) => {
  return (
    <div>
      <h1 className={classNames(style['title'])}>{ message }</h1
><button onClick={onClick}>Click</button>
    </div>
  )
}
Hello.propTypes = {
  onClick: PropTypes.func.isRequired,
  message: PropTypes.string.isRequired
}
export default Hello

Запустить

$ npm i --save-dev @storybook/react
$ npm run storybook

открыть браузер localhost:6006

Исправление проблем

Больше всего времени было потрачено на устранение этой проблемы:
- sh: start-storybook: команда не найдена

После глобальной установки сборника рассказов и создания необходимой конфигурации с помощью getstorybook отображается ошибка:

sh: start-storybook: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] storybook: start-storybook -p 6006

решение:

$ npm i --save-dev @storybook/react
$ npm run storybook

Ссылка

Https://github.com/storybooks/storybook/blob/master/README.md

Https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6