Jednou z výhod používání Reactu je, že můžete vytvářet komponenty uživatelského rozhraní, znovu je používat v celé své aplikaci a nakonec se vyhnout ztrátě kódu. Přesto je obtížné vytvořit zcela nezávislé komponenty uživatelského rozhraní se samotným Reactem. Abyste je viděli, budete muset vytvořit pohledy, které tyto komponenty zobrazují.
Zde přichází na řadu Storybook. Umožňuje vám vytvářet a testovat komponenty uživatelského rozhraní v nezávislém běhovém prostředí a v tomto tutoriálu se naučíte, jak jej používat v Reactu. Na konci tohoto příspěvku budete mít vytvořenou komponentu tlačítka a zdokumentované některé její možné stavy v Reactu.
Co je pohádková kniha?
Pohádková kniha je vývojový nástroj, který vám umožní spouštět a testovat komponenty uživatelského rozhraní bez kompletního prostředí React. To dělá vývoj řízený komponentami jednodušší, protože komponenty můžete vyvíjet izolovaně.
S Storybook, jakmile vytvoříte komponentu, můžete vytvořit více příběhů, které definují různé stavy komponenty. U komponenty tlačítka mohou tyto stavy zahrnovat primární stav, sekundární stav, deaktivovaný stav a tak dále.
Protože Storybook umožňuje zahrnout kód při vytváření příběhů, může také sloužit jako dokumentační nástroj.
Abyste mohli Storybook používat, musíte mít na svém počítači nainstalovaný Node a mít základní znalosti o Reactu.
Vytvoření aplikace React
Chcete-li začít používat Storybook, nejprve vytvoříte projekt React a poté vytvářet komponenty a jejich příběhy.
Spusťte následující příkaz a vytvořte aplikaci React:
npx vytvořit-react-app btn-storybook
Tím se vygeneruje složka nazvaná btn-storybook se všemi závislostmi, které aplikace React potřebuje.
Poté můžete pomocí několika dalších kroků nainstalovat a spustit Storybook.
Instalace Storybooku
Přejděte do složky btn-storybook a nainstalujte storybook:
CD btn-pohádková kniha
init pohádkové knihy npx
Protože jste použili create-react-app, je to jediný příkaz, který musíte spustit, abyste mohli nastavit Storybook. Storybook nainstaluje všechny potřebné závislosti a provede veškerou potřebnou konfiguraci. Vytvoří také několik standardních příběhů, které vám pomohou začít.
Jakmile výše uvedený příkaz skončí, spusťte knihu příběhů pomocí následujícího kódu.
npm spustit pohádkovou knihu
Tím se ve vašem prohlížeči otevře řídicí panel příběhové knihy. Mělo by to vypadat nějak takto:
Vytvoření komponenty tlačítka
Ve složce ./src vytvořte složku s názvem Components a v ní vytvořte další složku s názvem Button. Složka Button by měla být v této cestě: ./src/Components/Button.
Nyní v této složce vytvořte Button a přidejte následující kód:
import PropTypes z "typy rekvizit"
function Button({ label, backgroundColor = "#6B4EFF", barva = "bílý", borderRadius="48 pixelů", ohraničení="žádný"}) {
konst styl = {
barva pozadí,
vycpávka: "0,5rem 1rem",
barva,
okrajRadius,
okraj
}
vrátit se (
<styl tlačítka={style}>
{označení}
</button>
)
}
Button.propTypes = {
označení: PropTypes.tětiva,
barva pozadí: PropTypes.tětiva,
barva: PropTypes.tětiva,
okraj:PropTypes.string,
okrajRadius: PropTypes.tětiva,
}
vývoznívýchozí Knoflík;
Tato součást přijímá některé Reagovat rekvizity které zahrnují popisek tlačítka a jeho styly. Také používáte propTypes ke kontrole typů předávaných rekvizit a vyvolání varování, pokud použijete nesprávný typ. Komponenta vrací prvek tlačítka.
Vytváření příběhů tlačítek
Když jste v projektu React nainstalovali Storybook, vygenerovala se složka obsahující některé příklady příběhů, pojmenované příběhy. Přejděte do této složky a odstraňte vše, co je v ní. Budete vytvářet příběhy od začátku.
Vytvoříte dva příběhy představující primární tlačítko a sekundární tlačítko. Každé z těchto tlačítek má jiný styl, který jej odlišuje od ostatních. Jakmile příběhy vytvoříte, budete je moci vidět na řídicím panelu Knihy příběhů.
Ve složce příběhů vytvořte nový soubor s názvem button.stories.js. Je důležité zahrnout .příběhy před .js, protože to říká Storybook, což je soubor příběhů.
Importujte komponentu Button.
import Knoflík z "../Components/Button/Button"
Dále exportujte název komponenty a samotnou komponentu. Všimněte si, že název je volitelný.
vývoznívýchozí {
titul: "Komponenty/tlačítko",
komponent: Tlačítko,
}
První příběh, který vytvoříte, je pro tlačítko Primární. Vytvořte tedy novou funkci s názvem Primární a exportujte ji.
exportní konst Primární = () =><Tlačítko backgroundColor="#6B4EFF" štítek="Hlavní"/>
Nyní, když přejdete na řídicí panel Storybook, budete moci vidět vykreslené tlačítko.
Chcete-li upravit vykreslenou komponentu naživo a změnit její stav na řídicím panelu Storybook, použijete args. Args vám umožňují předávat argumenty do Storybook, které při změně způsobí opětovné vykreslení komponenty.
Chcete-li definovat argumenty příběhu tlačítka, vytvořte šablonu funkce.
const Template = args =><Tlačítko {...args}/>
Tato šablona přijímá argumenty a předává je jako rekvizity komponentě Button.
Nyní můžete přepsat primární příběh pomocí šablony, jak je uvedeno níže.
vývozníkonst Primární = Template.bind({})
Primary.args = {
barva pozadí: "#6B4EFF",
označení: "Hlavní",
}
Pokud zkontrolujete řídicí panel Storybook, měli byste vidět ovládací prvky ve spodní části. Tyto ovládací prvky umožňují změnit způsob zobrazení tlačítka. Můžete změnit barvu pozadí, barvu textu, štítek, ohraničení a poloměr ohraničení.
Chcete-li vytvořit další příběhy, stačí změnit hodnoty args. Chcete-li například vytvořit sekundární tlačítko, použijte následující kód.
vývozníkonst Sekundární = Template.bind({})
Secondary.args = {
barva pozadí: "#E7E7FF",
barva: "#6B4EFF",
označení: "Sekundární",
}
Na panelu Storybook přejděte na různé příběhy kliknutím na ně v postranním panelu. Uvidíte, jak se každý vykreslí. Můžete pokračovat v přidávání dalších stavů do příběhů tlačítek, jak chcete. Zkuste přidat osnovu nebo osnovu příběhu.
Testování komponent uživatelského rozhraní
Tento tutoriál vám poskytl krátký úvod do používání Storybook s komponentami uživatelského rozhraní React. Naučili jste se, jak přidat Storybook do projektu React a jak vytvořit základní příběh pro komponentu Button s argy.
Možná jste si všimli, že během tohoto procesu jste testovali, jak se komponenta tlačítka vykresluje v různých stavech. Možná píšete více kódu, ale jakmile napíšete příběhy komponent, minimalizujete chyby, které by mohly nastat při opětovném použití komponent ve vaší aplikaci. Kromě toho bude snazší vystopovat chybu, pokud k ní dojde. To je krása vývoje řízeného komponentami.
