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

Mi experiencia corriendo deepseek en local .

Imagen
A raíz de la noticia del nuevo modelo de IA deepseek en la red se han multiplicado los post y los tutoriales para empezar a trabajar con ollama desde un entorno local , por lo que el motivo de este post es documentar que tan cierto es esto digamos para un equipo promedio el cual poseemos un dev promedio (Considero ser un dev promedio). Primero daré el contexto con el cual estoy ejecutando esta prueba  Tutorial base para el ejercicio  https://platzi.com/blog/deepseek-r1-instalar-local/ A claro a día de hoy eh visto facil 20 , pero este se me hizo mas rápido y con menos pasos que es lo que busco , ninguna promoción hacia platzi .   Recursos de mi pc Hardware Y por gusto personal la prueba la realizaremos sobre una versión de ubuntu en windows (WSL) Ahora si iniciemos con la parte divertida .  Primero se tiene que instalar ollama . Ollama basicamente es una herramienta para ejecutar modelos de forma local , el equivalente a lo que es docker con las imagenes . ...
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