📰 En este artículo aprenderás
- Que se requiere para correr Storybook
- Los pasos para inicializar Storybook usando create-react-app como boilerplate
🗨️ Contenido
Bienvenido al segundo episodio de la serie de Storybook.
Antes de empezar a tirar comandos, es importante que tengas primero una aplicación corriendo. Esto se puede lograr gracias a create-react-app que nos dará un boilerplate de una aplicación react que servirá de base para storybook, aclaro este punto porque storybook no creará esto por su cuenta y requerirá que primero tengas la aplicación creada.
Con eso en mente, estos son los pasos a seguir.
Antes de continuar recuerda tener instalado npm, y CRA (Create-react-app) en tu computadora local.
Crear una aplicación en react , colocando estos comandos en la terminal.
npx create-react-app storybook-app
Entrando a la carpeta de nuestra aplicación
cd storybook-app
Después de ello, tendremos una aplicación de react en funcionamiento.
Con ello , ahora sí añadiremos storybook
npx sb init
Luego de que se haya instalado, iniciaremos el servidor de Storybook
npm run storybook
Storybook ejecuta un servidor separado en el puerto 8086 (o en el que hayas elegido), como puede ver en la figura. Cuando usa Storybook, no es necesario ejecutar la aplicación de React.
Hasta aquí tendremos storybook corriendo en local, si todos los logs han ido bien.
🔥 Recapitulando
Repasemos lo que aprendiste
- Tener instalado npm y cra para continuar el tutorial. Sino una aplicación react funcional.
- Storybook corre en base a una aplicación lista, no en una carpeta vacía, tómalo en cuenta antes de correr
npx sb init
🔚 Fin
Te dejo un repositorio con storybook configurado. Además te encontrarás con otros elementos configurados como docker, travis.yml, sientete libre de clonar el repostorio y trabajar en tus propios proyectos.
📺 Continua la serie
Esto no se termina aquí, puedes continuar los siguientes capítulos de la serie Storybook para averiguar como termina.
Serie Storybook: Usando storybook para desarrollo de componentes
Entendiendo el concepto de Storybook, cuando usarlo e introducción para desarrolladores
Serie Storybook: Corriendo storybook en local + Código en github
Desarrollarás un repositorio de Storybook en tu computadora local
Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx
Desarrollarás .stories.jsx y .stories.mdx , aprenderás como se forman y como funciona el núcleo principal en Storybook.
📚 Lecturas Adicionales
Leer es bueno, aquí te dejo algunas fuentes adicionales a este artículo para que puedas complementar y aclarar conocimientos.
React Cookbook: David Griffiths, Dawn Griffiths O Reilly Media Inc
👊🏽 Turno para tí: Comenta y comparte
Si te ha gustado la serie, dale a me gusta, compárteselo a quién veas que lo necesita y comenta si tienes alguna duda
Top comments (0)