Ena od prednosti uporabe Reacta je, da lahko ustvarite komponente uporabniškega vmesnika, jih znova uporabite v svoji aplikaciji in se na koncu izognete odlivu kode. Kljub temu je težko ustvariti popolnoma neodvisne komponente uporabniškega vmesnika samo z Reactom. Za ogled teh komponent boste morali ustvariti poglede, ki prikazujejo te komponente.
Tukaj nastopi Storybook. Omogoča vam ustvarjanje in testiranje komponent uporabniškega vmesnika v neodvisnem izvajalnem okolju in v tej vadnici se boste naučili, kako ga uporabljati v Reactu. Do konca te objave boste ustvarili komponento gumba in dokumentirali nekaj njenih možnih stanj v Reactu.
Kaj je knjiga zgodb?
Knjiga zgodb je razvojno orodje, ki vam omogoča zagon in testiranje komponent uporabniškega vmesnika brez popolnega okolja React. To naredi razvoj na podlagi komponent lažje, ker lahko komponente razvijete ločeno.
S Storybook lahko, ko ustvarite komponento, ustvarite več zgodb, ki definirajo različna stanja komponente. Za komponento gumba lahko ta stanja vključujejo primarno stanje, sekundarno stanje, onemogočeno stanje itd.
Ker Storybook omogoča vključitev kode pri ustvarjanju zgodb, lahko služi tudi kot dokumentacijsko orodje.
Če želite uporabljati Storybook, boste morali imeti Node nameščen na vašem računalniku in imeti osnovno razumevanje Reacta.
Ustvarjanje aplikacije React
Če želite začeti uporabljati Storybook, najprej boste ustvarili projekt React in nato ustvarite komponente in njihove zgodbe.
Zaženite naslednji ukaz, da ustvarite aplikacijo React:
npx ustvariti-react-app btn-storybook
To bo ustvarilo mapo z imenom btn-storybook z vsemi odvisnostmi, ki jih potrebuje aplikacija React.
Nato lahko z le še nekaj koraki namestite in zaženete Storybook.
Namestitev knjige zgodb
Pomaknite se do mape btn-storybook in namestite snemalno knjigo:
cd btn-zgodbarska knjiga
npx snemalna knjiga začet
Ker ste uporabili create-react-app, je to edini ukaz, ki ga morate zagnati, da nastavite Storybook. Storybook bo namestil vse potrebne odvisnosti in izvedel vse potrebne konfiguracije. Ustvaril bo tudi nekaj tipičnih zgodb za začetek.
Ko se zgornji ukaz izvede, zaženite snemalno knjigo z naslednjo kodo.
npm run snemalna knjiga
To bo odprlo nadzorno ploščo snemalne knjige v vašem brskalniku. Videti bi moralo nekako takole:
Ustvarjanje komponente gumba
V mapi ./src ustvarite mapo z imenom Components in v njej ustvarite drugo mapo z imenom Button. Mapa Button bi morala biti na tej poti: ./src/Components/Button.
Zdaj v tej mapi ustvarite Button in dodajte naslednjo kodo:
uvoz PropTypes od "prop-vrste"
funkcijski gumb({ label, backgroundColor = "#6B4EFF", barva = "bela", polmer meje="48 slikovnih pik", obroba="nič"}) {
konst slog = {
Barva ozadja,
oblazinjenje: "0,5 rem 1 rem",
barva,
mejni radij,
meja
}
vrnitev (
<gumb style={style}>
{label}
</button>
)
}
Button.propTypes = {
oznaka: PropTypes.vrvica,
Barva ozadja: PropTypes.vrvica,
barva: PropTypes.vrvica,
meja:PropTypes.string,
borderRadius: PropTypes.vrvica,
}
izvozprivzeto gumb;
Ta komponenta sprejme nekatere React props ki vključujejo oznako gumba in njegove sloge. PropTypes uporabljate tudi za preverjanje vrst posredovanih rekvizitov in sprožanje opozorila, če uporabite napačen tip. Komponenta vrne element gumba.
Ustvarjanje zgodb o gumbih
Ko ste v projekt React namestili Storybook, je ta ustvaril mapo z nekaj primeri zgodb z imenom zgodbe. Pomaknite se do te mape in izbrišite vse v njej. Zgodbe boste ustvarjali iz nič.
Ustvarili boste dve zgodbi, ki bosta predstavljali primarni in sekundarni gumb. Vsak od teh gumbov ima drugačen slog, ki ga loči od ostalih. Vsako od njih boste lahko videli na nadzorni plošči Storybook, ko boste ustvarili zgodbe.
V mapi z zgodbami ustvarite novo datoteko z imenom button.stories.js. Pomembno je vključiti .zgodbe pred .js, saj to pove Storybooku, katera je datoteka z zgodbami.
Uvozite komponento Button.
uvoz Gumb od "../Components/Button/Button"
Nato izvozite naslov komponente in samo komponento. Upoštevajte, da naslov ni obvezen.
izvozprivzeto {
naslov: "Komponente/gumb",
komponenta: gumb,
}
Prva zgodba, ki jo boste ustvarili, je za gumb Primary. Ustvarite novo funkcijo z imenom Primary in jo izvozite.
izvoz konst Primarni = () =><Barva ozadja gumba="#6B4EFF" oznaka="Primarni"/>
Zdaj, če greste na nadzorno ploščo Storybook, boste lahko videli upodobljeni gumb.
Za urejanje upodobljene komponente v živo in spreminjanje njenega stanja na nadzorni plošči Storybook boste uporabili argumente. Argi vam omogočajo posredovanje argumentov v Storybook, ki ob spremembi povzroči ponovno upodobitev komponente.
Če želite definirati argumente zgodbe o gumbih, ustvarite predlogo funkcije.
const Template = args =><Gumb {...args}/>
Ta predloga sprejema argumente in jih posreduje kot rekvizite komponenti Button.
Zdaj lahko znova napišete zgodbo Primary z uporabo predloge, kot je prikazano spodaj.
izvozkonst Primarni = Template.bind({})
Primary.args = {
Barva ozadja: "#6B4EFF",
oznaka: "Primarni",
}
Če preverite nadzorno ploščo Storybook, bi morali na dnu videti kontrolnike. Ti kontrolniki vam omogočajo, da spremenite način prikaza gumba. Spremenite lahko barvo ozadja, barvo besedila, oznako, obrobo in polmer obrobe.
Če želite ustvariti druge zgodbe, morate samo spremeniti vrednosti argumentov. Če želite na primer ustvariti sekundarni gumb, uporabite naslednjo kodo.
izvozkonst Sekundarni = Template.bind({})
Secondary.args = {
Barva ozadja: "#E7E7FF",
barva: "#6B4EFF",
oznaka: "Sekundarno",
}
Na nadzorni plošči Storybook se pomaknite do različnih zgodb tako, da jih kliknete v stranski vrstici. Videli boste, kako se vsako upodobi. Zgodbam o gumbih lahko še naprej dodajate več stanj, kot želite. Poskusite dodati oris ali oris zgodbe.
Testiranje komponent uporabniškega vmesnika
Ta vadnica vam je dala kratek uvod v uporabo Storybook s komponentami uporabniškega vmesnika React. Naučili ste se, kako dodati Storybook projektu React in kako ustvariti osnovno zgodbo za komponento Button z argumenti.
Morda ste opazili, da ste med tem postopkom preizkušali, kako je komponenta gumba upodobljena v različnih stanjih. Morda pišete več kode, a ko boste napisali zgodbe o komponentah, boste zmanjšali morebitne napake, ki bi se lahko pojavile pri ponovni uporabi komponent v vaši aplikaciji. Poleg tega bo napako lažje izslediti, če do nje pride. To je lepota razvoja, ki temelji na komponentah.
