Tener nodejs y npm instalados
Cree una aplicación de reacción manualmente o mediante el comando CRA
Libro de cuentos intall:
$ npx sb init
Durante la instalación, Storybook buscará dependencias convenientes (paquetes para instalar).
NOTA: no inicialice el libro de cuentos con un repositorio vacío.
correr
$ npm ejecutar libro de cuentos
Se abrirá una pestaña en su navegador para darle la bienvenida a Story Book.
Una historia es un estado renderizado de un componente, mejor dicho: es el estado del componente que estamos interesados en obtener, es decir, cerrar sesión en la barra de navegación o iniciar sesión en la barra de navegación. Para crear estas historias necesitamos dos archivos, el cómo se va a renderizar y los estados de renderizado que queremos capturar. En el libro de cuentos CLI creado para nosotros podemos encontrar pestañas de ** argumentos ** (propiedades) y ** acción ** (controladores) que podemos editar.
Hablemos del libro de cuentos de CLI que nos ha hecho. Este cuenta con una barra lateral donde se ubicarán nuestros componentes e historias. Una barra de navegación, que contiene opciones de zomm, opciones de fondo (para ver contrastes con los componentes), tamaños para comprobar la capacidad de respuesta de nuestros componentes.
Aparte del lienzo contamos con Docs, donde podemos colocar documentación sobre nuestro componente y sus historias, para que se pueda compartir fácilmente con el té.
Finalmente, tenemos las pestañas “Acción” uno, relacionadas para manejarEventos; “Controles”, relacionados con las propiedades que podemos editar desde nuestro componente.
Cabe mencionar el uso de “complementos” de Addons que potencializan nuestro flujo de trabajo con Storybook. Hablaré de esto más adelante.
Ahora es el momento de elegir uno de sus componentes, crear un “YourComponent.stories.tsx” y guiarse con esta plantilla:
// YourComponent.stories.tsx
importar React, {ComponentProps} de 'reaccionar';
importar {Story} de '@ storybook / react / types-6-0';
importar {YourComponent} desde './YourComponent';// Esta exportación predeterminada determina dónde va su historia en la lista de historias
exportar predeterminado {
title: 'YourComponent',
componente: YourComponent,
};
Plantilla const: Story <ComponentProps <typeof YourComponent >> = (args) => (
<YourComponent {... args} />
);
exportar const FirstStory = Template.bind ({});
FirstStory.args = {
/ * los argumentos que necesita aquí dependerán de su componente * /
};A partir de ahora, los Storybooks pueden variar según la pila utilizada o la metodología de estilos empleada. Para estos casos recomiendo consultar la Bibliografía.
Enhorabuena Acaba de tener una idea básica de qué es un libro de cuentos y cómo empezar. Te recomiendo leer la documentación oficial de esta sección.
