En av fördelarna med att använda React är att du kan skapa UI-komponenter, återanvända dem över hela din applikation och i slutändan undvika kodchurn. Ändå är det svårt att skapa helt oberoende UI-komponenter enbart med React. Du måste skapa vyer som visar dessa komponenter för att se dem.

Det är här Storybook kommer in. Det låter dig skapa och testa UI-komponenter i en oberoende runtime-miljö och i den här handledningen kommer du att lära dig hur du använder den i React. I slutet av det här inlägget kommer du att ha skapat en knappkomponent och dokumenterat några av dess möjliga tillstånd i React.

Vad är Storybook?

Sagobok är ett utvecklingsverktyg som låter dig köra och testa dina UI-komponenter utan en komplett React-miljö. Detta gör komponentdriven utveckling lättare eftersom du kan utveckla komponenterna isolerat.

Med Storybook, när du väl har skapat en komponent, kan du skapa flera berättelser som definierar komponentens olika tillstånd. För en knappkomponent kan dessa tillstånd inkludera det primära tillståndet, det sekundära tillståndet, det inaktiverade tillståndet och så vidare.

instagram viewer

Eftersom Storybook låter dig inkludera kod när du skapar berättelserna, kan den också fungera som ett dokumentationsverktyg.

För att använda Storybook måste du ha Node installerad på din maskin och ha en grundläggande förståelse för React.

Skapa en React-applikation

För att börja använda Storybook, du kommer först att skapa ett React-projekt och skapa sedan komponenter och deras berättelser.

Kör följande kommando för att skapa en React-applikation:

npx skapa-react-app btn-storybook

Detta kommer att generera en mapp som heter btn-storybook med alla beroenden som en React-applikation behöver.

Därefter, med bara några fler steg, kan du installera och köra Storybook.

Installerar Storybook

Navigera till mappen btn-storybook och installera storybook:

CD btn-sagobok
npx sagobok init

Eftersom du använde create-react-app är detta det enda kommandot du behöver köra för att ställa in Storybook. Storybook kommer att installera alla nödvändiga beroenden och utföra all nödvändig konfiguration. Det kommer också att skapa några berättelser för att komma igång.

När kommandot ovan har körts klart, starta storybook med följande kod.

npm kör sagobok

Detta öppnar storybook-instrumentpanelen i din webbläsare. Det borde se ut ungefär så här:

Skapa knappkomponenten

Skapa en mapp som heter Components i ./src-mappen och skapa en annan mapp som heter Button i den. Button-mappen ska finnas i denna sökväg: ./src/Components/Button.

Skapa nu Button i den här mappen och lägg till följande kod:

importera PropTypes från "rekvisita-typer"
function Button({ label, backgroundColor = "#6B4EFF", färg = "vit", borderRadius="48px", gräns ="ingen"}) {
konst stil = {
 bakgrundsfärg,
 stoppning: "0,5rem 1rem",
 Färg,
 borderRadius,
 gräns
 }
lämna tillbaka (
<knappstil={stil}>
 {märka}
</button>
 )
}
Button.propTypes = {
märka: PropTypes.sträng,
bakgrundsfärg: PropTypes.sträng,
Färg: PropTypes.sträng,
gräns:PropTypes.string,
borderRadius: PropTypes.sträng,
}
exporterastandard Knapp;

Denna komponent accepterar vissa Reagera rekvisita som inkluderar knappetiketten och dess stilar. Du använder också propTypes för att kontrollera vilka typer av rekvisita som skickas in och varna dig om du använder fel typ. Komponenten returnerar ett knappelement.

Skapa knappberättelser

När du installerade Storybook i React-projektet genererade den en mapp med några berättelseexempel, namngivna berättelser. Navigera till den mappen och ta bort allt i den. Du kommer att skapa berättelserna från grunden.

Du kommer att skapa två berättelser som representerar den primära knappen och den sekundära knappen. Var och en av dessa knappar har en annan stil som skiljer den från resten. Du kommer att kunna se var och en av dem i Storybook-instrumentpanelen när du har skapat berättelserna.

Skapa en ny fil som heter button.stories.js i storys-mappen. Det är viktigt att få med .berättelser före .js eftersom det är det som berättar Storybook som är en berättelsefil.

Importera Button-komponenten.

importera Knapp från "../Komponenter/Knapp/Knapp"

Exportera sedan titeln på komponenten och själva komponenten. Observera att titeln är valfri.

exporterastandard {
 titel: "Komponenter/knapp",
 komponent: Knapp,
}

Den första berättelsen du kommer att skapa är för Primär-knappen. Så skapa en ny funktion som heter Primär och exportera den.

export const Primär = () =><Knappens bakgrundsfärg="#6B4EFF" etikett="Primär"/>

Om du nu går till Storybook-instrumentpanelen kommer du att kunna se den renderade knappen.

För att redigera den renderade komponenten live och ändra dess status på Storybook-instrumentpanelen använder du args. Args låter dig skicka argument till Storybook som när de ändras gör att komponenten återrenderas.

Skapa en funktionsmall för att definiera argumenten för knappberättelsen.

const Mall = args =><Knapp {...args}/>

Den här mallen accepterar argument och skickar dem som rekvisita till Button-komponenten.

Du kan nu skriva om den primära berättelsen med hjälp av mallen som visas nedan.

exporterakonst Primary = Template.bind({})
Primary.args = {
 bakgrundsfärg: "#6B4EFF",
 märka: "Primär",
}

Om du kontrollerar Storybook-instrumentpanelen bör du se kontroller längst ner. Dessa kontroller låter dig ändra hur knappen visas. Du kan ändra bakgrundsfärg, textfärg, etikett, kant och kantradie.

Du behöver bara ändra args-värdena för att skapa de andra berättelserna. Till exempel för att skapa en sekundär knapp, använd följande kod.

exporterakonst Secondary = Template.bind({})
Secondary.args = {
 bakgrundsfärg: "#E7E7FF",
 Färg: "#6B4EFF",
 märka: "Sekundär",
}

På Storybook-instrumentpanelen navigerar du till olika berättelser genom att klicka på dem i sidofältet. Du kommer att se hur var och en renderas. Du kan fortsätta lägga till fler tillstånd till knappberättelserna som du vill. Försök att lägga till en disposition eller en dispositionsberättelse.

Testa UI-komponenter

Denna handledning gav dig en kort introduktion till att använda Storybook med React UI-komponenter. Du lärde dig hur du lägger till Storybook i ett React-projekt och hur du skapar en grundläggande story för en Button-komponent med args.

Du kanske har märkt att du under den här processen testade hur knappkomponenten återgavs i olika tillstånd. Du kanske skriver mer kod, men när du väl har skrivit komponentberättelserna kommer du att minimera eventuella fel som kan uppstå när du återanvänder komponenter i din applikation. Dessutom blir det lättare att spåra felet om det inträffar. Det är det fina med komponentdriven utveckling.