CSF3-Stories schreiben
Exportieren Sie ein standardmäßiges Meta-Objekt und benannte Stories mit dem Component Story Format 3.
CSF3-Stories schreiben ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist CSF3?
Component Story Format 3 (CSF3) ist das aktuelle Storybook-Format für Stories. Stories sind einfache JavaScript-/TypeScript-Objekte – für einfache Fälle ist keine Render-Funktion erforderlich.
Der Meta-Export
Jede Story-Datei muss einen Default-Export haben – das Meta-Objekt –, der die Komponente beschreibt und die gemeinsame Story-Konfiguration festlegt.
import type { Meta } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'UI/Button', // Storybook sidebar path
component: Button,
tags: ['autodocs'], // enables auto-generated docs page
};
export default meta;Benannte Story-Exporte
Jeder benannte Export aus der Datei ist eine Story. In CSF3 ist eine Story ein Objekt mit einer args-Eigenschaft, den Props der Komponente.
import type { StoryObj } from '@storybook/react';
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: { label: 'Click me', variant: 'primary' },
};
export const Secondary: Story = {
args: { label: 'Cancel', variant: 'secondary' },
};
export const Disabled: Story = {
args: { label: 'Unavailable', disabled: true },
};Story-Vererbung
Stories übernehmen Args aus dem Meta-Objekt. Legen Sie gemeinsame Standardwerte in meta.args fest und überschreiben Sie sie bei Bedarf pro Story.
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // from @storybook/test
disabled: false,
},
};
export const Large: Story = {
args: { size: 'large', label: 'Large Button' }, // merges with meta args
};Render-Funktion überschreiben
Stellen Sie in einer Story eine render-Funktion bereit, wenn komplexe Fälle eine eigene JSX-Umhüllung oder mehrere Instanzen benötigen.
export const WithIcon: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: 8 }}>
<Button {...args} icon={<StarIcon />} />
<Button {...args} icon={<HeartIcon />} />
</div>
),
args: { label: 'Action' },
};Decorators für einzelne Stories
Fügen Sie einer Story ein decorators-Array hinzu, um sie nur für diese Story in zusätzliche Provider oder ein bestimmtes Layout einzuschließen.
export const InsideCard: Story = {
decorators: [
(Story) => (
<div style={{ padding: 24, background: '#f5f5f5' }}>
<Story />
</div>
),
],
args: { label: 'Card Button' },
};Parameter für Stories
Verwenden Sie parameters, um Add-ons pro Story zu konfigurieren – beispielsweise den Hintergrund oder den Viewport für einen bestimmten Zustand festzulegen.
export const DarkMode: Story = {
parameters: {
backgrounds: { default: 'dark' },
},
args: { label: 'Dark Button', variant: 'primary' },
};Das autodocs-Tag
Wenn Sie dem Meta-Objekt tags: ['autodocs'] hinzufügen, wird automatisch eine Dokumentationsseite mit einer Prop-Tabelle und Live-Beispielen aus allen benannten Stories generiert.
Eine Story für jeden Zustand
Schreiben Sie für jeden wichtigen Zustand einer Komponente eine Story: leer, wird geladen, Fehler, ein Element, viele Elemente, RTL-Layout usw.
export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };Namenskonventionen
Verwenden Sie PascalCase-Namen für Stories, die den Zustand beschreiben. Vermeiden Sie allgemeine Namen wie Default – seien Sie spezifisch: PrimaryDisabled, SecondaryWithIcon.
Stories mit title gruppieren
Mit der Schreibweise mit Schrägstrichen in title im Meta-Objekt erstellen Sie verschachtelte Gruppen in der Storybook-Seitenleiste: 'Forms/Input' erstellt eine Forms-Gruppe mit einer Input-Untergruppe.
const meta: Meta<typeof TextInput> = {
title: 'Forms/TextInput',
component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...Stories in Tests wiederverwenden
CSF3-Stories sind einfache Objekte. Sie können sie daher in Unit-Tests oder anderen Stories importieren und kombinieren.
import { Primary } from './Button.stories';
test('renders primary button', () => {
render(<Button {...Primary.args} />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});Kurzer Check
Wie definieren Sie in CSF3 die Props bzw. den Zustand einer Story?
Zusammenfassung
CSF3-Stories sind typisierte Objekte mit args. Legen Sie gemeinsame Standardwerte in meta.args fest, überschreiben Sie sie pro Story, verwenden Sie render für eigenes JSX und fügen Sie tags: ['autodocs'] für automatisch generierte Dokumentation hinzu. Schreiben Sie für jeden wichtigen Zustand einer Komponente eine Story.
Häufig gestellte Fragen
Ist die Lektion „CSF3-Stories schreiben“ kostenlos?
Ja — der vollständige Text von „CSF3-Stories schreiben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „CSF3-Stories schreiben“?
Exportieren Sie ein standardmäßiges Meta-Objekt und benannte Stories mit dem Component Story Format 3. Du übst React 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 React Academy zu starten?
Keine Vorkenntnisse erforderlich. React 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 2 von 4.
Wie lange dauert die Lektion „CSF3-Stories schreiben“?
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 React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React 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 in einem React-Projekt einrichten
- CSF3-Stories schreiben
- Args, Controls und das Actions-Addon
- Storybook-Tests und visuelle Regression