В этом блоге мы поговорим о том, что такое сборник рассказов, почему мы должны его использовать и как настроить сборник рассказов для вашего проекта React с помощью сборника рассказов и приложения create-react-app.

Так что же такое сборник рассказов? Storybook - это инструмент с открытым исходным кодом, который используется для разработки компонентов пользовательского интерфейса изолированно для React, Vue и Angular.

Почему мы должны использовать Storybook?

В наши дни создание пользовательских интерфейсов сложнее. Вы несете ответственность за макет, логику, персонализацию, производительность, интернационализацию, доступность, мобильные устройства и браузер. И все это должно работать без сбоев.

Компоненты решают некоторые из этих проблем, но создают и некоторые. Они зависят друг от друга. Изменения в одном могут в конечном итоге разрушить все. И слежения за большим нет. компонентов сложно. И вы в конечном итоге заново изобретаете одно и то же снова и снова.

Storybook решает эту проблему, потому что вы можете создавать компоненты пользовательского интерфейса изолированно. Разработчиков не отвлекают ненадежные данные, данные для входа в систему или незаконченный API. Разработчики могут сосредоточиться на труднодоступных вариантах использования. Это обеспечивает возможность повторного использования. Он помогает вам сотрудничать с дизайнерами, руководителями проектов и другими разработчиками.
Вы можете просматривать компоненты и их варианты использования в одном месте. И легко добавить компоненты прямо в ваше приложение.

"Abstraction, Isolation, Autonomy" - Norbert de Langen

Хорошая абстракция - ключ к хорошему программному обеспечению. Если вы создаете абстракции там, где не должны, вы создаете сложность. Если вы не создаете абстракции там, где должны, вы создаете сложность.

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

Особенности сборника рассказов

  • Среда разработки пользовательского интерфейса для компонентов пользовательского интерфейса
  • Вы можете визуализировать различные состояния ваших компонентов пользовательского интерфейса.
  • Вы можете разрабатывать их в интерактивном режиме
  • Он работает вне вашего приложения.
  • Вы можете разрабатывать без конкретных зависимостей и требований приложения.

Установка и настройка

Давайте сначала установим сборник рассказов глобально.

npm i -g @storybook/cli

Теперь давайте создадим приложение для реагирования с помощью create-react-app.

cd ~
create-react-app my-storybook
cd my-storybook

Установите сборник рассказов в свое приложение для реагирования. Команда getstorybook добавляет поддержку сборника рассказов в ваш проект на основе «Create React App».

cd my-storybook
getstorybook

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

cd my-storybook
yarn run storybook

Затем вы можете создать каталог с именем components внутри каталога src и добавить свои компоненты в Stories /index.js следующим образом:

storiesOf('Header', module)
    .add('header', () => <Header/>);
    .add('footer', () => <Header/>);

Таким образом, технически история - это функция, которая возвращает то, что можно отобразить на экране. Сборник рассказов может состоять из множества историй для многих компонентов.

Действия

События можно увидеть в действии

Структура каталогов

Дополнения:

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

Мы узнаем больше о дополнениях в следующих блогах.