Storybook: Stories, Controls und Docs
Schreiben Sie für jeden Komponentenstatus eine Story, passen Sie Props interaktiv mit Controls an und generieren Sie Docs-Seiten aus JSDoc und argTypes.
Storybook: Stories, Controls und Docs ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Storybook?
Storybook ist eine Werkstatt für UI-Komponenten, die von Ihrer App isoliert ist. Sie schreiben „Stories“ — beispielhafte Verwendungen jeder Komponente in verschiedenen Zuständen — und sehen sie in einem Entwicklungsserver durch. Für Designsysteme ist es unverzichtbar.
Warum Storybook verwenden?
1) Entwickeln Sie Komponenten isoliert, ohne einen App-Kontext einzurichten. 2) Überprüfen Sie alle Zustände visuell (Laden, Fehler, leer). 3) Designer und Product Manager können den Katalog durchsehen. 4) Erstellen Sie Dokumentation. 5) Automatisieren Sie visuelle Regressionstests.
Storybook installieren
Verwenden Sie den offiziellen Initialisierer — er erkennt Ihr Framework und konfiguriert alles.
npx storybook@latest init
# Adds:
# .storybook/ config
# src/stories/ example stories
# scripts: 'storybook' and 'build-storybook'
npm run storybook # opens http://localhost:6006Eine Story schreiben (CSF 3.0)
Component Story Format 3: Default-Export = Metadaten, benannte Exporte = 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 }
};Mehrere Stories pro Komponente
Eine Story pro wichtigem Zustand: Standard, Hover, Laden, Fehler, leer und befüllt. Reviewer können sich durchklicken und jede Variante auf einen Blick sehen.
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-Tabelle)
Das Controls-Addon von Storybook verwandelt das args-Objekt in interaktive Formularelemente. Ändern Sie Prop-Werte direkt in der UI, um Sonderfälle zu testen.
const meta: Meta<typeof Button> = {
component: Button,
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger']
},
onClick: { action: 'clicked' }
}
};Actions-Addon
Verwenden Sie action(), um Aufrufe von Event-Handlern im Actions-Panel zu protokollieren. Ideal, um Callbacks zu testen, ohne echten State anzubinden.
argTypes: {
onClick: { action: 'clicked' },
onChange: { action: 'changed' }
}Autodocs — automatisch generierte Dokumentation
Fügen Sie tags: ['autodocs'] zu den Metadaten hinzu; Storybook erstellt eine Docs-Seite mit der Prop-Tabelle, Beschreibungen und darstellbaren Beispielen der Komponente.
MDX für ausführliche Dokumentation
Schreiben Sie die Dokumentation Ihrer Komponenten in MDX — Markdown plus eingebettetes JSX. Kombinieren Sie Fließtext mit Live-Beispielen von Komponenten.
{/* 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 mit Kontext umschließen
Umschließen Sie Stories mithilfe von Decorators mit Providern (Theme, Router, Redux).
export const decorators = [
(Story) => (
<ThemeProvider theme={lightTheme}>
<Story />
</ThemeProvider>
)
];Visuelle Regressionstests
Chromatic (vom Storybook-Team) erstellt bei jedem Commit einen Screenshot jeder Story und vergleicht ihn mit der Ausgangsbasis. So werden visuelle Regressionen automatisch erkannt.
Storybook deployen
npm run build-storybook erzeugt eine statische Website in storybook-static/. Deployen Sie sie auf Netlify, Vercel oder GitHub Pages — so erhalten auch Nichtentwickler einen durchsuchbaren Komponenten-Katalog.
Wissenscheck
Was bewirkt das Hinzufügen von tags: ['autodocs'] zu den Storybook-Metadaten einer Komponente?
Zusammenfassung: Storybook
Isolierte Werkstatt für UI-Komponenten. CSF 3.0: Default-Export = Meta, benannte Exporte = Stories. argTypes für Controls. action() zum Protokollieren von Callbacks. tags: ['autodocs'] für automatisch generierte Dokumentation. MDX für ausführlichen Fließtext plus JSX. Decorators fügen Provider hinzu. Chromatic für visuelle Regressionstests. Build-storybook für statisches Hosting.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Storybook: Stories, Controls und Docs“ kostenlos?
Ja — der vollständige Text von „Storybook: Stories, Controls und Docs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Storybook: Stories, Controls und Docs“?
Schreiben Sie für jeden Komponentenstatus eine Story, passen Sie Props interaktiv mit Controls an und generieren Sie Docs-Seiten aus JSDoc und argTypes. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Storybook: Stories, Controls und Docs“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Storybook: Stories, Controls und Docs
- Design-Tokens mit Style Dictionary
- Versionierung und Veröffentlichung auf npm
- Ein Designsystem verwenden