Har du noen gang prøvd å plassere alle UI-komponentene dine på et sted i React?
Hvis du er ny i React-verdenen, vil du sannsynligvis ikke gjøre det.
Hva menes med det?
Se reager-vakker-dnd eksempler.
Det du har sett i eksemplene kalles historier. Og verktøyet som brukes til å lage historier, heter Storybook.
Nå har du forstått hva vi skal snakke om i denne artikkelen. La oss uten nøle utforske.
Innholdsfortegnelse
Hva er Storybook?
Storybook er et brukergrensesnitt isolert utviklingsmiljø som gir en lekeplass for komponentene dine. Vi kan leke med komponentene våre på forskjellige måter uten å kjøre hovedappen vår. Vi kan kjøre historieboken i porten med oppsettet.
Det er ikke begrenset til React. Vi kan bruke storybook med de fleste frontend-rammeverkene som Vue, Angular, Mithril, Marko, Svelte, etc..,
Du kan finne mer om historieboken her.
Hva er en historie?
En historie definerer den gjengitte tilstanden til komponenten din. Hvis vi tar en felles komponent, kan vi bruke den på forskjellige måter med rekvisitter. Vi kan skrive en historie for hver av disse statene.
La oss si at vi har en knapp-komponent.
En knapp kan eksistere i forskjellige tilstander som deaktivert, lasting, primær, sekundær, liten, stor, medium, etc.. Hvis vi lister ned alle tilstandene, vil det være veldig vanskelig å gå videre i opplæringen. Jeg tror du forstår det. Du vil få det mer når du begynner å jobbe med historieboken.
Du kan se historiene til knappen i forskjellige tilfeller (Stor, Middels, Liten).
Sette opp Storybook i et prosjekt
Vi setter opp en historiebok i et reaksjonsprosjekt.
La oss gå.
- Lag et react-prosjekt med følgende kommando. Du kan navngi hva du vil.
npx create-react-app storybook-demo
- Installer nå historieboken i prosjektet ditt med følgende kommando.
npx sb init
Vi har fullført oppsettet for historieboken.
Historieboken gir en egen server for oss.
Hvordan starte det?
Historieboken legger automatisk til en kommando i skriptfilen vår. Du kan sjekke det i filen package.json i skriptdelen. For tiden, kjør følgende kommando for å starte storybook-serveren.
npm run storybook
Storybook vil starte en ny server med port gitt i skriptdelen av filen package.json. Den vil automatisk åpne historieboken i vår standard nettleser (samme som reaksjonsserveren).
Du vil se forskjellige historier i den som standard. Du kan fjerne dem hvis du ikke vil, eller beholde dem for referanse. Som vi diskuterte i forrige seksjon, kan en knapp ha flere tilstander, du kan se dem i historieboken (ikke alle tilstander nevnt). Vi skal skrive et stort sett med historier for knappen i den siste delen av denne opplæringen.
Utforsk forskjellige deler av historieboken og bli kjent med de forskjellige delene. Vi skal dekke noen av dem i opplæringen.
La oss skrive vår første historie.
Testing av historiebok
Vi har sett historieboken i gang og noen eksempler i den.
- Lag en mappe kalt Button inne i src-mappen.
- Lag filer kalt Button.jsx, Button.css og constants.js
- Plasser den respektive koden fra utdragene nedenfor i filene.
Button.jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Button.css";
import { buttonTypes, buttonVariants, buttonSizes } from "./constants";
class Button extends Component {
static defaultProps = {
isDisabled: false,
type: "filled",
variant: "oval",
size: "medium",
backgroundColor: "#1ea7fd",
textColor: "#ffffff",
};
static buttonTypes = buttonTypes;
static buttonVariants = buttonVariants;
static buttonSizes = buttonSizes;
renderButton = () => {
const {
text,
isDisabled,
type,
variant,
size,
backgroundColor,
textColor,
onClick,
} = this.props;
return (
<button
onClick={onClick}
className={`default ${variant} ${size} ${
isDisabled ? "disabled" : ""
}`}
style={
type === buttonTypes.outline
? {
border: `1px solid ${backgroundColor}`,
color: "#000000",
backgroundColor: "transparent",
}
: {
backgroundColor: `${backgroundColor}`,
border: `1px solid ${backgroundColor}`,
color: textColor,
}
}
disabled={isDisabled}
>
{text}
</button>
);
};
render() {
return this.renderButton();
}
}
Button.propTypes = {
text: PropTypes.string,
isDisabled: PropTypes.bool,
type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
size: PropTypes.oneOf([
buttonSizes.small,
buttonSizes.medium,
buttonSizes.large,
]),
backgroundColor: PropTypes.string,
textColor: PropTypes.string,
onClick: PropTypes.func,
};
export { Button };
Button.css
.default {
border: none;
cursor: pointer;
background-color: transparent;
}
.default:focus {
outline: none;
}
.disabled {
opacity: 0.75;
cursor: not-allowed;
}
.small {
font-size: 12px;
padding: 4px 8px;
}
.medium {
font-size: 14px;
padding: 8px 12px;
}
.large {
font-size: 16px;
padding: 12px 16px;
}
.oval {
border-radius: 4px;
}
.rectangular {
border-radius: 0;
}
constants.js
export const buttonTypes = {
outline: "outline",
filled: "filled",
};
export const buttonVariants = {
oval: "oval",
rectangular: "rectangular",
};
export const buttonSizes = {
small: "small",
medium: "medium",
large: "large",
};
Hva er den koden?
Vi har skrevet en felles komponent for Button som kan brukes på forskjellige måter. Nå har vi en komponent som kan ha forskjellige tilstander.
La oss skrive vår første historie ved å følge trinnene nedenfor.
- Lag en fil som heter Button.stories.jsx
- Importer React og vår Button-komponent til filen.
- Definer nå en tittel eller bane for komponenthistoriene våre. Vi vil definere det ved å bruke følgende kode.
export default {
title: ‘common/Button’,
}
Koden ovenfor vil plassere alle historier som er i gjeldende fil i common/Button/-katalogen.
- Eksporter en knapp med obligatoriske rekvisitter som følger.
export const defaultButton = () => (
<Button text=”Default Button” onClick={() => {}} />
);
Vi har fullført vår første historie. Kjør historieboken med følgende kommando og se utdataene.
npm run storybook
Vi kommer til å skrive flere historier, til slutt, ikke bekymre deg.
Hvordan er det nyttig i frontend-utvikling?
Hva er den største fordelen med å bruke en historiebok?
La oss si at vi jobber i et team på 10 medlemmer. Og vi må sjekke vanlige komponenter som alle har skrevet for det nåværende arbeidsprosjektet.
Hvordan kan vi gjøre det?
Vi må gå til alle vanlige komponenter for å sjekke dem. Men det er tidkrevende og ikke en foretrukket måte for oss. Her kommer vår nye gjestebok.
Hvordan bruke det til å overvinne problemet vårt?
Vi kan skrive historier for de vanlige komponentene (alle UI-komponenter) ved å bruke storybook. Og når lagkameraten din ønsker å sjekke de vanlige komponentene til andre, kjører de ganske enkelt storybook-serveren og vil se alle UI-komponentene der, som vi har sett ovenfor.
Vi kan gjøre mye mer med de gjengitte komponentene i historieboken. Storybook har et konsept kalt Addons som gir superkrefter til historiene våre.
La oss si at vi må sjekke responsen til UI-komponentene i selve storybooken, vi kan bruke et tillegg kalt Viewport i storybooken. Vi vil lære mer om tilleggene i de kommende delene.
Arbeid med Storybook
I denne delen vil vi skrive forskjellige historier som definerer forskjellige tilstander for vår felles komponentknapp.
Å skrive historier er ikke så vanskelig. En historie definerer tilstanden til en komponent. Hvis du ser rekvisittene til en komponent, vil du lett forstå forskjellige brukstilfeller av komponenten.
La oss skrive noen historier ved å gi valgfrie rekvisitter.
export const largeButton = () => (
<Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
<Button
text="Outline Small Button"
onClick={() => {}}
size="small"
type="outline"
/>
);
export const rectangularLargeButton = () => (
<Button
text="Rectangular Large Button"
onClick={() => {}}
size="large"
variant="rectangular"
/>
);
export const disabledButton = () => (
<Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);
export const warningButton = () => (
<Button
text="Warning Button"
onClick={() => {}}
backgroundColor="orange"
/>
);
De tre ovennevnte historiene definerer forskjellige brukstilfeller av vår komponentknapp. Nå er det din tur til å legge til noen andre tilfeller av historier for vår felles komponent. Prøv å legge til disabledSamllRectangularButton, dangerButton, successDisabledButton, etc..,
Jeg kommer ikke til å oppgi kode for de ovennevnte tilfellene. Du må skrive det på egen hånd for å forstå det. Du kan se den komplette historiekoden som vi har skrevet til nå.
import React from "react";
import { Button } from "./Button";
export default {
title: "src/common/Button",
};
export const defaultButton = () => (
<Button text="Default Button" onClick={() => {}} />
);
export const largeButton = () => (
<Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
<Button
text="Outline Small Button"
onClick={() => {}}
size="small"
type="outline"
/>
);
export const rectangularLargeButton = () => (
<Button
text="Rectangular Large Button"
onClick={() => {}}
size="large"
variant="rectangular"
/>
);
export const disabledButton = () => (
<Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);
export const warningButton = () => (
<Button
text="Disabled Button"
onClick={() => {}}
backgroundColor="orange"
/>
);
Nå har du fullt grep om å skrive historier for en komponent.
La oss hoppe inn i neste seksjon hvor vi vil lære om tillegg og hvordan de øker historiene våre.
Storybook-tillegg
Vi vil ha flere tillegg tilgjengelig som standard. I delen vil vi utforske de mest nyttige tilleggene for utviklingen vår.
La oss forsterke Button-historiene våre.
Kontroller
Kontroller legger til en funksjon for å gi tilpassede rekvisitter til komponenten i selve historieboken. For Button-komponenten vår kan vi legge til kontroller for å endre de forskjellige rekvisittene i historieboken.
La oss si at vi må finne den beste fargen for Button-bakgrunnsfargen. Det vil være tidkrevende hvis vi tester det for å sjekke bakgrunnsfargen ved å gi en etter en til komponenten. I stedet kan vi legge til en kontroll som lar oss velge den forskjellige fargen i historieboken. Vi kan teste bakgrunnsfargen i selve historieboken.
La oss se hvordan du legger til kontroller i Button-historiene våre.
Først må vi definere alle rekvisittene under tittelen som følger.
export default {
title: "src/common/Button",
argTypes: {
text: { control: "text" },
backgroundColor: { control: "color" },
isDisabled: { control: "boolean" },
size: {
control: { type: "select", options: ["small", "medium", "large"] },
},
type: {
control: { type: "select", options: ["filled", "outline"] },
},
variant: {
control: { type: "select", options: ["oval", "rectangular"] },
},
},
};
Deretter skiller du rekvisittene fra komponenten og gir dem som argumenter som følger.
export const outlineSmallButton = (args) => (
<Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
text: "Outline Small Button",
size: "small",
type: "outline",
};
Du kan se kontrollene nederst i forhåndsvisningsvinduet for komponenten.
Du kan se kontrollfanen nederst i forhåndsvisningsvinduet for komponenten. Lek rundt det.
Oppdater alle historiene som ovenfor. Dette er mer som å kjenne syntaksen til storybook-tilleggene. I argTypes har vi brukt forskjellige typer kontroller. Du kan finne alle kontrollene som finnes i historieboken her.
Oppdaterte knappehistorier vil se ut som følger.
import React from "react";
import { Button } from "./Button";
export default {
title: "src/common/Button",
argTypes: {
text: { control: "text" },
backgroundColor: { control: "color" },
isDisabled: { control: "boolean" },
size: {
control: { type: "select", options: ["small", "medium", "large"] },
},
type: {
control: { type: "select", options: ["filled", "outline"] },
},
variant: {
control: { type: "select", options: ["oval", "rectangular"] },
},
},
};
export const defaultButton = (args) => <Button {...args} onClick={() => {}} />;
defaultButton.args = {
text: "Default Button",
};
export const largeButton = (args) => (
<Button {...args} onClick={() => {}} size="large" />
);
largeButton.args = {
text: "Large Button",
};
export const outlineSmallButton = (args) => (
<Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
text: "Outline Small Button",
size: "small",
type: "outline",
};
export const rectangularLargeButton = (args) => (
<Button {...args} onClick={() => {}} />
);
rectangularLargeButton.args = {
text: "Rectangular Large Button",
size: "large",
variant: "rectangular",
};
export const disabledButton = (args) => <Button {...args} onClick={() => {}} />;
disabledButton.args = {
text: "Disabled Button",
isDisabled: true,
};
export const warningButton = (args) => <Button {...args} onClick={() => {}} />;
warningButton.args = {
text: "Warning Button",
backgroundColor: "orange",
};
Handlinger
Handlinger er hendelser i JavaScript. Vi kan klikke på en knapp som er en hendelse i JavaScript. Vi kan gjøre noen handlinger ved å klikke på knappen ved å bruke handlingstillegget.
Med handlinger kan vi teste om arrangementene fungerer som de skal eller ikke. Deaktivert-knappen kan ikke klikkes og aktivert-knappen må være klikkbar. Vi kan sikre det ved hjelp av handlingene.
La oss se hvordan du legger til handling i knappen klikk.
Vi har gitt anonym funksjon til onClick-rekvisittene tidligere. Nå må vi oppdatere den.
- Importer handlingen fra storybook-tillegget ved å bruke følgende uttalelse.
import { action } from "@storybook/addon-actions";
- Erstatt alle () => {} med følgende setning.
action("Button is clicked!")
Gå nå til historieboken og klikk på en knapp. Du vil se meldingen skrevet ut under handlingsfanen som er ved siden av kontrollfanen. Meldingen vil ikke bli skrevet ut hvis du klikker på deaktivert-knappen da den er deaktivert.
Vi kan bruke handlingen til forskjellige hendelser som onChange, onMouseOver, onMouseOut, osv.., for å sikre at de fungerer som de skal. Prøv å implementere det samme for onChange for et input-element.
Se dokumentasjonen for tiltak her.
Bakgrunn
Vi kan endre bakgrunnen til forhåndsvisningsvinduet ved å bruke bakgrunnstillegget. Vi trenger ikke å skrive noen kode. Bare endre det inne i historieboken. Du kan se gif-en nedenfor.
Viewport
Vi kan også teste responsen til komponentene våre i historieboken. Se gif-en nedenfor for å finne ut mer om visningsportalternativene.
Dokumenter
Vi kan dokumentere komponentene våre i historieboken ved å bruke docs-tillegget. Det er mer nyttig når vi jobber i et team. De vil lese komponenten og forstå den direkte. Det sparer mye tid for utviklerne.
I historiebøkers forhåndsvisningsvindu for komponenter kan du se Dokumenter øverst til høyre til Canvas-fanen. Den vil inneholde alle dokumentene til alle historiene til en komponent. Vi må bruke Button.stories.mdx hvis vi vil dokumentere for komponenten som inkluderer både markdown og komponentgjengivelse. Vi skriver bare litt ekstra markdown-kode inni den sammen med komponenthistoriene.
Vi skriver et dokument for historiene våre. Koden inkluderer markdown og komponentgjengivelse. Det hele er bare å lære syntaksen. Du får det første øyekast.
La oss se Button.stories.mdx doc-koden.
<!--- Button.stories.mdx -->
import {
Meta,
Story,
Preview,
ArgsTable
} from '@storybook/addon-docs/blocks';
import { Button } from './Button';
<Meta title="MDX/Button" component={Button} />
# Button Documentation
With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.
<ArgsTable of={Button} />
export const Template = (args) => <Button {...args} />
## Default Button
We can write the documentation related to the Default Button
<Preview>
<Story name="Default Button" args={{
text: 'Default Button'
}}>
{Template.bind({})}
</Story>
</Preview>
## Large Button
We are writing sample docs for two stories, you can write rest of them
<Preview>
<Story name="Large Button" args={{
text: "Large Button",
}}>
{Template.bind({})}
</Story>
</Preview>
Finn ut mer om dokumentasjonskomponentene her.
Du kan finne ut mer om tillegg her.
Konklusjon
Håper du likte veiledningen og lærte om historieboken. Og bruk det effektivt i teamet ditt for å gjøre arbeidet ditt produktivt.
Ny på React? Sjekk ut disse læringsressursene.
Lykke til med koding 🙂