Frontend Academy · Les

Storybook: stories, Controls en Docs

Schrijf stories voor elke componentstatus, gebruik Controls om props interactief aan te passen en genereer Docs-pagina's vanuit JSDoc en argTypes.

Les 1 van 414 stappen

Storybook: stories, Controls en Docs is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat is Storybook?

Storybook is een werkplaats voor UI-componenten, los van je app. Je schrijft 'stories' — voorbeelden van het gebruik van elke component in verschillende toestanden — en bekijkt ze in een ontwikkelserver. Onmisbaar voor ontwerpsystemen.

Waarom Storybook gebruiken?

1) Ontwikkel componenten geïsoleerd, zonder een appcontext op te zetten. 2) Bekijk alle toestanden visueel (laden, fout, leeg). 3) Ontwerpers en productmanagers kunnen de catalogus bekijken. 4) Genereert documentatie. 5) Automatiseert visuele regressietests.

Storybook installeren

Gebruik het officiële initialisatieprogramma — het detecteert je framework en configureert alles.

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

Een story schrijven (CSF 3.0)

Component Story Format 3: standaardexport = metagegevens, benoemde exports = stories.

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

Meerdere stories per component

Gebruik één story per belangrijke toestand: standaard, hoveren, laden, fout, leeg en gevuld. Beoordelaars kunnen erdoorheen klikken en elke variant in één oogopslag bekijken.

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Controls (args-tabel)

De Controls-addon van Storybook zet het args-object om in interactieve formulierbesturingselementen. Pas prop-waarden live aan in de interface om randgevallen te testen.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Actions-addon

Gebruik action() om aanroepen van gebeurtenishandlers vast te leggen in het deelvenster Actions. Ideaal om callbacks te testen zonder echte status aan te sluiten.

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs — automatisch gegenereerde documentatie

Voeg tags: ['autodocs'] toe aan de metagegevens; Storybook genereert een Docs-pagina met de prop-tabel, beschrijvingen en weer te geven voorbeelden van de component.

MDX voor uitgebreide documentatie

Schrijf componentdocumentatie in MDX — Markdown met ingebedde JSX. Combineer uitleg met livevoorbeelden van componenten.

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

Decorators — stories met context omwikkelen

Wikkel stories met decorators in providers (Theme, Router, Redux).

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

Visuele regressietests

Chromatic (van het Storybook-team) maakt bij elke commit een schermafbeelding van elke story en vergelijkt die met de referentiebasis. Zo worden visuele regressies automatisch gevonden.

Storybook implementeren

npm run build-storybook maakt een statische website in storybook-static/. Implementeer die op Netlify, Vercel of GitHub Pages — zo krijgen niet-ontwikkelaars een componentencatalogus die ze kunnen bekijken.

Korte controle

Wat doet het toevoegen van tags: ['autodocs'] aan de Storybook-metagegevens van een component?

Beantwoord dit in de interactieve les

Samenvatting: Storybook

Geïsoleerde werkplaats voor UI-componenten. CSF 3.0: standaardexport = metagegevens, benoemde exports = stories. argTypes voor Controls. action() om callback-aanroepen vast te leggen. tags: ['autodocs'] voor automatisch gegenereerde documentatie. MDX voor uitgebreide uitleg met JSX. Decorators voegen providers toe. Chromatic voor visuele regressies. Build-storybook voor statische hosting.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Storybook: stories, Controls en Docs” gratis?

Ja — de volledige tekst van “Storybook: stories, Controls en Docs” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Storybook: stories, Controls en Docs”?

Schrijf stories voor elke componentstatus, gebruik Controls om props interactief aan te passen en genereer Docs-pagina's vanuit JSDoc en argTypes. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Storybook: stories, Controls en Docs”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?

Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Frontend Academy