Configurazione di Storybook in un progetto React
Installi Storybook, lo configuri per Vite o CRA e consulti l'esploratore dei componenti.
Configurazione di Storybook in un progetto React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cos'è Storybook
Storybook è uno strumento per sviluppare, documentare e testare i componenti dell'interfaccia in isolamento. Ogni story rappresenta uno stato specifico di un componente, visualizzabile nell'interfaccia di Storybook senza eseguire l'intera app.
Installazione
Esegua il comando di inizializzazione di Storybook nel progetto React. Il framework viene rilevato automaticamente (Vite, CRA, Next.js) e la configurazione viene creata.
# For a Vite + React project:
npx storybook@latest init
# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)Avviare Storybook
Avvii il server di sviluppo di Storybook sulla porta 6006. L'explorer dei componenti verrà aperto nel browser.
npm run storybook
# or
npx storybook dev -p 6006La configurazione .storybook/main.ts
main.ts indica a Storybook dove trovare le story, quali addon caricare e quale framework utilizzare.
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;La configurazione .storybook/preview.ts
preview.ts applica i decorator globali, ad esempio racchiudendo tutte le story in un Provider, e imposta parametri globali come il colore di sfondo.
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;Aggiungere decorator per il contesto
Utilizzi i decorator in preview.ts per racchiudere tutte le story nei provider di cui hanno bisogno (Router, Theme, i18n), così le story non devono importarli singolarmente.
decorators: [
(Story) => (
<MemoryRouter>
<QueryClientProvider client={new QueryClient()}>
<Story />
</QueryClientProvider>
</MemoryRouter>
),
],Navigare nell'interfaccia di Storybook
La barra laterale raggruppa le story per componente. Faccia clic su una story per visualizzarla nel canvas. La scheda Docs mostra la documentazione API generata automaticamente dalle props TypeScript.
Creare uno Storybook statico
Crei un sito HTML statico dalle sue story per pubblicarlo su Chromatic, GitHub Pages o qualsiasi CDN.
npm run build-storybook
# Output in storybook-static/Storybook per la documentazione del design system
Storybook è particolarmente efficace come documentazione vivente per i design system. Aggiunga @storybook/addon-docs (incluso negli essentials) per generare automaticamente tabelle delle props ed esempi d'uso dai tipi TypeScript.
Hot Module Replacement
Storybook supporta HMR. Modifichi un componente o un file di una story e il canvas di Storybook si aggiornerà immediatamente, senza ricaricare completamente la pagina.
Supporto TypeScript
Il framework @storybook/react-vite offre un supporto TypeScript completo. Utilizzi i generics Meta e StoryObj per ottenere story completamente tipizzate.
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' } };Verifica rapida
Quale file di configurazione di Storybook è responsabile dell'applicazione dei decorator globali, come il racchiudere tutte le story in un Provider?
Riepilogo
Esegua npx storybook init per configurare Storybook, configuri i provider globali in preview.ts e aggiunga gli addon in main.ts. Utilizzi i generics Meta e StoryObj per le story tipizzate e crei un sito statico con build-storybook per condividerlo.
Domande Frequenti
La lezione «Configurazione di Storybook in un progetto React» è gratuita?
Sì — il testo completo di «Configurazione di Storybook in un progetto React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Configurazione di Storybook in un progetto React»?
Installi Storybook, lo configuri per Vite o CRA e consulti l'esploratore dei componenti. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Configurazione di Storybook in un progetto React»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Storybook in un progetto React
- Scrittura di storie CSF3
- Args, Controls e addon Actions
- Test di Storybook e regressione visiva