Jednou z výhod používania Reactu je, že môžete vytvárať komponenty používateľského rozhrania, opätovne ich používať v celej vašej aplikácii a v konečnom dôsledku sa tak vyhnete miznutiu kódu. Napriek tomu je ťažké vytvoriť úplne nezávislé komponenty používateľského rozhrania so samotným Reactom. Budete musieť vytvoriť zobrazenia, ktoré zobrazujú tieto komponenty, aby ste ich videli.
Tu prichádza na rad Storybook. Umožňuje vám vytvárať a testovať komponenty používateľského rozhrania v nezávislom runtime prostredí a v tomto návode sa naučíte, ako ho používať v Reacte. Na konci tohto príspevku budete mať vytvorený komponent tlačidla a zdokumentované niektoré z jeho možných stavov v React.
Čo je rozprávková kniha?
Rozprávková kniha je vývojový nástroj, ktorý vám umožňuje spúšťať a testovať komponenty používateľského rozhrania bez úplného prostredia React. Toto robí vývoj riadený komponentmi jednoduchšie, pretože komponenty môžete vyvíjať samostatne.
S Storybook, keď vytvoríte komponent, môžete vytvoriť viacero príbehov, ktoré definujú rôzne stavy komponentu. Pre komponent tlačidla môžu tieto stavy zahŕňať primárny stav, sekundárny stav, deaktivovaný stav atď.
Keďže Storybook umožňuje zahrnúť kód pri vytváraní príbehov, môže slúžiť aj ako dokumentačný nástroj.
Ak chcete používať Storybook, musíte mať na svojom počítači nainštalovaný Node a mať základné znalosti o React.
Vytvorenie aplikácie React
Ak chcete začať používať Storybook, najprv vytvoríte projekt React a potom vytvárať komponenty a ich príbehy.
Spustite nasledujúci príkaz na vytvorenie aplikácie React:
npx vytvoriť-react-app btn-storybook
Tým sa vygeneruje priečinok s názvom btn-storybook so všetkými závislosťami, ktoré aplikácia React potrebuje.
Ďalej, pomocou niekoľkých ďalších krokov, môžete nainštalovať a spustiť Storybook.
Inštalácia rozprávkovej knihy
Prejdite do priečinka btn-storybook a nainštalujte storybook:
cd btn-rozprávková kniha
init rozprávkovej knihy npx
Keďže ste použili aplikáciu create-react-app, toto je jediný príkaz, ktorý musíte spustiť, aby ste nastavili Storybook. Storybook nainštaluje všetky potrebné závislosti a vykoná všetku potrebnú konfiguráciu. Vytvorí tiež niekoľko štandardných príbehov, ktoré vám pomôžu začať.
Po dokončení vyššie uvedeného príkazu spustite knihu príbehov pomocou nasledujúceho kódu.
npm spustiť rozprávkovú knihu
Tým sa otvorí panel rozprávok vo vašom prehliadači. Malo by to vyzerať asi takto:
Vytvorenie komponentu tlačidla
V priečinku ./src vytvorte priečinok s názvom Components a v ňom vytvorte ďalší priečinok s názvom Button. Priečinok Button by mal byť na tejto ceste: ./src/Components/Button.
Teraz v tomto priečinku vytvorte tlačidlo a pridajte nasledujúci kód:
importovať PropTypes od "typy rekvizít"
function Button({ label, backgroundColor = "#6B4EFF", farba = "biely", okrajRadius="48 pixelov", okraj="žiadny"}) {
konšt štýl = {
farba pozadia,
vypchávka: "0,5rem 1rem",
farba,
borderRadius,
hranica
}
vrátiť (
<štýl tlačidla={style}>
{label}
</button>
)
}
Button.propTypes = {
štítok: PropTypes.string,
farba pozadia: PropTypes.string,
farba: PropTypes.string,
hranica:PropTypes.string,
borderRadius: PropTypes.string,
}
exportpredvolená Tlačidlo;
Tento komponent akceptuje niektoré Reagovať rekvizity ktoré zahŕňajú označenie tlačidla a jeho štýly. Používate aj propTypes na kontrolu typov odovzdaných rekvizít a na upozornenie, ak použijete nesprávny typ. Komponent vracia prvok tlačidla.
Vytváranie príbehov tlačidiel
Keď ste v projekte React nainštalovali Storybook, vygeneroval priečinok obsahujúci niekoľko príkladov príbehov s názvom príbehov. Prejdite do tohto priečinka a odstráňte všetko, čo je v ňom. Budete vytvárať príbehy od začiatku.
Vytvoríte dva príbehy predstavujúce primárne tlačidlo a sekundárne tlačidlo. Každé z týchto tlačidiel má iný štýl, ktorý ho oddeľuje od ostatných. Po vytvorení príbehov budete môcť každý z nich vidieť na paneli príbehov.
V priečinku stories vytvorte nový súbor s názvom button.stories.js. Je dôležité zahrnúť .príbehy pred .js, pretože to hovorí Storybook, čo je súbor príbehov.
Importujte komponent Button.
importovať Tlačidlo od "../Components/Button/Button"
Potom exportujte názov komponentu a samotný komponent. Upozorňujeme, že názov je voliteľný.
exportpredvolená {
názov: "Komponenty/tlačidlo",
komponent: tlačidlo,
}
Prvý príbeh, ktorý vytvoríte, je určený pre tlačidlo Primárne. Takže vytvorte novú funkciu s názvom Primárna a exportujte ju.
export const Primárne = () =><Farba pozadia tlačidla="#6B4EFF" štítok="Primárny"/>
Ak teraz prejdete na informačný panel Storybook, budete môcť vidieť vykreslené tlačidlo.
Ak chcete upraviť vykreslený komponent naživo a zmeniť jeho stav na paneli Storybook, použijete arg. Args vám umožňujú odovzdať argumenty do Storybook, ktoré pri zmene spôsobia opätovné vykreslenie komponentu.
Ak chcete definovať argumenty príbehu tlačidla, vytvorte šablónu funkcie.
const Template = args =><Tlačidlo {...args}/>
Táto šablóna prijíma argumenty a odovzdáva ich ako rekvizity komponentu Button.
Teraz môžete prepísať Primárny príbeh pomocou šablóny, ako je uvedené nižšie.
exportkonšt Primárne = Template.bind({})
Primary.args = {
farba pozadia: "#6B4EFF",
štítok: "Primárny",
}
Ak skontrolujete informačný panel Storybook, mali by ste vidieť ovládacie prvky v spodnej časti. Tieto ovládacie prvky umožňujú zmeniť spôsob zobrazenia tlačidla. Môžete zmeniť farbu pozadia, farbu textu, štítok, okraj a polomer okraja.
Ak chcete vytvoriť ďalšie príbehy, stačí zmeniť hodnoty args. Napríklad na vytvorenie sekundárneho tlačidla použite nasledujúci kód.
exportkonšt Sekundárny = Template.bind({})
Secondary.args = {
farba pozadia: "#E7E7FF",
farba: "#6B4EFF",
štítok: "Sekundárne",
}
Na ovládacom paneli Knihy príbehov prejdite na rôzne príbehy kliknutím na ne v bočnom paneli. Uvidíte, ako sa každý vykreslí. Môžete pokračovať v pridávaní ďalších stavov do príbehov tlačidiel, ako chcete. Skúste pridať osnovu alebo načrtnutý príbeh.
Testovanie komponentov používateľského rozhrania
Tento tutoriál vám dal krátky úvod do používania Storybook s komponentmi používateľského rozhrania React. Naučili ste sa, ako pridať Storybook do projektu React a ako vytvoriť základný príbeh pre komponent Button s argami.
Možno ste si všimli, že počas tohto procesu ste testovali, ako sa komponent tlačidla vykresľuje v rôznych stavoch. Možno píšete viac kódu, ale po napísaní príbehov komponentov minimalizujete všetky chyby, ktoré by sa mohli vyskytnúť pri opätovnom použití komponentov vo vašej aplikácii. Okrem toho bude jednoduchšie vystopovať chybu, ak sa vyskytne. To je krása vývoja riadeného komponentmi.