React Academy · leksjon

Sette opp Storybook i et React-prosjekt

Installer Storybook, konfigurer det for Vite eller CRA, og utforsk komponentene i komponentutforskeren.

Leksjon 1 av 413 trinn

Sette opp Storybook i et React-prosjekt er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 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 Storybook

Storybook er et verktøy for å utvikle, dokumentere og teste UI-komponenter isolert. Hver story representerer en bestemt tilstand for en komponent, som kan vises i Storybook-grensesnittet uten å kjøre hele applikasjonen.

Installasjon

Kjør Storybook-initieringskommandoen i React-prosjektet. Den finner automatisk rammeverket (Vite, CRA, Next.js) og oppretter konfigurasjonen.

# For a Vite + React project:
npx storybook@latest init

# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)

Starte Storybook

Kjør Storybooks utviklingsserver på port 6006. Den åpner komponentutforskeren i nettleseren.

npm run storybook
# or
npx storybook dev -p 6006

Konfigurasjonen .storybook/main.ts

main.ts forteller Storybook hvor stories finnes, hvilke tillegg som skal lastes inn og hvilket rammeverk som skal brukes.

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};

export default config;

Konfigurasjonen .storybook/preview.ts

preview.ts bruker globale dekoratorer, for eksempel ved å omslutte alle stories med en Provider, og angir globale parametere som bakgrunnsfargen.

import type { Preview } from '@storybook/react';
import '../src/index.css'; // global styles

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
      values: [{ name: 'light', value: '#fff' }, { name: 'dark', value: '#333' }],
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={defaultTheme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;

Legge til dekoratorer for kontekst

Bruk dekoratorer i preview.ts til å omslutte alle stories med providerne de trenger (Router, Theme, i18n), slik at stories ikke trenger å importere dem individuelt.

decorators: [
  (Story) => (
    <MemoryRouter>
      <QueryClientProvider client={new QueryClient()}>
        <Story />
      </QueryClientProvider>
    </MemoryRouter>
  ),
],

Navigere i Storybook-grensesnittet

Sidemenyen grupperer stories etter komponent. Klikk på en story for å vise den på lerretet. Docs-fanen viser automatisk generert API-dokumentasjon fra TypeScript-props.

Bygge en statisk Storybook

Bygg et statisk HTML-nettsted fra stories for publisering på Chromatic, GitHub Pages eller en hvilken som helst CDN.

npm run build-storybook
# Output in storybook-static/

Storybook for dokumentasjon av designsystemer

Storybook egner seg svært godt som levende dokumentasjon for designsystemer. Legg til @storybook/addon-docs (en del av essentials) for å generere prop-tabeller og brukseksempler automatisk fra TypeScript-typene.

Hot Module Replacement

Storybook støtter HMR. Rediger en komponent- eller story-fil, så oppdateres Storybook-lerretet umiddelbart uten full omlasting av siden.

TypeScript-støtte

Rammeverket @storybook/react-vite tilbyr førsteklasses TypeScript-støtte. Bruk Meta- og StoryObj-generiske typer for fullt typede stories.

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

const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;

type Story = StoryObj<typeof Button>;
export const Primary: Story = { args: { label: 'Click me' } };

Sjekk forståelsen

Hvilken Storybook-konfigurasjonsfil har ansvar for å bruke globale dekoratorer, for eksempel å omslutte alle stories med en Provider?

Besvar den i den interaktive leksjonen

Oppsummering

Kjør npx storybook init for å sette opp Storybook, konfigurer globale providere i preview.ts, og legg til tillegg i main.ts. Bruk Meta- og StoryObj-generiske typer for typede stories, og bygg et statisk nettsted med build-storybook for deling.

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 «Sette opp Storybook i et React-prosjekt» gratis?

Ja – hele teksten i «Sette opp Storybook i et React-prosjekt» 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 «Sette opp Storybook i et React-prosjekt»?

Installer Storybook, konfigurer det for Vite eller CRA, og utforsk komponentene i komponentutforskeren. 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 1 av 4.

Hvor lang tid tar leksjonen «Sette opp Storybook i et React-prosjekt»?

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