Једна од предности коришћења Реацт-а је да можете креирати компоненте корисничког интерфејса, поново их користити у целој апликацији и на крају избећи одлив кода. Ипак, тешко је створити потпуно независне компоненте корисничког интерфејса само са Реацт-ом. Мораћете да креирате приказе који приказују ове компоненте да бисте их видели.
Овде долази књига прича. Омогућава вам да креирате и тестирате компоненте корисничког интерфејса у независном окружењу за извршавање, а у овом водичу ћете научити како да га користите у Реацт-у. До краја овог поста, креираћете компоненту дугмета и документовати нека од њених могућих стања у Реацт-у.
Шта је књига прича?
Књига прича је развојни алат који вам омогућава да покренете и тестирате своје компоненте корисничког интерфејса без комплетног Реацт окружења. Ово прави развој вођен компонентама лакше јер компоненте можете развити изоловано.
Уз Сторибоок, када креирате компоненту, можете креирати више прича које дефинишу различита стања компоненте. За компоненту дугмета, ова стања могу укључивати примарно стање, секундарно стање, онемогућено стање и тако даље.
Пошто књига прича омогућава укључивање кода приликом креирања прича, може послужити и као алат за документацију.
Да бисте користили Сторибоок, мораћете да имате инсталиран Ноде на вашој машини и да имате основно разумевање Реацт-а.
Креирање Реацт апликације
Да бисте почели да користите Сторибоок, прво ћете креирати Реацт пројекат а затим креирају компоненте и њихове приче.
Покрените следећу команду да бисте креирали Реацт апликацију:
нпк Креирај-реацт-апп бтн-сторибоок
Ово ће генерисати фасциклу под називом бтн-сторибоок са свим зависностима које Реацт апликација треба.
Затим, са само још неколико корака, можете да инсталирате и покренете Сторибоок.
Инсталирање Сторибоок-а
Идите до директоријума бтн-сторибоок и инсталирајте књигу прича:
цд бтн-сторибоок
нпк књига прича инит
Пошто сте користили апликацију цреате-реацт-апп, ово је једина команда коју треба да покренете да бисте подесили Сторибоок. Сторибоок ће инсталирати све потребне зависности и извршити сву потребну конфигурацију. Такође ће створити неке шаблонске приче да бисте започели.
Када се горња команда заврши, покрените књигу прича користећи следећи код.
нпм рун књига прича
Ово ће отворити контролну таблу књиге прича у вашем претраживачу. Требало би да изгледа отприлике овако:
Креирање компоненте дугмета
У фасцикли ./срц креирајте фасциклу под називом Компоненте иу њој направите другу фасциклу под називом Буттон. Фасцикла Буттон треба да буде на овој путањи: ./срц/Цомпонентс/Буттон.
Сада, у овој фасцикли, креирајте дугме и додајте следећи код:
увоз ПропТипес из "проп-типови"
функцијско дугме({ лабел, бацкгроундЦолор = "#6Б4ЕФФ", боја = "бео", бордерРадиус="48пк", бордер="ниједан"}) {
конст стил = {
боја позадине,
паддинг: "0.5рем 1рем",
боја,
бордерРадиус,
граница
}
повратак (
<дугме стиле={стиле}>
{етикета}
</button>
)
}
Буттон.пропТипес = {
етикета: ПропТипес.низ,
боја позадине: ПропТипес.низ,
боја: ПропТипес.низ,
граница:ПропТипес.стринг,
бордерРадиус: ПропТипес.низ,
}
извозУобичајено Буттон;
Ова компонента прихвата неке Реацт пропс који укључују ознаку дугмета и његове стилове. Такође користите пропТипе да проверите типове пропс прослеђених и да подигнете упозорење ако користите погрешан тип. Компонента враћа елемент дугмета.
Креирање прича о дугмадима
Када сте инсталирали Сторибоок у Реацт пројекат, он је генерисао фасциклу која садржи неке примере прича, под називом приче. Идите до тог фолдера и избришите све у њему. Ви ћете стварати приче од нуле.
Направићете две приче које представљају примарно дугме и секундарно дугме. Свако од ових дугмади има другачији стил који га одваја од осталих. Моћи ћете да видите сваки од њих на контролној табли Сторибоок када креирате приче.
У фасцикли прича креирајте нову датотеку под називом буттон.сториес.јс. Важно је укључити .приче пре .јс јер то говори Сторибоок који је датотека прича.
Увезите компоненту дугмета.
увоз Дугме из "../Компоненте/Дугме/Дугме"
Затим извезите наслов компоненте и саму компоненту. Имајте на уму да је наслов опционалан.
извозУобичајено {
наслов: "Компоненте/дугме",
компонента: дугме,
}
Прва прича коју ћете креирати је за дугме Примарно. Дакле, креирајте нову функцију под називом Примарна и извезите је.
екпорт цонст Примарни = () =><Буттон бацкгроундЦолор="#6Б4ЕФФ" лабел="Примарни"/>
Сада ако одете на контролну таблу Сторибоок-а, моћи ћете да видите приказано дугме.
Да бисте уређивали приказану компоненту уживо и променили њено стање на контролној табли Сторибоок, користићете аргс. Аргументи вам омогућавају да проследите аргументе Сторибоок-у који када се промени доводи до поновног приказивања компоненте.
Да бисте дефинисали аргументе приче о дугмету, направите шаблон функције.
цонст Темплате = аргс =><Дугме {...аргс}/>
Овај шаблон прихвата аргументе и прослеђује их као пропс компоненти дугмета.
Сада можете да препишете Примарну причу користећи шаблон као што је приказано у наставку.
извозконст Примарни = Темплате.бинд({})
Примари.аргс = {
боја позадине: "#6Б4ЕФФ",
етикета: "Примарни",
}
Ако проверите контролну таблу Сторибоок, требало би да видите контроле на дну. Ове контроле вам омогућавају да промените начин на који се дугме приказује. Можете да промените боју позадине, боју текста, ознаку, ивицу и радијус ивице.
Потребно је само да промените вредности аргс да бисте креирали друге приче. На пример, да бисте креирали секундарно дугме, користите следећи код.
извозконст Секундарни = Темплате.бинд({})
Сецондари.аргс = {
боја позадине: "#Е7Е7ФФ",
боја: "#6Б4ЕФФ",
етикета: "Секундарни",
}
На контролној табли Сторибоок идите до различитих прича тако што ћете кликнути на њих на бочној траци. Видећете како се сваки приказује. Можете наставити да додајете више стања у приче о дугмадима како желите. Покушајте да додате нацрт или оквирну причу.
Тестирање компоненти корисничког интерфејса
Овај водич вам је дао кратак увод у коришћење Сторибоок-а са Реацт УИ компонентама. Научили сте како да додате Сторибоок у Реацт пројекат и како да креирате основну причу за компоненту дугмета са аргументима.
Можда сте приметили да сте током овог процеса тестирали како се компонента дугмета приказује у различитим стањима. Можда пишете више кода, али када напишете приче о компонентама, минимизираћете све грешке које би могле настати приликом поновног коришћења компоненти у вашој апликацији. Штавише, биће лакше пронаћи грешку ако се догоди. То је лепота развоја вођеног компонентама.
