Tutorial paso a paso sobre cómo instalar y utilizar Storybook en un proyecto React

Paso 1: Instalar Storybook

Para instalar Storybook en tu proyecto React, debes seguir los siguientes pasos:

1. Abre una terminal y navega hasta la raíz de tu proyecto React.
2. Ejecuta el siguiente comando para instalar Storybook

npx sb init

3. Sigue las instrucciones en la terminal para configurar Storybook. Durante el proceso de configuración, se te pedirá que elijas el marco de trabajo que estás utilizando (en este caso, React), así como algunas opciones de configuración adicionales.

Paso 2: Crear un componente de muestra

Para demostrar cómo funciona Storybook, crearemos un componente de muestra. Este componente mostrará un texto en pantalla. Puedes seguir estos pasos para crear el componente:

1. Crea un archivo llamado SampleComponent.js en la carpeta src/components.
2. Agrega el siguiente código al archivo SampleComponent.js:

import React from 'react';

const SampleComponent = ({ text }) => {
  return (
  {text}

);
};

export default SampleComponent;

Este componente recibe una propiedad text y muestra ese texto en un encabezado.

Paso 3: Crear una historia para el componente

Una «historia» en Storybook es una vista de un componente en un estado específico. Para crear una historia para el componente que acabamos de crear, debemos seguir los siguientes pasos:

1. Crea un archivo llamado SampleComponent.stories.js en la misma carpeta que SampleComponent.js.
2. Agrega el siguiente código al archivo SampleComponent.stories.js:

import React from 'react';

const SampleComponent = ({ text }) => {
  return (     

{text});
};

export default SampleComponent;

En este archivo, estamos definiendo una «historia» para nuestro componente. Primero, establecemos el título de la historia y el componente que se mostrará. Luego, creamos una plantilla para nuestro componente que puede recibir argumentos. Por último, definimos una historia llamada «Default» que utiliza la plantilla y proporciona el texto «Hello, World!».

Paso 4: Ejecutar Storybook

Para ejecutar Storybook, debes seguir los siguientes pasos:

1. Abre una terminal y navega hasta la raíz de tu proyecto React.
2. Ejecuta el siguiente comando para iniciar Storybook:

npm run storybook

3. Storybook se abrirá automáticamente en tu navegador predeterminado y podrás ver el componente que acabamos de crear y su historia.

¡Y eso es todo! Ahora sabes cómo instalar y utilizar Storybook en un proyecto React. Storybook es una herramienta muy útil para desarrollar y probar componentes de React de forma aislada, lo que puede ahorrar mucho tiempo y hacer que el proceso de desarrollo sea más eficiente.

La entrada Tutorial paso a paso sobre cómo instalar y utilizar Storybook en un proyecto React se publicó primero en Diario Tecnología.