Configurar Storybook en un proyecto de React
Instale Storybook, configúrelo para Vite o CRA y explore el catálogo de componentes.
Configurar Storybook en un proyecto de React es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué es Storybook?
Storybook es una herramienta para desarrollar, documentar y probar componentes de interfaz de forma aislada. Cada story representa un estado específico de un componente que puede visualizarse en la interfaz de Storybook sin ejecutar toda la aplicación.
Instalación
Ejecute el comando de inicialización de Storybook en su proyecto React. Detecta automáticamente su framework (Vite, CRA, Next.js) y crea la configuración.
# For a Vite + React project:
npx storybook@latest init
# This creates:
# .storybook/main.ts
# .storybook/preview.ts
# src/stories/ (example stories)Iniciar Storybook
Ejecute el servidor de desarrollo de Storybook en el puerto 6006. Se abrirá el explorador de componentes en el navegador.
npm run storybook
# or
npx storybook dev -p 6006La configuración .storybook/main.ts
main.ts indica a Storybook dónde encontrar las stories, qué addons cargar y qué framework utilizar.
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 configuración .storybook/preview.ts
preview.ts aplica decorators globales (por ejemplo, envolver todas las stories en un Provider) y establece parámetros globales como el color de fondo.
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;Añadir decorators para el contexto
Use decorators en preview.ts para envolver todas las stories en los providers que necesiten (Router, Theme, i18n), de modo que las stories no tengan que importarlos individualmente.
decorators: [
(Story) => (
<MemoryRouter>
<QueryClientProvider client={new QueryClient()}>
<Story />
</QueryClientProvider>
</MemoryRouter>
),
],Navegar por la interfaz de Storybook
La barra lateral agrupa las stories por componente. Haga clic en una story para verla en el canvas. La pestaña Docs muestra la documentación de la API generada automáticamente a partir de sus props de TypeScript.
Crear un Storybook estático
Compile un sitio HTML estático a partir de sus stories para alojarlo en Chromatic, GitHub Pages o cualquier CDN.
npm run build-storybook
# Output in storybook-static/Storybook para documentar sistemas de diseño
Storybook destaca como documentación viva para sistemas de diseño. Añada @storybook/addon-docs (incluido en essentials) para generar automáticamente tablas de props y ejemplos de uso a partir de sus tipos de TypeScript.
Reemplazo de módulos en caliente
Storybook admite HMR. Edite un componente o un archivo de story y el canvas de Storybook se actualizará al instante sin recargar toda la página.
Compatibilidad con TypeScript
El framework @storybook/react-vite proporciona compatibilidad de primera clase con TypeScript. Use los genéricos Meta y StoryObj para crear stories completamente tipadas.
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' } };Comprobación rápida
¿Qué archivo de configuración de Storybook se encarga de aplicar decorators globales, como envolver todas las stories en un Provider?
Resumen
Ejecute npx storybook init para configurar Storybook, configure los providers globales en preview.ts y añada addons en main.ts. Use los genéricos Meta y StoryObj para crear stories tipadas y compile un sitio estático con build-storybook para compartirlo.
Preguntas frecuentes
¿La lección «Configurar Storybook en un proyecto de React» es gratis?
Sí — el texto completo de «Configurar Storybook en un proyecto de React» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Configurar Storybook en un proyecto de React»?
Instale Storybook, configúrelo para Vite o CRA y explore el catálogo de componentes. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Configurar Storybook en un proyecto de React»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar Storybook en un proyecto de React
- Escribir historias CSF3
- Args, Controls y el addon Actions
- Pruebas de Storybook y regresión visual