Configurer Storybook dans un projet React
Installez Storybook, configurez-le pour Vite ou CRA et parcourez l’explorateur de composants.
Configurer Storybook dans un projet React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce que Storybook ?
Storybook est un outil permettant de développer, documenter et tester les composants d’interface de manière isolée. Chaque scénario représente un état précis d’un composant, consultable dans l’interface Storybook sans lancer l’application complète.
Installation
Exécutez la commande d’initialisation de Storybook dans votre projet React. Elle détecte automatiquement votre framework (Vite, CRA, Next.js) et crée la configuration.
# For a Vite + React project:
npx storybook@latest init
# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)Démarrer Storybook
Lancez le serveur de développement de Storybook sur le port 6006. Il ouvre l’explorateur de composants dans votre navigateur.
npm run storybook
# or
npx storybook dev -p 6006Configuration .storybook/main.ts
main.ts indique à Storybook où trouver les scénarios, quelles extensions charger et quel framework utiliser.
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;Configuration .storybook/preview.ts
preview.ts applique des décorateurs globaux, par exemple en enveloppant tous les scénarios dans un fournisseur, et définit des paramètres globaux comme la couleur d’arrière-plan.
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;Ajouter des décorateurs pour le contexte
Utilisez des décorateurs dans preview.ts pour envelopper tous les scénarios dans les fournisseurs dont ils ont besoin (routeur, thème, i18n), afin qu’ils n’aient pas à les importer individuellement.
decorators: [
(Story) => (
<MemoryRouter>
<QueryClientProvider client={new QueryClient()}>
<Story />
</QueryClientProvider>
</MemoryRouter>
),
],Naviguer dans l’interface Storybook
La barre latérale regroupe les scénarios par composant. Cliquez sur un scénario pour l’afficher dans le canevas. L’onglet Documentation affiche la documentation d’API générée automatiquement à partir de vos propriétés TypeScript.
Créer un Storybook statique
Créez un site HTML statique à partir de vos scénarios pour l’héberger sur Chromatic, GitHub Pages ou n’importe quel CDN.
npm run build-storybook
# Output in storybook-static/Storybook pour documenter un système de conception
Storybook est particulièrement adapté à la documentation vivante des systèmes de conception. Ajoutez @storybook/addon-docs, inclus dans les éléments essentiels, pour générer automatiquement des tableaux de propriétés et des exemples d’utilisation à partir de vos types TypeScript.
Remplacement à chaud des modules
Storybook prend en charge HMR. Modifiez un composant ou un fichier de scénario et le canevas Storybook se met instantanément à jour sans rechargement complet de la page.
Prise en charge de TypeScript
Le framework @storybook/react-vite fournit une prise en charge complète de TypeScript. Utilisez les génériques Meta et StoryObj pour des scénarios entièrement typés.
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' } };Vérification rapide
Quel fichier de configuration Storybook applique les décorateurs globaux, par exemple en enveloppant tous les scénarios dans un fournisseur ?
Récapitulatif
Exécutez npx storybook init pour configurer Storybook, configurez les fournisseurs globaux dans preview.ts et ajoutez les extensions dans main.ts. Utilisez les génériques Meta et StoryObj pour des scénarios typés, puis créez un site statique avec build-storybook pour le partager.
Questions Fréquemment Posées
La leçon « Configurer Storybook dans un projet React » est-elle gratuite ?
Oui — le texte complet de « Configurer Storybook dans un projet React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configurer Storybook dans un projet React » ?
Installez Storybook, configurez-le pour Vite ou CRA et parcourez l’explorateur de composants. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Configurer Storybook dans un projet React » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Storybook dans un projet React
- Écrire des stories CSF3
- Arguments, contrôles et module complémentaire Actions
- Tests Storybook et régression visuelle