Jedna od prednosti korištenja Reacta je da možete kreirati komponente korisničkog sučelja, ponovno ih koristiti u cijeloj aplikaciji i na kraju izbjeći odljev koda. Ipak, teško je stvoriti potpuno neovisne komponente korisničkog sučelja samo s Reactom. Morat ćete izraditi prikaze koji prikazuju te komponente da biste ih vidjeli.
Tu na scenu stupa Storybook. Omogućuje vam stvaranje i testiranje komponenti korisničkog sučelja u neovisnom runtime okruženju, au ovom ćete vodiču naučiti kako ga koristiti u Reactu. Do kraja ovog posta izradit ćete komponentu gumba i dokumentirati neka od njegovih mogućih stanja u Reactu.
Što je knjiga priča?
Knjiga pripovjedaka je razvojni alat koji vam omogućuje pokretanje i testiranje komponenti korisničkog sučelja bez cjelovitog React okruženja. Ovo cini razvoj vođen komponentama lakše jer možete razviti komponente u izolaciji.
Uz Storybook, nakon što stvorite komponentu, možete stvoriti više priča koje definiraju različita stanja komponente. Za komponentu gumba, ta stanja mogu uključivati primarno stanje, sekundarno stanje, onemogućeno stanje i tako dalje.
Budući da Storybook omogućuje uključivanje koda pri stvaranju priča, može poslužiti i kao alat za dokumentiranje.
Da biste koristili Storybook, morat ćete imati instaliran Node na vašem računalu i imati osnovno razumijevanje Reacta.
Izrada React aplikacije
Da biste počeli koristiti knjigu priča, prvo ćete izraditi React projekt a zatim kreirati komponente i njihove priče.
Pokrenite sljedeću naredbu za izradu React aplikacije:
npx stvoriti-react-app btn-knjiga priča
Ovo će generirati mapu pod nazivom btn-storybook sa svim ovisnostima koje React aplikacija treba.
Zatim, uz samo nekoliko koraka, možete instalirati i pokrenuti Storybook.
Instaliranje knjige priča
Dođite do mape btn-storybook i instalirajte storybook:
CD btn-knjiga priča
npx knjiga priča init
Budući da ste koristili create-react-app, ovo je jedina naredba koju trebate pokrenuti da postavite Storybook. Storybook će instalirati sve potrebne ovisnosti i izvršiti svu potrebnu konfiguraciju. Također će stvoriti neke šablonske priče za početak.
Nakon što se gornja naredba završi, pokrenite knjigu priča pomoću sljedećeg koda.
npm pokrenuti knjigu priča
Ovo će otvoriti nadzornu ploču knjige priča u vašem pregledniku. Trebalo bi izgledati otprilike ovako:
Stvaranje komponente gumba
U mapi ./src stvorite mapu pod nazivom Components, au njoj stvorite drugu mapu pod nazivom Button. Mapa gumba trebala bi biti na ovoj stazi: ./src/Components/Button.
Sada, u ovoj mapi, kreirajte Button i dodajte sljedeći kod:
uvoz PropTypes iz "prop-vrste"
funkcijski gumb({ label, backgroundColor = "#6B4EFF", boja = "bijela", radijus granice="48 px", granica="nikakav"}) {
konst stil = {
boja pozadine,
padding: "0,5 rem 1 rem",
boja,
radijus granice,
granica
}
povratak (
<gumb style={style}>
{označiti}
</button>
)
}
Button.propTypes = {
označiti: PropTypes.niz,
boja pozadine: PropTypes.niz,
boja: PropTypes.niz,
granica:PropTypes.string,
radijus granice: PropTypes.niz,
}
izvozzadano Dugme;
Ova komponenta prihvaća neke React rekviziti koji uključuju oznaku gumba i njegove stilove. Također koristite propTypes za provjeru tipova proslijeđenih rekvizita i podizanje upozorenja ako koristite pogrešan tip. Komponenta vraća element gumba.
Stvaranje priča o gumbima
Kada ste instalirali Storybook u projekt React, on je generirao mapu koja sadrži neke primjere priča pod nazivom priče. Dođite do te mape i izbrišite sve u njoj. Stvarat ćete priče od nule.
Stvorit ćete dvije priče koje predstavljaju primarni gumb i sekundarni gumb. Svaki od ovih gumba ima drugačiji stil koji ga razlikuje od ostalih. Moći ćete vidjeti svaku od njih na nadzornoj ploči knjige priča nakon što izradite priče.
U mapi s pričama stvorite novu datoteku pod nazivom button.stories.js. Važno je uključiti .priče prije .js jer to govori knjizi priča koja je datoteka priča.
Uvezite komponentu Button.
uvoz Dugme iz "../Components/Button/Button"
Zatim izvezite naslov komponente i samu komponentu. Imajte na umu da naslov nije obavezan.
izvozzadano {
titula: "Komponente/gumb",
komponenta: gumb,
}
Prva priča koju ćete stvoriti je za gumb Primarni. Dakle, stvorite novu funkciju pod nazivom Primary i izvezite je.
izvoz konst Primarni = () =><Boja pozadine gumba="#6B4EFF" oznaka="Primarni"/>
Ako sada odete na nadzornu ploču knjige priča, moći ćete vidjeti prikazani gumb.
Za uređivanje prikazane komponente uživo i promjenu njenog stanja na nadzornoj ploči knjige priča koristit ćete args. Argovi vam omogućuju prosljeđivanje argumenata u knjigu priča koja kada se promijeni uzrokuje ponovno iscrtavanje komponente.
Kako biste definirali argumente priče gumba, izradite predložak funkcije.
const Predložak = args =><Gumb {...args}/>
Ovaj predložak prihvaća argumente i prosljeđuje ih kao rekvizite komponenti Button.
Sada možete ponovno napisati Primarnu priču pomoću predloška kao što je prikazano u nastavku.
izvozkonst Primarni = Template.bind({})
Primary.args = {
boja pozadine: "#6B4EFF",
označiti: "Primarni",
}
Ako provjerite nadzornu ploču knjige priča, trebali biste vidjeti kontrole na dnu. Ove vam kontrole omogućuju promjenu prikaza gumba. Možete promijeniti boju pozadine, boju teksta, oznaku, obrub i radijus obruba.
Trebate samo promijeniti vrijednosti args da biste stvorili druge priče. Na primjer, za izradu sekundarnog gumba upotrijebite sljedeći kod.
izvozkonst Sekundarno = Template.bind({})
Secondary.args = {
boja pozadine: "#E7E7FF",
boja: "#6B4EFF",
označiti: "Sekundarna",
}
Na nadzornoj ploči knjige priča idite do različitih priča klikom na njih na bočnoj traci. Vidjet ćete kako se svaki prikazuje. Možete nastaviti dodavati još stanja pričama o gumbima kako želite. Pokušajte dodati nacrt ili nacrt priče.
Testiranje komponenti korisničkog sučelja
Ovaj vam je vodič dao kratak uvod u korištenje Storybooka s React UI komponentama. Naučili ste kako dodati Storybook React projektu i kako stvoriti osnovnu priču za Button komponentu s argumentima.
Možda ste primijetili da ste tijekom ovog procesa testirali kako se komponenta gumba prikazuje u različitim stanjima. Možda pišete više koda, ali nakon što napišete priče o komponentama, minimizirat ćete sve pogreške koje bi mogle nastati prilikom ponovne upotrebe komponenti u vašoj aplikaciji. Nadalje, bit će lakše pronaći grešku ako se dogodi. To je ljepota razvoja vođenog komponentama.
