Aan de slag met Storybook in React

Heb je ooit geprobeerd al je UI-componenten op een plaats in React te plaatsen?

Als je nieuw bent in de wereld van React, dan waarschijnlijk niet.

Wat wordt daarmee bedoeld?

Zie de reageer-mooi-dnd voorbeelden.

Wat je in de voorbeelden hebt gezien, worden verhalen genoemd. En de tool die wordt gebruikt om verhalen te maken, heet Storybook.

Nu heb je begrepen waar we het in dit artikel over gaan hebben. Laten we zonder oponthoud verkennen.

Wat is verhalenboek?

Storybook is een door de gebruikersinterface geïsoleerde ontwikkelomgeving die een speeltuin biedt voor uw componenten. We kunnen op verschillende manieren met onze componenten spelen zonder onze hoofdapp uit te voeren. We kunnen het verhalenboek in zijn poort uitvoeren met de installatie.

Het is niet beperkt tot React. We kunnen het verhalenboek gebruiken met de meeste frontend-frameworks zoals Vue, Angular, Mithril, Marko, Svelte, enz.,

Je kunt meer vinden over het verhalenboek hier.

Wat is een verhaal?

Een story definieert de gerenderde status van uw component. Als we een gemeenschappelijk onderdeel nemen, kunnen we het op verschillende manieren gebruiken met rekwisieten. We kunnen een verhaal schrijven voor elk van die staten.

Laten we zeggen dat we een Button-component hebben.

Een knop kan verschillende statussen hebben, zoals uitgeschakeld, laden, primair, secundair, klein, groot, medium, enz. Als we alle statussen opsommen, wordt het erg moeilijk om verder te gaan in de tutorial. Ik denk dat je het begrijpt. Je krijgt het meer als je met het verhalenboek gaat werken.

U kunt de verhalen van de knop in verschillende gevallen zien (Large, Medium, Small).

Storybook opzetten in een project

We zullen een verhalenboek opzetten in een reactieproject.

Laten we gaan.

  • Maak een react-project met de volgende opdracht. Je kunt noemen wat je wilt.
npx create-react-app storybook-demo
  • Installeer nu het verhalenboek in uw project met de volgende opdracht.
npx sb init

We hebben de opzet voor het verhalenboek voltooid.

Het verhalenboek biedt een aparte server voor ons.

Hoe eraan te beginnen?

Het verhalenboek voegt automatisch een opdracht toe aan ons scriptbestand. U kunt het controleren in het bestand package.json in de sectie scripts. Voer voorlopig de volgende opdracht uit om de verhalenboekserver te starten.

npm run storybook

Storybook start een nieuwe server met de poort die is opgegeven in het scriptgedeelte van het bestand package.json. Het zal automatisch het verhalenboek openen in onze standaardbrowser (hetzelfde als de reactieserver).

Je ziet er standaard verschillende verhalen in. U kunt ze verwijderen als u dat niet wilt of ze bewaren ter referentie. Zoals we in de vorige sectie hebben besproken, kan een knop meerdere statussen hebben. Je kunt ze zien in het verhalenboek (niet alle genoemde statussen). We gaan een groot aantal verhalen voor de knop schrijven in het laatste deel van deze zelfstudie.

Verken verschillende secties van het verhalenboek en raak vertrouwd met de verschillende secties. We gaan er een paar behandelen in de tutorial.

Laten we ons eerste verhaal schrijven.

Verhalenboek testen

We hebben het verhalenboek zien lopen en enkele voorbeelden erin.

  • Maak een map met de naam Button in de map src.
  • Maak bestanden genaamd Button.jsx, Button.css en constants.js
  • Plaats de respectievelijke code uit de onderstaande fragmenten in de bestanden.

Knop.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 };

Knop.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;
}

constanten.js

export const buttonTypes = {
    outline: "outline",
    filled: "filled",
};

export const buttonVariants = {
    oval: "oval",
    rectangular: "rectangular",
};

export const buttonSizes = {
    small: "small",
    medium: "medium",
    large: "large",
};

Wat is die code?

  Fix Kan niet downloaden van Microsoft Store

We hebben een gemeenschappelijk onderdeel voor Button geschreven dat op verschillende manieren kan worden gebruikt. Nu hebben we een component die verschillende statussen kan hebben.

Laten we ons eerste verhaal schrijven door de onderstaande stappen te volgen.

  • Maak een bestand met de naam Button.stories.jsx
  • Importeer React en onze Button-component in het bestand.
  • Definieer nu een titel of pad voor onze samenstellende verhalen. We zullen het definiëren met behulp van de volgende code.
export default {
   title: ‘common/Button’,
}

De bovenstaande code plaatst alle verhalen in het huidige bestand in de map common/Button/.

  • Exporteer een knop met verplichte rekwisieten als volgt.
export const defaultButton = () => (
    <Button text=”Default Button” onClick={() => {}} />
);

We hebben ons eerste verhaal voltooid. Voer het verhalenboek uit met de volgende opdracht en bekijk de uitvoer.

npm run storybook

We zullen uiteindelijk meer verhalen schrijven, maak je geen zorgen.

Hoe is het nuttig bij frontend-ontwikkeling?

Wat is het belangrijkste voordeel van het gebruik van een verhalenboek?

Laten we zeggen dat we in een team van 10 leden werken. En we moeten gemeenschappelijke componenten controleren die iedereen heeft geschreven voor het huidige werkproject.

Hoe kunnen we dat doen?

We moeten naar elk gemeenschappelijk onderdeel gaan om ze te controleren. Maar het is tijdrovend en geen voorkeursmanier voor ons. Hier komt ons nieuwe gastverhalenboek.

Hoe het te gebruiken om ons probleem op te lossen?

We kunnen verhalen schrijven voor de gemeenschappelijke componenten (alle UI-componenten) met behulp van een verhalenboek. En wanneer je teamgenoot de gemeenschappelijke componenten van anderen wil controleren, draaien ze gewoon de verhalenboekserver en zien ze alle UI-componenten daar, zoals we hierboven hebben gezien.

We kunnen veel meer doen met de gerenderde componenten in het verhalenboek. Storybook heeft een concept genaamd Addons dat superkrachten geeft aan onze verhalen.

Laten we zeggen dat we het reactievermogen van de UI-componenten in het verhalenboek zelf moeten controleren, we kunnen een add-on genaamd Viewport gebruiken in het verhalenboek. We zullen meer leren over de add-ons in de komende secties.

Werken met verhalenboek

In deze sectie zullen we verschillende verhalen schrijven die verschillende statussen van onze gemeenschappelijke component Button definiëren.

Verhalen schrijven is niet zo moeilijk. Een verhaal definieert een toestand van een component. Als u de rekwisieten van een component ziet, begrijpt u gemakkelijk verschillende gebruiksscenario’s van de component.

Laten we wat verhalen schrijven door optionele rekwisieten te geven.

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 bovenstaande drie verhalen definiëren verschillende use-cases van onze component Button. Nu is het jouw beurt om enkele andere gevallen van verhalen toe te voegen voor onze gemeenschappelijke component. Probeer uitgeschakeldSamllRectangularButton, dangerButton, successDisabledButton, enz., toe te voegen

  12 Beste animatiesoftware om Explainer-video te maken

Ik ga geen code verstrekken voor de bovenstaande gevallen. Je moet het zelf schrijven om het te begrijpen. Je kunt de volledige verhaalcode zien die we tot nu toe hebben geschreven.

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"
    />
);

Nu heb je volledige grip op het schrijven van verhalen voor een component.

Laten we naar het volgende gedeelte gaan waar we meer te weten komen over add-ons en hoe ze onze verhalen een boost geven.

Storybook-add-ons

We hebben standaard meerdere add-ons beschikbaar. In de sectie zullen we de nuttigste add-ons voor onze ontwikkeling verkennen.

Laten we onze Button-verhalen een boost geven.

Controles

Besturing voegt een functie toe om aangepaste rekwisieten te geven aan de component in het verhalenboek zelf. Voor onze Button-component kunnen we bedieningselementen toevoegen om de verschillende rekwisieten in het verhalenboek te wijzigen.

Laten we zeggen dat we de beste kleur moeten vinden voor de achtergrondkleur van de knop. Het zal tijdrovend zijn als we het testen om de achtergrondkleur te controleren door één voor één aan het onderdeel te geven. In plaats daarvan kunnen we een besturingselement toevoegen waarmee we de andere kleur in het verhalenboek kunnen kiezen. We kunnen de achtergrondkleur testen in het verhalenboek zelf.

Laten we eens kijken hoe we bedieningselementen kunnen toevoegen aan onze knopverhalen.

Eerst moeten we alle rekwisieten onder de titel als volgt definiëren.

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"] },
        },
    },
};

Scheid vervolgens de rekwisieten van het onderdeel en geef ze als volgt als argumenten.

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

U kunt de bedieningselementen onder aan het componentvoorbeeldvenster zien.

U kunt het tabblad met besturingselementen onder aan het componentvoorbeeldvenster zien. Speel er omheen.

Werk alle verhalen bij zoals hierboven. Dit lijkt allemaal meer op het kennen van de syntaxis van de verhalenboek-add-ons. In de argTypes hebben we verschillende soorten besturingselementen gebruikt. Je vindt alle besturingselementen die aanwezig zijn in het verhalenboek hier.

Bijgewerkte knopverhalen zien er als volgt uit.

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",
};

Acties

Acties zijn gebeurtenissen in JavaScript. We kunnen op een knop klikken die een gebeurtenis is in JavaScript. We kunnen enkele acties uitvoeren door op de knop te klikken met behulp van de actie-add-on.

  Hoe gecodeerde videoweergave in VLC Player te repareren

Met acties kunnen we testen of de gebeurtenissen goed werken of niet. Op de uitgeschakelde knop kan niet worden geklikt en op de ingeschakelde knop moet kunnen worden geklikt. We kunnen ervoor zorgen met behulp van de acties.

Laten we eens kijken hoe we actie kunnen toevoegen aan de klik op de knop.

We hebben eerder een anonieme functie gegeven aan de onClick-props. Nu moeten we het bijwerken.

  • Importeer de actie uit de storybook-add-on met behulp van de volgende instructie.
import { action } from "@storybook/addon-actions";
  • Vervang alle () => {} door de volgende instructie.
action("Button is clicked!")

Ga nu naar het verhalenboek en klik op een knop. U ziet het bericht afgedrukt onder het tabblad Acties naast het tabblad Bediening. Het bericht wordt niet afgedrukt als u op de uitgeschakelde knop klikt, omdat deze is uitgeschakeld.

We kunnen de actie gebruiken voor verschillende gebeurtenissen zoals onChange, onMouseOver, onMouseOut, enz., om er zeker van te zijn dat ze correct werken. Probeer hetzelfde te implementeren voor onChange voor een invoerelement.

Zie de documentatie voor acties hier.

Achtergrond

We kunnen de achtergrond van het voorbeeldvenster wijzigen met behulp van de achtergrond-add-on. We hoeven geen code te schrijven. Verander het gewoon in het verhalenboek. Je kunt de gif hieronder zien.

Uitkijk postje

We kunnen ook het reactievermogen van onze componenten in het verhalenboek testen. Zie de onderstaande gif om meer te weten te komen over de viewport-opties.

Documenten

We kunnen onze componenten in het verhalenboek documenteren met behulp van de docs-add-on. Het is handiger als we in een team werken. Ze zullen het onderdeel lezen en het direct begrijpen. Het bespaart de ontwikkelaars veel tijd.

In het voorbeeldvenster van de componenten van Storybooks zie je Documenten rechtsboven op het tabblad Canvas. Het bevat alle documenten van alle verhalen van een component. We moeten Button.stories.mdx gebruiken als we willen documenteren voor de component die zowel markdown als componentrendering omvat. We schrijven er gewoon wat extra prijsverlagingscode in, samen met de componentverhalen.

We schrijven een document voor onze verhalen. De code omvat markdown en componentweergave. Het is allemaal gewoon het leren van de syntaxis. Je krijgt het op het eerste gezicht.

Laten we de doc-code van Button.stories.mdx bekijken.

<!--- 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>

Lees meer over de documentatiecomponenten hier.

U kunt meer informatie vinden over add-ons hier.

Conclusie

Ik hoop dat je de tutorial leuk vond en het verhalenboek hebt leren kennen. En gebruik het effectief in uw team om uw werk productief te maken.

Nieuw om te reageren? Bekijk deze leermiddelen.

Veel plezier met coderen 🙂

gerelateerde berichten