Hello World with "Storybook" (React)


Hoy en dia en el desarrollo de software se documentan ,  programan y testean historias de usuario que  ocasionan que  los desarrolladores se enfoquen  en lograr entregrables los cuales  brinden  valor  al cliente. 

En el caso de tecnologias como react cada pieza o entregable desarrollado muchas veces es un componente el cual tiene que ser empaquetado junto con todas los demas piezas haciendo mas complejo el flujo de trabajo entre el equipo . 

Ahora la ventaja de los componentes es que  son modulares y estan encapsulados por lo tanto una solución es que es posible trabajarlos en un ambiente aislado y probar su comportamiento sin necesidad de activar toda la aplicación . Esto lo podemos lograr con herramientas como Storybook.




Storybook es una herramienta que permite aislar los componentes que se han desarrollado mediante el uso de historias y de esta forma facilitar el testing. 

Instalación de Storybook

Primero creamos nuestra aplicación react de prueba  

npx create-react-app nombre-app

Para ejecutar la aplicación en el navegador 

cd nombre-app
npm start

Con esto ya tendremos nuestra aplicación demo para realizar la prueba de storybook



Ahora es tiempo de instalar storybook con el siguiente comando : 

npx storybook@latest init




Al terminar de instalarse nos dara un breve tutorial de como empezar a escribir nuestra primera historia . 


Por ultimo les agrego la documentación oficial en caso quieran investigar mas acerca del tema y un curso el cual se me hizo muy bueno 

Documentación Oficial Storybook

Curso youtube 

Keep Coding !!!!!!

Comentarios

Publicar un comentario

Entradas populares de este blog

Plataformas gratuitas para desplegar aplicaciones web

Imagen
Hoy en día, existen diversas plataformas que ofrecen planes gratuitos para desplegar aplicaciones web, lo cual es ideal para desarrolladores que quieren lanzar MVPs, proyectos personales o simplemente aprender nuevas tecnologías sin costos iniciales. A continuación te presentamos una comparativa clara entre Render , Fly.io , Koyeb , Google Cloud Platform (GCP) y Amazon Web Services (AWS) . Tabla comparativa Plataforma Gratis Base de datos Despliegue desde Git Usa Docker Contras principales Render ✅ Sí (Postgres) ✅ Opcional Baja velocidad tras inactividad Fly.io ✅ — ✅ ✅ Más compleja la configuración con Docker Koyeb ✅ — ✅ ✅ Recursos limitados según el plan Google Cloud ✅ (créditos) — ✅ ✅ Curva de configuración y crédito...
Leer más

Instalación y Uso MongoDB

Imagen
MongoDB es una bd que permite almacenar registros en forma Json a los cuales llamaremos Documentos. Esto permite una gran flexibilidad al modelar el esquema de datos y además se adapta más al lenguaje que comúnmente hablan los desarrolladores . Sin embargo antes de empezar con conceptos más robustos es necesario  empezar con la instalación de herramientas en local para empezar a conocer las características por nosotros mismos. Debido a su practicidad y que nos  permite tener ambientes aislados y fácilmente configurables considero que docker puede ser un buen aliado para instalar mongodb, sin embargo primero es necesario definir qué versión emplearemos .Hoy en dia  mongo cuenta con las siguientes versiones  Community  Enterprise La diferencia que alcanzó a distinguir entre una y otra es que  la comunitaria se sugiere  para ambientes de desarrollo , explorar el producto y  comenzar ideas. Para el caso de  la versión enterprise es para proyectos...
Leer más

Documentar API REST con Spring Doc (Swagger)

Imagen
  Configuración del Proyecto Primero se obtiene última versión disponible de Spring Boot  Agregamos la dependencia de https://springdoc.org/ en nuestro pom.xml Con nuestro proyecto ya creado creamos el siguiente controller (El service , repository y entity son un CRUD basico): @RestController @RequestMapping("/") public class PersonaController { protected PersonService personService; public PersonaController(PersonService personService) { super(); this.personService = personService; } @PostMapping      public ResponseEntity<Person> addPersona(@RequestBody Person persona) { personService.addPersona(persona);          return new ResponseEntity<>(persona, HttpStatus.CREATED);      }      @GetMapping      public ResponseEntity<List<Person>> getAllPersonas() {      ...
Leer más