Я слышал части о Storybook от множества друзей, которые либо работают, либо работают в стартапе, потратив около половины дня на правильную настройку и понимание правильного инструмента разработки. . Я настоятельно рекомендую его всем разработчикам и командам React по следующей причине:
- Storybook работает вне вашего приложения, это позволяет вам разрабатывать компоненты пользовательского интерфейса изолированно.
- Это может улучшить повторное использование компонентов, возможность тестирования и скорость разработки.
- Быстрая разработка, не беспокоясь о зависимостях конкретного приложения.
1- Установить
$ npm i -g @storybook/cli
$ cd my-react-app
$ getstorybook
2- Сделайте правильную конфигурацию
В git commit задействовано 5 конфигурационных файлов, все они генерируются getstorybook
CLI. Тот, на который я потратил немного больше времени, - этоwebpack.config.js
, поскольку в цели используется css-модуль.
Целевые компоненты
Целевой компонент должен быть простой функцией, возвращающей 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