Viena no React izmantošanas priekšrocībām ir tā, ka varat izveidot lietotāja interfeisa komponentus, atkārtoti izmantot tos visā lietojumprogrammā un galu galā izvairīties no koda maiņas. Tomēr ir grūti izveidot pilnīgi neatkarīgus lietotāja interfeisa komponentus, izmantojot tikai React. Lai tos skatītu, jums ir jāizveido skati, kuros tiek parādīti šie komponenti.

Šeit parādās stāstu grāmata. Tas ļauj jums izveidot un pārbaudīt lietotāja interfeisa komponentus neatkarīgā izpildlaika vidē, un šajā apmācībā jūs uzzināsit, kā to izmantot programmā React. Līdz šīs ziņas beigām jūs būsit izveidojis pogas komponentu un dokumentējis dažus tā iespējamos stāvokļus programmā React.

Kas ir stāstu grāmata?

Stāstu grāmata ir izstrādes rīks, kas ļauj palaist un pārbaudīt UI komponentus bez pilnīgas React vides. Tas padara komponentu virzīta attīstība vieglāk, jo jūs varat izstrādāt komponentus atsevišķi.

Izmantojot Storybook, kad esat izveidojis komponentu, varat izveidot vairākus stāstus, kas nosaka dažādus komponenta stāvokļus. Pogas komponentam šie stāvokļi var ietvert primāro stāvokli, sekundāro stāvokli, atspējoto stāvokli utt.

Tā kā Storybook ļauj iekļaut kodu, veidojot stāstus, tas var kalpot arī kā dokumentācijas rīks.

Lai izmantotu Storybook, jūsu datorā ir jābūt instalētam Node un jābūt pamatzināšanām par React.

React lietojumprogrammas izveide

Lai sāktu lietot stāstu grāmatu, vispirms izveidosiet React projektu un pēc tam izveidojiet komponentus un to stāstus.

Palaidiet šo komandu, lai izveidotu React lietojumprogrammu:

npx izveidot-react-app btn-stāstu grāmata

Tādējādi tiks izveidota mape ar nosaukumu btn-storybook ar visām atkarībām, kas nepieciešamas React lietojumprogrammai.

Pēc tam, veicot tikai dažas darbības, varat instalēt un palaist Storybook.

Stāstu grāmatas instalēšana

Dodieties uz mapi btn-storybook un instalējiet stāstu grāmatu:

cd btn stāstu grāmata
npx stāstu grāmatas init

Tā kā izmantojāt lietotni Create-react-app, šī ir vienīgā komanda, kas jāpalaiž, lai iestatītu Storybook. Stāstu grāmata instalēs visas nepieciešamās atkarības un veiks visu nepieciešamo konfigurāciju. Tas arī izveidos dažus vispārīgus stāstus, lai jūs varētu sākt darbu.

Kad iepriekš minētā komanda ir beigusies, sāciet stāstu grāmatu, izmantojot šādu kodu.

npm palaist stāstu grāmatu

Tādējādi jūsu pārlūkprogrammā tiks atvērts stāstu grāmatas informācijas panelis. Tam vajadzētu izskatīties apmēram šādi:

Pogas komponenta izveide

Mapē ./src izveidojiet mapi ar nosaukumu Components un tajā izveidojiet citu mapi ar nosaukumu Button. Pogas mapei jāatrodas šādā ceļā: ./src/Components/Button.

Tagad šajā mapē izveidojiet pogu un pievienojiet šādu kodu:

imports PropTypes no "rekvizītu veidi"
Funkcijas poga ({ etiķete, fona krāsa = "#6B4EFF", krāsa = "balts", borderRadius="48 pikseļi", apmale="neviens"}) {
konst stils = {
 fona krāsa,
 polsterējums: "0.5rem 1rem",
 krāsa,
 robežas rādiuss,
 robeža
 }
atgriezties (
<pogas stils={style}>
 {label}
</button>
 )
}
Button.propTypes = {
etiķete: PropTypes.string,
fona krāsa: PropTypes.string,
krāsa: PropTypes.string,
robeža:PropTypes.string,
apmales rādiuss: PropTypes.string,
}
eksportētnoklusējuma Poga;

Šis komponents pieņem dažus Reaģēt rekvizīti kas ietver pogas etiķeti un tās stilus. Jūs arī izmantojat propTypes, lai pārbaudītu nodoto rekvizītu veidus un brīdinātu, ja izmantojat nepareizu tipu. Komponents atgriež pogas elementu.

Pogu stāstu izveide

Kad instalējāt Storybook projektā React, tā ģenerēja mapi ar dažiem stāstu piemēriem ar nosaukumu stāsti. Dodieties uz šo mapi un izdzēsiet visu tajā. Jūs veidosit stāstus no nulles.

Jūs izveidosit divus stāstus, kas attēlo primāro pogu un sekundāro pogu. Katrai no šīm pogām ir atšķirīgs stils, kas to atšķir no pārējām. Kad būsiet izveidojis stāstus, katru no tiem varēsiet redzēt Storybook informācijas panelī.

Stāstu mapē izveidojiet jaunu failu ar nosaukumu button.stories.js. Ir svarīgi iekļaut .stāsti pirms .js, jo tas stāsta Storybook, kas ir stāstu fails.

Importējiet komponentu Button.

imports Poga no "../Components/Button/Button"

Pēc tam eksportējiet komponenta nosaukumu un pašu komponentu. Ņemiet vērā, ka nosaukums nav obligāts.

eksportētnoklusējuma {
 virsraksts: "Sastāvdaļas/poga",
 komponents: poga,
}

Pirmais stāsts, ko izveidosit, ir paredzēts pogai Primārā. Tātad, izveidojiet jaunu funkciju ar nosaukumu Primārā un eksportējiet to.

eksporta const Primārais = () =><Pogas fona krāsa="#6B4EFF" etiķete="Primārs"/>

Tagad, pārejot uz Storybook informācijas paneli, varēsit redzēt atveidoto pogu.

Lai rediģētu atveidoto komponentu un mainītu tā stāvokli Storybook informācijas panelī, tiks izmantots args. Args ļauj nodot argumentus Storybook, kas, mainot to, komponents tiek atveidots atkārtoti.

Lai definētu pogas stāsta argu, izveidojiet funkcijas veidni.

const Veidne = args =><Poga {...args}/>

Šī veidne pieņem argumentus un nodod tos kā butaforijas komponentam Button.

Tagad varat pārrakstīt galveno stāstu, izmantojot veidni, kā parādīts tālāk.

eksportētkonst Primārais = Template.bind({})
Primary.args = {
 fona krāsa: "#6B4EFF",
 etiķete: "Primārs",
}

Ja atzīmējat Storybook informācijas paneli, apakšā vajadzētu redzēt vadīklas. Šīs vadīklas ļauj mainīt pogas rādīšanas veidu. Varat mainīt fona krāsu, teksta krāsu, etiķeti, apmali un apmales rādiusu.

Lai izveidotu citus stāstus, ir jāmaina tikai args vērtības. Piemēram, lai izveidotu sekundāro pogu, izmantojiet šādu kodu.

eksportētkonst Sekundārā = Template.bind({})
Secondary.args = {
 fona krāsa: "#E7E7FF",
 krāsa: "#6B4EFF",
 etiķete: "Sekundārais",
}

Stāstu grāmatas informācijas panelī pārejiet uz dažādiem stāstiem, noklikšķinot uz tiem sānjoslā. Jūs redzēsiet, kā katrs atveido. Varat turpināt pogu stāstiem pievienot citus stāvokļus, kā vēlaties. Mēģiniet pievienot izklāstu vai izklāsta stāstu.

UI komponentu testēšana

Šī apmācība sniedza īsu ievadu stāstu grāmatas lietošanai ar React UI komponentiem. Jūs uzzinājāt, kā React projektam pievienot stāstu grāmatu un kā izveidot pamatstāstu Button komponentam ar args.

Iespējams, pamanījāt, ka šī procesa laikā pārbaudījāt, kā pogas komponents tiek renderēts dažādos stāvokļos. Iespējams, jūs rakstāt vairāk koda, taču, kad būsit uzrakstījis komponentu stāstus, samazināsit kļūdas, kas varētu rasties, atkārtoti izmantojot komponentus savā lietojumprogrammā. Turklāt būs vieglāk izsekot kļūdu, ja tā notiks. Tas ir komponentu virzītas attīstības skaistums.