Едно от предимствата на използването на React е, че можете да създавате UI компоненти, да ги използвате повторно във вашето приложение и в крайна сметка да избегнете изтичане на код. Все пак е трудно да се създадат напълно независими UI компоненти само с React. Ще трябва да създадете изгледи, които показват тези компоненти, за да ги видите.
Тук се намесва Storybook. Той ви позволява да създавате и тествате UI компоненти в независима среда за изпълнение и в този урок ще научите как да го използвате в React. До края на тази публикация ще сте създали компонент на бутон и сте документирали някои от възможните му състояния в React.
Какво е книга с разкази?
Книга с разкази е инструмент за разработка, който ви позволява да изпълнявате и тествате вашите UI компоненти без пълна React среда. Това прави разработка, управлявана от компоненти по-лесно, защото можете да разработите компонентите изолирано.
С Storybook, след като създадете компонент, можете да създадете множество истории, които определят различните състояния на компонента. За компонент на бутон тези състояния могат да включват първично състояние, вторично състояние, забранено състояние и т.н.
Тъй като Storybook ви позволява да включвате код, когато създавате историите, той може да служи и като инструмент за документиране.
За да използвате Storybook, ще трябва да имате инсталиран Node на вашата машина и да имате основни познания за React.
Създаване на React приложение
За да започнете да използвате Storybook, първо ще създадете React проект и след това създавайте компоненти и техните истории.
Изпълнете следната команда, за да създадете React приложение:
npx създавам-react-app btn-storybook
Това ще генерира папка, наречена btn-storybook с всички зависимости, от които се нуждае приложение на React.
След това, само с още няколко стъпки, можете да инсталирате и стартирате Storybook.
Инсталиране на книга с разкази
Отидете до папката btn-storybook и инсталирайте storybook:
cd btn-книга с приказки
npx книга с разкази иници
Тъй като сте използвали create-react-app, това е единствената команда, която трябва да изпълните, за да настроите Storybook. Storybook ще инсталира всички необходими зависимости и ще извърши цялата необходима конфигурация. Той също така ще създаде няколко шаблонни истории, за да започнете.
След като командата по-горе приключи, стартирайте книга с разкази, като използвате следния код.
книга с разкази за npm run
Това ще отвори таблото за управление на книгата с разкази във вашия браузър. Трябва да изглежда нещо подобно:
Създаване на компонента бутон
В папката ./src създайте папка, наречена Components, и в нея създайте друга папка, наречена Button. Папката Button трябва да е в този път: ./src/Components/Button.
Сега в тази папка създайте бутон и добавете следния код:
импортиране PropTypes от "проп-типове"
функция бутон({ етикет, цвят на фона = "#6B4EFF", цвят = "бяло", borderRadius="48px", граница="нито един"}) {
конст стил = {
Цвят на фона,
подплата: "0,5 rem 1 rem",
цвят,
borderRadius,
граница
}
връщане (
<бутон стил={стил}>
{етикет}
</button>
)
}
Button.propTypes = {
етикет: PropTypes.низ,
Цвят на фона: PropTypes.низ,
цвят: PropTypes.низ,
граница:PropTypes.string,
borderRadius: PropTypes.низ,
}
износпо подразбиране бутон;
Този компонент приема някои React подпори които включват етикета на бутона и неговите стилове. Вие също използвате propTypes, за да проверите типовете на предадените реквизити и да изведете предупреждение, ако използвате грешен тип. Компонентът връща елемент бутон.
Създаване на истории с бутони
Когато инсталирахте Storybook в проекта React, той генерира папка, съдържаща някои примери за истории, наречени истории. Отидете до тази папка и изтрийте всичко в нея. Вие ще създавате историите от нулата.
Ще създадете две истории, представляващи основния бутон и вторичния бутон. Всеки от тези бутони има различен стил, който го отличава от останалите. Ще можете да видите всяка от тях в таблото за управление на Storybook, след като създадете историите.
В папката с истории създайте нов файл, наречен button.stories.js. Важно е да включите .истории преди .js, тъй като това казва на Storybook кой е файл с истории.
Импортирайте компонента Button.
импортиране Бутон от "../Components/Button/Button"
След това експортирайте заглавието на компонента и самия компонент. Имайте предвид, че заглавието не е задължително.
износпо подразбиране {
заглавие: "Компоненти/Бутон",
компонент: бутон,
}
Първата история, която ще създадете, е за бутона Основен. И така, създайте нова функция, наречена Primary, и я експортирайте.
експортиране const Първичен = () =><Цвят на фона на бутона="#6B4EFF" етикет="Първичен"/>
Сега, ако отидете на таблото за управление на Storybook, ще можете да видите изобразения бутон.
За да редактирате визуализирания компонент на живо и да промените състоянието му в таблото за управление на Storybook, ще използвате args. Аргументите ви позволяват да предавате аргументи на Storybook, които при промяна карат компонента да се изобрази повторно.
За да дефинирате аргументите на историята на бутоните, създайте шаблон на функция.
const Шаблон = args =><Бутон {...args}/>
Този шаблон приема аргументи и ги предава като реквизити на компонента Button.
Вече можете да пренапишете историята на Primary, като използвате шаблона, както е показано по-долу.
износконст Основен = Template.bind({})
Primary.args = {
Цвят на фона: "#6B4EFF",
етикет: "Първичен",
}
Ако проверите таблото за управление на Storybook, трябва да видите контроли в долната част. Тези контроли ви позволяват да промените начина на показване на бутона. Можете да промените цвета на фона, цвета на текста, етикета, рамката и радиуса на границата.
Трябва само да промените стойностите на аргументите, за да създадете другите истории. Например, за да създадете вторичен бутон, използвайте следния код.
износконст Вторичен = Template.bind({})
Secondary.args = {
Цвят на фона: "#E7E7FF",
цвят: "#6B4EFF",
етикет: "Втори",
}
На таблото за управление на Storybook навигирайте до различни истории, като щракнете върху тях в страничната лента. Ще видите как се изобразява всеки. Можете да продължите да добавяте още състояния към историите на бутоните, както желаете. Опитайте да добавите схема или схематична история.
Тестване на UI компоненти
Този урок ви даде кратко въведение в използването на Storybook с React UI компоненти. Научихте как да добавите Storybook към проект на React и как да създадете основна история за компонент Button с аргументи.
Може да сте забелязали, че по време на този процес сте тествали как компонентът на бутона се изобразява в различни състояния. Може да пишете повече код, но след като сте написали историите на компонентите, ще сведете до минимум всички грешки, които могат да възникнат при повторно използване на компоненти във вашето приложение. Освен това ще бъде по-лесно да се проследи грешката, ако възникне. Това е красотата на разработката, управлявана от компоненти.
