React Academy · leksjon

Skrive CSF3 Stories

Eksporter et standard meta-objekt og navngitte stories ved hjelp av Component Story Format 3.

Leksjon 2 av 414 trinn

Skrive CSF3 Stories er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva er CSF3

Component Story Format 3 (CSF3) er det gjeldende story-formatet i Storybook. Stories er vanlige JavaScript-/TypeScript-objekter – det trengs ingen render-funksjon i enkle tilfeller.

Meta-eksporten

Hver story-fil må ha en default-eksport – Meta-objektet – som beskriver komponenten og angir felles story-konfigurasjon.

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;

Navngitte story-eksporter

Hver navngitte eksport fra filen er en story. I CSF3 er en story et objekt med egenskapen args, som inneholder komponentens props.

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

Stories arver args fra meta-objektet. Angi felles standardverdier i meta.args, og overstyr dem per story etter behov.

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

Overstyring med render-funksjon

Angi en render-funksjon i en story for komplekse tilfeller som trenger egendefinert JSX-innpakking eller flere instanser.

export const WithIcon: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button {...args} icon={<StarIcon />} />
      <Button {...args} icon={<HeartIcon />} />
    </div>
  ),
  args: { label: 'Action' },
};

Dekoratorer på individuelle stories

Legg til en decorators-matrise i en story for å omslutte den med ekstra providere eller layout som bare gjelder denne storyen.

export const InsideCard: Story = {
  decorators: [
    (Story) => (
      <div style={{ padding: 24, background: '#f5f5f5' }}>
        <Story />
      </div>
    ),
  ],
  args: { label: 'Card Button' },
};

Parametere for stories

Bruk parameters til å konfigurere tillegg per story, for eksempel ved å angi bakgrunn eller visningsområde for en bestemt tilstand.

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  args: { label: 'Dark Button', variant: 'primary' },
};

autodocs-taggen

Hvis du legger til tags: ['autodocs'] i meta, genereres en automatisk dokumentasjonsside med prop-tabell og levende eksempler fra alle navngitte stories.

En story for hver tilstand

Skriv en story for hver meningsfulle komponenttilstand: tom, under innlasting, feil, ett element, mange elementer, RTL-layout og så videre.

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

Navnekonvensjoner

Bruk story-navn i PascalCase som beskriver tilstanden. Unngå generiske navn som Default – vær spesifikk: PrimaryDisabled, SecondaryWithIcon.

Gruppere stories med title

title i meta bruker skråstreknotasjon for å opprette nestede grupper i Storybook-sidemenyen: 'Forms/Input' oppretter en Forms-gruppe med en Input-undergruppe.

const meta: Meta<typeof TextInput> = {
  title: 'Forms/TextInput',
  component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...

Gjenbruke stories i tester

CSF3-stories er vanlige objekter, så de kan importeres og settes sammen i enhetstester eller andre stories.

import { Primary } from './Button.stories';

test('renders primary button', () => {
  render(<Button {...Primary.args} />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Sjekk forståelsen

Hvordan definerer du props eller tilstanden til en story i CSF3?

Besvar den i den interaktive leksjonen

Oppsummering

CSF3-stories er typede objekter med args. Angi felles standardverdier i meta.args, overstyr dem per story, bruk render for egendefinert JSX, og legg til tags: ['autodocs'] for automatisk generert dokumentasjon. Skriv en story for hver meningsfulle komponenttilstand.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Skrive CSF3 Stories» gratis?

Ja – hele teksten i «Skrive CSF3 Stories» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Skrive CSF3 Stories»?

Eksporter et standard meta-objekt og navngitte stories ved hjelp av Component Story Format 3. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Skrive CSF3 Stories»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy