En af fordelene ved at bruge React er, at du kan oprette UI-komponenter, genbruge dem over hele din applikation og i sidste ende undgå kodeafgang. Alligevel er det svært at skabe helt uafhængige UI-komponenter med React alene. Du skal oprette visninger, der viser disse komponenter for at se dem.
Det er her, Storybook kommer ind. Det giver dig mulighed for at oprette og teste UI-komponenter i et uafhængigt runtime-miljø, og i denne tutorial lærer du, hvordan du bruger det i React. Ved slutningen af dette indlæg vil du have oprettet en knapkomponent og dokumenteret nogle af dens mulige tilstande i React.
Hvad er Storybook?
Historiebog er et udviklingsværktøj, der lader dig køre og teste dine UI-komponenter uden et komplet React-miljø. Dette gør komponentdrevet udvikling nemmere, fordi du kan udvikle komponenterne isoleret.
Med Storybook kan du, når du har oprettet en komponent, oprette flere historier, der definerer komponentens forskellige tilstande. For en knapkomponent kan disse tilstande omfatte den primære tilstand, sekundære tilstand, deaktiveret tilstand og så videre.
Da Storybook giver dig mulighed for at inkludere kode, når du opretter historierne, kan den også fungere som et dokumentationsværktøj.
For at bruge Storybook skal du have Node installeret på din maskine og have en grundlæggende forståelse af React.
Oprettelse af en React-applikation
For at begynde at bruge Storybook, du vil først oprette et React-projekt og lav derefter komponenter og deres historier.
Kør følgende kommando for at oprette en React-applikation:
npx skab-react-app btn-storybook
Dette vil generere en mappe kaldet btn-storybook med alle de afhængigheder en React-applikation har brug for.
Dernæst, med blot et par flere trin, kan du installere og køre Storybook.
Installation af Storybook
Naviger til btn-storybook-mappen og installer storybook:
cd btn-historiebog
npx historiebog init
Da du brugte create-react-app, er dette den eneste kommando, du skal køre for at konfigurere Storybook. Storybook installerer alle de nødvendige afhængigheder og udfører al den nødvendige konfiguration. Det vil også skabe nogle kedelhistorier for at komme i gang.
Når ovenstående kommando er færdig med at køre, start storybook ved hjælp af følgende kode.
npm køre historiebog
Dette åbner storybook-dashboardet i din browser. Det skal se sådan ud:
Oprettelse af knapkomponenten
I mappen ./src skal du oprette en mappe kaldet Components, og i den opret en anden mappe kaldet Button. Button-mappen skal være i denne sti: ./src/Components/Button.
Nu, i denne mappe, skal du oprette knappen og tilføje følgende kode:
importere PropTypes fra "prop-typer"
funktionsknap({ label, baggrundsfarve = "#6B4EFF", farve = "hvid", grænseRadius="48px", grænse="ingen"}) {
konst stil = {
baggrundsfarve,
polstring: "0,5rem 1rem",
farve,
borderRadius,
grænse
}
Vend tilbage (
<knapstil={stil}>
{etiket}
</button>
)
}
Button.propTypes = {
etiket: PropTypes.snor,
baggrundsfarve: PropTypes.snor,
farve: PropTypes.snor,
grænse:PropTypes.string,
grænseRadius: PropTypes.snor,
}
eksportStandard Knap;
Denne komponent accepterer nogle Reager rekvisitter der inkluderer knapetiketten og dens stilarter. Du bruger også propTypes til at kontrollere typerne af de indleverede rekvisitter og give en advarsel, hvis du bruger den forkerte type. Komponenten returnerer et knapelement.
Oprettelse af Button Stories
Da du installerede Storybook i React-projektet, genererede den en mappe med nogle historieeksempler, navngivet historier. Naviger til den mappe og slet alt i den. Du vil skabe historierne fra bunden.
Du vil oprette to historier, der repræsenterer den primære knap og den sekundære knap. Hver af disse knapper har en anden stil, der adskiller den fra resten. Du vil være i stand til at se hver af dem i Storybook-dashboardet, når du har oprettet historierne.
I historiemappen skal du oprette en ny fil kaldet button.stories.js. Det er vigtigt at have med .historier før .js, da det er det, der fortæller Storybook, som er en historiefil.
Importer knapkomponenten.
importere Knap fra "../Komponenter/Knap/Knap"
Eksporter derefter titlen på komponenten og selve komponenten. Bemærk, at titlen er valgfri.
eksportStandard {
titel: "Komponenter/knap",
komponent: Knap,
}
Den første historie, du vil oprette, er til knappen Primær. Så opret en ny funktion kaldet Primary og eksporter den.
eksport const Primær = () =><Knap baggrundsfarve="#6B4EFF" etiket="Primær"/>
Hvis du nu går til Storybook-dashboardet, vil du kunne se den gengivne knap.
For at redigere den gengivne komponent live og ændre dens tilstand på Storybook-dashboardet, skal du bruge args. Args giver dig mulighed for at sende argumenter til Storybook, som, når de ændres, får komponenten til at gengives.
For at definere argumenterne for knaphistorien skal du oprette en funktionsskabelon.
const skabelon = args =><Knap {...args}/>
Denne skabelon accepterer argumenter og sender dem som rekvisitter til Button-komponenten.
Du kan nu omskrive den primære historie ved at bruge skabelonen som vist nedenfor.
eksportkonst Primary = Template.bind({})
Primary.args = {
baggrundsfarve: "#6B4EFF",
etiket: "Primær",
}
Hvis du tjekker Storybook-dashboardet, bør du se kontrolelementerne nederst. Disse kontroller giver dig mulighed for at ændre, hvordan knappen vises. Du kan ændre baggrundsfarve, tekstfarve, etiket, kant og kantradius.
Du behøver kun at ændre args-værdierne for at skabe de andre historier. For eksempel for at oprette en sekundær knap, brug følgende kode.
eksportkonst Sekundær = Template.bind({})
Secondary.args = {
baggrundsfarve: "#E7E7FF",
farve: "#6B4EFF",
etiket: "Sekundær",
}
På Storybook-dashboardet kan du navigere til forskellige historier ved at klikke på dem i sidebjælken. Du vil se, hvordan hver gengiver. Du kan fortsætte med at tilføje flere tilstande til knaphistorierne, som du vil. Prøv at tilføje en disposition eller en dispositionshistorie.
Test af UI-komponenter
Denne tutorial gav dig en kort introduktion til brugen af Storybook med React UI-komponenter. Du lærte, hvordan du tilføjer Storybook til et React-projekt, og hvordan du opretter en grundlæggende historie til en Button-komponent med args.
Du har måske bemærket, at du under denne proces testede, hvordan knapkomponenten blev gengivet i forskellige tilstande. Du skriver muligvis mere kode, men når du først har skrevet komponenthistorierne, vil du minimere eventuelle fejl, der måtte opstå, når du genbruger komponenter på tværs af din applikation. Ydermere vil det være nemmere at spore fejlen, hvis den opstår. Det er det smukke ved komponentdrevet udvikling.
