Een van de voordelen van het gebruik van React is dat je UI-componenten kunt maken, deze overal in je applicatie kunt hergebruiken en uiteindelijk code-churn kunt voorkomen. Toch is het moeilijk om met alleen React volledig onafhankelijke UI-componenten te maken. U moet weergaven maken waarin deze componenten worden weergegeven om ze te kunnen zien.

Dit is waar Storybook binnenkomt. Hiermee kun je UI-componenten maken en testen in een onafhankelijke runtime-omgeving en in deze tutorial leer je hoe je deze in React kunt gebruiken. Aan het einde van dit bericht heb je een knopcomponent gemaakt en een aantal van de mogelijke statussen gedocumenteerd in React.

Wat is verhalenboek?

Verhalenboek is een ontwikkeltool waarmee u uw UI-componenten kunt uitvoeren en testen zonder een complete React-omgeving. Dit maakt component-gedreven ontwikkeling makkelijker omdat je de componenten los van elkaar kunt ontwikkelen.

Met Storybook kun je, als je eenmaal een component hebt gemaakt, meerdere verhalen maken die de verschillende statussen van de component definiëren. Voor een knoponderdeel kunnen deze statussen de primaire status, secundaire status, uitgeschakelde status, enzovoort omvatten.

instagram viewer

Omdat je met Storybook code kunt opnemen bij het maken van de verhalen, kan het ook dienen als documentatietool.

Om Storybook te gebruiken, moet Node op je computer zijn geïnstalleerd en moet je een basiskennis hebben van React.

Een React-toepassing maken

Om Storybook te gaan gebruiken, je maakt eerst een React-project aan en maak vervolgens componenten en hun verhalen.

Voer de volgende opdracht uit om een ​​React-toepassing te maken:

npx creëren-reageer-app btn-verhalenboek

Dit genereert een map met de naam btn-storybook met alle afhankelijkheden die een React-toepassing nodig heeft.

Vervolgens kunt u met nog een paar stappen Storybook installeren en uitvoeren.

Verhalenboek installeren

Navigeer naar de btn-storybook-map en installeer storybook:

CD btn-verhalenboek
npx verhalenboek init

Aangezien je create-react-app hebt gebruikt, is dit de enige opdracht die je hoeft uit te voeren om Storybook in te stellen. Storybook zal alle benodigde afhankelijkheden installeren en alle benodigde configuratie uitvoeren. Het zal ook enkele standaardverhalen creëren om u op weg te helpen.

Zodra de bovenstaande opdracht is uitgevoerd, start u het verhalenboek met behulp van de volgende code.

npm run verhalenboek

Hiermee wordt het verhalenboek-dashboard in uw browser geopend. Het zou er ongeveer zo uit moeten zien:

De knopcomponent maken

Maak in de map ./src een map met de naam Components en maak daarin een andere map met de naam Button. De Button-map zou in dit pad moeten staan: ./src/Components/Button.

Maak nu in deze map Button en voeg de volgende code toe:

importeren PropTypes van "prop-types"
functie Knop({ label, backgroundColor = "#6B4EFF", kleur = "wit", borderRadius="48px", grens="geen"}) {
const stijl = {
 Achtergrond kleur,
 opvulling: "0.5rem 1rem",
 kleur,
 grensstraal,
 grens
 }
opbrengst (
<knopstijl={style}>
 {label}
</button>
 )
}
Knop.propTypes = {
label: PropTypes.snaar,
Achtergrond kleur: PropTypes.snaar,
kleur: PropTypes.snaar,
grens:PropTypes.string,
grensstraal: PropTypes.snaar,
}
exporterenstandaard Knop;

Dit onderdeel accepteert sommige Reageer rekwisieten die het knoplabel en de bijbehorende stijlen bevatten. Je gebruikt propTypes ook om de typen van de doorgegeven props te controleren en een waarschuwing te geven als je het verkeerde type gebruikt. De component retourneert een knopelement.

De knopverhalen maken

Toen je Storybook in het React-project installeerde, genereerde het een map met enkele verhaalvoorbeelden, genaamd verhalen. Navigeer naar die map en verwijder alles erin. Je maakt de verhalen vanaf het begin.

U maakt twee verhalen die de primaire knop en de secundaire knop vertegenwoordigen. Elk van deze knoppen heeft een andere stijl die het onderscheidt van de rest. Je kunt ze allemaal zien in het Storybook-dashboard zodra je de verhalen hebt gemaakt.

Maak in de map verhalen een nieuw bestand met de naam button.stories.js. Het is belangrijk om op te nemen: .verhalen vóór .js, want dat is wat Storybook vertelt, wat een verhalenbestand is.

Importeer het onderdeel Knop.

importeren Knop van "../Onderdelen/Knop/Knop"

Exporteer vervolgens de titel van het onderdeel en het onderdeel zelf. Merk op dat de titel optioneel is.

exporterenstandaard {
 titel: "Componenten/knop",
 onderdeel: Knop,
}

Het eerste verhaal dat u gaat maken, is voor de knop Primair. Maak dus een nieuwe functie met de naam Primair en exporteer deze.

export const Primair = () =><Knop backgroundColor="#6B4EFF" label="primair"/>

Als u nu naar het Storybook-dashboard gaat, kunt u de weergegeven knop zien.

Om de gerenderde component live te bewerken en de status ervan op het Storybook-dashboard te wijzigen, gebruikt u args. Met Args kunt u argumenten doorgeven aan Storybook die, wanneer ze worden gewijzigd, ervoor zorgen dat de component opnieuw wordt weergegeven.

Maak een functiesjabloon om de argumenten van het knopverhaal te definiëren.

const Sjabloon = args =><Knop {...args}/>

Deze sjabloon accepteert argumenten en geeft ze door als rekwisieten aan de component Button.

U kunt nu het primaire verhaal herschrijven met behulp van de sjabloon zoals hieronder weergegeven.

exporterenconst Primair = Sjabloon.bind({})
Primair.args = {
 Achtergrond kleur: "#6B4EFF",
 label: "primair",
}

Als je het Storybook-dashboard bekijkt, zou je de bedieningselementen onderaan moeten zien. Met deze bedieningselementen kunt u wijzigen hoe de knop wordt weergegeven. U kunt de achtergrondkleur, tekstkleur, label, rand en randradius wijzigen.

U hoeft alleen de args-waarden te wijzigen om de andere verhalen te maken. Gebruik de volgende code om bijvoorbeeld een secundaire knop te maken.

exporterenconst Secundair = Sjabloon.bind({})
Secundair.args = {
 Achtergrond kleur: "#E7E7FF",
 kleur: "#6B4EFF",
 label: "Ondergeschikt",
}

Navigeer op het Storybook-dashboard naar verschillende verhalen door erop te klikken in de zijbalk. U zult zien hoe elk wordt weergegeven. U kunt naar wens doorgaan met het toevoegen van meer statussen aan de knopverhalen. Probeer een overzicht of een overzichtsverhaal toe te voegen.

UI-componenten testen

Deze tutorial gaf je een korte introductie tot het gebruik van Storybook met React UI-componenten. Je hebt geleerd hoe je Storybook toevoegt aan een React-project en hoe je een basisverhaal maakt voor een Button-component met argumenten.

Het is je misschien opgevallen dat je tijdens dit proces aan het testen was hoe de knopcomponent in verschillende toestanden werd weergegeven. U schrijft misschien meer code, maar als u eenmaal de componentverhalen hebt geschreven, minimaliseert u eventuele fouten die kunnen optreden bij het hergebruik van componenten in uw toepassing. Bovendien zal het gemakkelijker zijn om de fout op te sporen als deze zich voordoet. Dat is het mooie van componentgestuurde ontwikkeling.