Одно из преимуществ использования React заключается в том, что вы можете создавать компоненты пользовательского интерфейса, повторно использовать их во всем приложении и, в конечном счете, избежать оттока кода. Тем не менее, создать полностью независимые компоненты пользовательского интерфейса только с помощью React сложно. Вам нужно будет создать представления, которые отображают эти компоненты, чтобы увидеть их.

Здесь на помощь приходит сборник рассказов. Он позволяет создавать и тестировать компоненты пользовательского интерфейса в независимой среде выполнения, и в этом руководстве вы узнаете, как использовать его в React. К концу этого поста вы создадите компонент кнопки и задокументируете некоторые из его возможных состояний в React.

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

сборник рассказов — это инструмент разработки, который позволяет запускать и тестировать компоненты пользовательского интерфейса без полной среды React. Это делает разработка на основе компонентов легче, потому что вы можете разрабатывать компоненты изолированно.

instagram viewer

С помощью Storybook после создания компонента вы можете создавать несколько историй, определяющих различные состояния компонента. Для компонента кнопки эти состояния могут включать в себя основное состояние, вторичное состояние, отключенное состояние и т. д.

Поскольку Storybook позволяет вам включать код при создании историй, он также может служить инструментом документации.

Чтобы использовать Storybook, вам необходимо установить Node на свой компьютер и иметь базовое представление о React.

Создание React-приложения

Чтобы начать использовать сборник рассказов, сначала вы создадите проект React а затем создавать компоненты и их истории.

Выполните следующую команду, чтобы создать приложение React:

npx Создайте-react-app btn-сборник рассказов

Это создаст папку с именем btn-storybook со всеми зависимостями, которые нужны приложению React.

Далее, всего за несколько шагов, вы можете установить и запустить Storybook.

Установка сборника рассказов

Перейдите в папку btn-storybook и установите сборник рассказов:

CD btn-рассказ
инициализация сборника рассказов npx

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

После завершения выполнения приведенной выше команды запустите сборник рассказов, используя следующий код.

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

Это откроет панель инструментов сборника рассказов в вашем браузере. Это должно выглядеть примерно так:

Создание компонента кнопки

В папке ./src создайте папку Components, а в ней еще одну папку с названием Button. Папка Button должна находиться по этому пути: ./src/Components/Button.

Теперь в этой папке создайте кнопку и добавьте следующий код:

импорт PropTypes из "типы реквизита"
функциональная кнопка({метка, backgroundColor = "#6B4EFF", цвет = "белый", Радиус границы ="48 пикселей", граница ="никто"}) {
константа стиль = {
 фоновый цвет,
 заполнение: "0,5бэр 1бэр",
 цвет,
 границаРадиус,
 граница
 }
возвращаться (
<стиль кнопки = {стиль}>
 {этикетка}
</button>
 )
}
Кнопка.propTypes = {
этикетка: PropTypes.нить,
фоновый цвет: PropTypes.нить,
цвет: PropTypes.нить,
граница:PropTypes.string,
границаРадиус: PropTypes.нить,
}
экспортдефолт Кнопка;

Этот компонент принимает некоторые Реагировать на реквизит которые включают метку кнопки и ее стили. Вы также используете propTypes для проверки типов переданных реквизитов и выдачи предупреждения, если вы используете неправильный тип. Компонент возвращает элемент кнопки.

Создание историй кнопок

Когда вы установили Storybook в проект React, он создал папку, содержащую несколько примеров историй, с именем рассказы. Перейдите в эту папку и удалите все в ней. Вы будете создавать истории с нуля.

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

В папке с историями создайте новый файл с именем button.stories.js. Важно включить .рассказы перед .js, так как это то, что сообщает Storybook, который является файлом историй.

Импортируйте компонент «Кнопка».

импорт Кнопка из "../Компоненты/Кнопка/Кнопка"

Далее экспортируйте название компонента и сам компонент. Обратите внимание, что заголовок является необязательным.

экспортдефолт {
 заглавие: "Компоненты/кнопка",
 компонент: Кнопка,
}

Первая история, которую вы создадите, предназначена для основной кнопки. Итак, создайте новую функцию с именем Primary и экспортируйте ее.

экспортировать константу Первичный = () =><Цвет фона кнопки="#6B4EFF" метка ="Начальный"/>

Теперь, если вы перейдете на панель инструментов Storybook, вы сможете увидеть визуализированную кнопку.

Чтобы отредактировать визуализированный компонент в реальном времени и изменить его состояние на панели инструментов Storybook, вы будете использовать args. Арги позволяют передавать аргументы в Storybook, изменение которых приводит к повторному рендерингу компонента.

Чтобы определить аргументы истории кнопки, создайте шаблон функции.

const Шаблон = аргументы =><Кнопка {...аргументы}/>

Этот шаблон принимает аргументы и передает их в качестве реквизита компоненту Button.

Теперь вы можете переписать основную историю, используя шаблон, как показано ниже.

экспортконстанта Первичный = Template.bind({})
Первичный.аргументы = {
 фоновый цвет: "#6B4EFF",
 этикетка: "Начальный",
}

Если вы проверите панель инструментов Storybook, вы должны увидеть элементы управления внизу. Эти элементы управления позволяют изменить способ отображения кнопки. Вы можете изменить цвет фона, цвет текста, метку, границу и радиус границы.

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

экспортконстанта Вторичный = Template.bind({})
Secondary.args = {
 фоновый цвет: "#E7E7FF",
 цвет: "#6B4EFF",
 этикетка: "Среднее",
}

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

Тестирование компонентов пользовательского интерфейса

Этот учебник дал вам краткое введение в использование Storybook с компонентами пользовательского интерфейса React. Вы узнали, как добавить Storybook в проект React и как создать базовую историю для компонента Button с аргументами.

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