En av fordelene med å bruke React er at du kan lage brukergrensesnittkomponenter, gjenbruke dem over hele applikasjonen din og til slutt unngå kodeavbrudd. Likevel er det vanskelig å lage helt uavhengige UI-komponenter med React alene. Du må opprette visninger som viser disse komponentene for å se dem.

Det er her Storybook kommer inn. Den lar deg lage og teste UI-komponenter i et uavhengig kjøretidsmiljø, og i denne opplæringen lærer du hvordan du bruker den i React. På slutten av dette innlegget vil du ha opprettet en knappekomponent og dokumentert noen av dens mulige tilstander i React.

Hva er Storybook?

Historiebok er et utviklingsverktøy som lar deg kjøre og teste UI-komponentene dine uten et komplett React-miljø. Dette gjør komponentdrevet utvikling enklere fordi du kan utvikle komponentene isolert.

Med Storybook, når du har opprettet en komponent, kan du lage flere historier som definerer de ulike tilstandene til komponenten. For en knappkomponent kan disse tilstandene inkludere primærtilstand, sekundærtilstand, deaktivert tilstand og så videre.

instagram viewer

Siden Storybook lar deg inkludere kode når du lager historiene, kan den også fungere som et dokumentasjonsverktøy.

For å bruke Storybook, må du ha Node installert på maskinen din og ha en grunnleggende forståelse av React.

Opprette en React-applikasjon

For å begynne å bruke Storybook, du vil først opprette et React-prosjekt og deretter lage komponenter og deres historier.

Kjør følgende kommando for å lage en React-applikasjon:

npx skape-react-app btn-storybook

Dette vil generere en mappe kalt btn-storybook med alle avhengighetene en React-applikasjon trenger.

Deretter, med bare noen få flere trinn, kan du installere og kjøre Storybook.

Installerer Storybook

Naviger til btn-storybook-mappen og installer storybook:

cd btn-historiebok
npx historiebok init

Siden du brukte create-react-app, er dette den eneste kommandoen du trenger å kjøre for å sette opp Storybook. Storybook vil installere alle nødvendige avhengigheter og utføre all nødvendig konfigurasjon. Det vil også lage noen kjelehistorier for å komme i gang.

Når kommandoen ovenfor er ferdig å kjøre, start storybook ved å bruke følgende kode.

npm kjøre historiebok

Dette åpner storybook-dashbordet i nettleseren din. Det skal se omtrent slik ut:

Opprette knappekomponenten

I ./src-mappen oppretter du en mappe kalt Components, og i den oppretter du en annen mappe kalt Button. Button-mappen skal være i denne banen: ./src/Components/Button.

Nå, i denne mappen, lag knappen og legg til følgende kode:

import PropTypes fra "rekvisitttyper"
funksjonsknapp({ label, backgroundColor = "#6B4EFF", farge = "hvit", borderRadius="48px", kantlinje="ingen"}) {
konst stil = {
 bakgrunnsfarge,
 polstring: "0,5rem 1rem",
 farge,
 borderRadius,
 grense
 }
komme tilbake (
<knappstil={stil}>
 {merkelapp}
</button>
 )
}
Button.propTypes = {
merkelapp: PropTypes.streng,
bakgrunnsfarge: PropTypes.streng,
farge: PropTypes.streng,
grense:PropTypes.string,
borderRadius: PropTypes.streng,
}
eksportmisligholde Knapp;

Denne komponenten godtar noen Reager rekvisitter som inkluderer knappeetiketten og dens stiler. Du bruker også propTypes for å sjekke typene av rekvisittene som er sendt inn og advare hvis du bruker feil type. Komponenten returnerer et knappeelement.

Lage Button Stories

Når du installerte Storybook i React-prosjektet, genererte den en mappe som inneholder noen historieeksempler, kalt historier. Naviger til den mappen og slett alt i den. Du skal lage historiene fra bunnen av.

Du skal lage to historier som representerer den primære knappen og den sekundære knappen. Hver av disse knappene har en annen stil som skiller den fra resten. Du vil kunne se hver av dem i Storybook-dashbordet når du har opprettet historiene.

Opprett en ny fil kalt button.stories.js i historiemappen. Det er viktig å inkludere .historier før .js da det er det som forteller Storybook som er en historiefil.

Importer Button-komponenten.

import Knapp fra "../Components/Button/Button"

Eksporter deretter tittelen på komponenten og selve komponenten. Merk at tittelen er valgfri.

eksportmisligholde {
 tittel: "Komponenter/knapp",
 komponent: Knapp,
}

Den første historien du vil lage er for Primær-knappen. Så lag en ny funksjon kalt Primær og eksporter den.

eksportkonst Primær = () =><Knappens bakgrunnsfarge="#6B4EFF" label="Hoved"/>

Nå hvis du går til Storybook-dashbordet, vil du kunne se den gjengitte knappen.

For å redigere den gjengitte komponenten live og endre dens tilstand på Storybook-dashbordet, bruker du args. Args lar deg sende argumenter til Storybook som når de endres får komponenten til å gjengi.

For å definere argumentene til knappehistorien, lag en funksjonsmal.

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

Denne malen godtar argumenter og sender dem som rekvisitter til Button-komponenten.

Du kan nå skrive om Primær-historien ved å bruke malen som vist nedenfor.

eksportkonst Primær = Template.bind({})
Primary.args = {
 bakgrunnsfarge: "#6B4EFF",
 merkelapp: "Hoved",
}

Hvis du sjekker Storybook-dashbordet, bør du se kontroller nederst. Disse kontrollene lar deg endre hvordan knappen vises. Du kan endre bakgrunnsfarge, tekstfarge, etikett, kantlinje og kantradius.

Du trenger bare å endre args-verdiene for å lage de andre historiene. For å lage en sekundær knapp, bruk følgende kode.

eksportkonst Sekundær = Template.bind({})
Secondary.args = {
 bakgrunnsfarge: "#E7E7FF",
 farge: "#6B4EFF",
 merkelapp: "Sekundær",
}

På Storybook-dashbordet kan du navigere til forskjellige historier ved å klikke på dem i sidefeltet. Du vil se hvordan hver gjengir. Du kan fortsette å legge til flere tilstander i knappehistoriene som du vil. Prøv å legge til en disposisjon eller en disposisjonshistorie.

Testing av UI-komponenter

Denne opplæringen ga deg en kort introduksjon til bruk av Storybook med React UI-komponenter. Du lærte hvordan du legger til Storybook i et React-prosjekt og hvordan du lager en grunnleggende historie for en Button-komponent med args.

Du har kanskje lagt merke til at du under denne prosessen testet hvordan knappkomponenten ble gjengitt i forskjellige tilstander. Det kan hende du skriver mer kode, men når du har skrevet komponenthistoriene, vil du minimere eventuelle feil som kan oppstå når du gjenbruker komponenter på tvers av applikasjonen din. Videre vil det være lettere å spore opp feilen hvis den oppstår. Det er det fine med komponentdrevet utvikling.