Serie Storybook: Usando storybook para desarrollo de componentes
Tags: storybook, react, javascript, frontend
Published: 2021-10-13 14:02:28

## 📰 En este artículo aprenderás

1. Cuál es el material de construcción primordial de React y el por qué de su importancia
2. Qué es Storybook
3. El porqué de Storybook al desarrollar junto a equipos

## 🗨️ Contenido

### El problema

Los componentes de React son el material de construcción primordial de las aplicaciones React. Si los escribimos con inteligencia, podemos reutilizar los componentes en otras aplicaciones de React. Pero cuando construye un componente, es necesario trabajar para comprobar cómo funciona en todas las circunstancias. Por ejemplo, en una aplicación asincrónica, React podría representar el componente con propiedades indefinidas. ¿El componente seguirá renderizándose correctamente? ¿Mostrará errores?

Pero si está construyendo componentes como parte de una aplicación compleja, puede ser difícil crear todas las situaciones que su componente deberá afrontar.

Además, **si tiene desarrolladores especializados en experiencia de usuario** (UX) trabajando en su equipo, **puede perder mucho tiempo si tienen que navegar a través de una aplicación para ver el componente único que tienen en desarrollo.**

Sería útil si hubiera alguna forma de mostrar un componente de forma aislada y pasarle conjuntos de propiedades de ejemplo. Aquí es cuando entra la solución

### Storybook: la herramienta para desplegar componentes

Storybook es una herramienta para mostrar bibliotecas de componentes en varios estados. Podría describirlo como una galería de componentes (aunque no le hace justicia). En realidad, **Storybook es una herramienta para el desarrollo de sistemas de diseño basados en componentes**.

### Sistemas de Diseño ¿Son necesarios?

Como mencioné en el anterior párrafo el Storybook nos permite estar en la intersección entre varios equipos (frontend, UI, UX) gracias a que provee un sistema de diseño basado en componentes.
Pero a pesar de la publicidad y alboroto, **un sistema de diseño no es una solución milagrosa o panacea**. Si trabajas en un equipo modesto en una sola aplicación, estará mejor con un directorio de componentes de IU en lugar de configurar la infraestructura para habilitar un sistema de diseño. 

La escalabilidad de un sistema de diseño funciona a su favor cuando comparte componentes de interfaz de usuario en muchos proyectos. Si se encuentra pegando los mismos componentes de la interfaz de usuario en diferentes aplicaciones o entre equipos, esta guía es para usted.

## 🔥 Recapitulando

Repasemos lo que aprendiste

- Los componentes de React son el material de construcción primordial de las aplicaciones React.
- Si piensas con inteligencia, puedes reusar componentes de React
- Si solo se toca la parte del código, pueden haber discrepancias e ineficiencias entre equipos, especialmente de UX, UI y Frontend.
- Storybook permite crear sistemas de diseños basados en componentes.
- Storybook también resuelve la ineficiencia entre equipos, al dar un entorno de desarrollo para frontend, y brindar un entorno de producción para que los demás equipos puedan visualizar el trabajo y hacer comentarios cuando se requiera.

## 🔚 Fin

Sabes cuando un sistema de diseño es una opción viable. Conoces que los componentes son el bloque principal de React y estás anuente de la importancia para los equipos.

## 📺 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](https://dev.to/fernandocutire/serie-storybook-usando-storybook-para-desarrollo-de-componentes-194i)

Entendiendo el concepto de Storybook, cuando usarlo e introducción para desarrolladores

[Serie Storybook: Corriendo storybook en local + Código en github](https://dev.to/fernandocutire/serie-storybook-corriendo-storybook-en-local-codigo-en-github-3o57)

Desarrollarás un repositorio de Storybook en tu computadora local

[Serie Storybook: Escribiendo componentes - .stories.jsx vs stories.mdx](https://dev.to/fernandocutire/serie-storybook-escribiendo-componentes-storiesjsx-vs-storiesmdx-23do) 

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](https://learning.oreilly.com/library/view/react-cookbook/9781492085836/)

[React Cookbook: Source Code](https://github.com/dogriffiths/ReactCookbook-source)

[Storybook Documentation](https://storybook.js.org/)

## 👊🏽 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