Frontend orientado a componentes con Storybook y React

Índice

1. Título del curso
2. Objetivo de la formación
3. Duración
4. Modalidad
5. Importe
6. Requisitos técnicos
7. Temario

1. Título del curso

Frontend orientado a componentes con Storybook y React

2. Objetivo de la formación

En este curso de formación aprenderás a desarrollar aplicaciones frontend modernas mediante un enfoque basado en componentes reutilizables, escalables y mantenibles. Usando React, la biblioteca líder para la construcción de interfaces de usuario, y Storybook, la herramienta estándar para documentar, testear y visualizar componentes de forma aislada, dominarás las técnicas que los equipos profesionales emplean en proyectos reales.

Exploraremos desde los fundamentos de React hasta la creación de sistemas de diseño robustos, aplicando buenas prácticas de arquitectura de componentes, control de estados, gestión de props y documentación viva. A lo largo del curso, construiremos una librería de componentes visuales, impulsada por Storybook, que permitirá acelerar el desarrollo de aplicaciones y mejorar la colaboración entre diseñadores y desarrolladores.

Durante el curso, construiremos el repositorio de componentes https://kelly-storybook.julditec.com a partir de los componentes de diseños creados durante la formación en Figma (no es necesario haber cursado el curso de diseño para realizar este curso) que se utilizan para la construcción del sitio web https://kelly.julditec.com durante el curso de formación en liferay "Gestión de contenidos".

3. Duración

24 horas lectivas

4. Modalidad

Online (recomendada) o presencial.

1. En modalidad online no se recomienda más de 3 horas y media al día.
2. En modalidad presencial se debe incrementar el importe con los gastos de transporte y alojamiento si los hubiera.

5. Importe

Consultar. Ir al formulario de contacto.

Por favor, en su consulta indique el número de alumnos, el lugar de realización del curso si es presencial y si desea alguna modificación del temario para adaptarlo a las necesidades de su empresa.

6. Requisitos técnicos

El curso se impartirá con licencia de empresa.

Requisitos hardware

• Un ordenador por alumno.

Requisitos software

• Navegador web (chrome).

Requisitos del aula (modalidad presencial)

• Conexión Wifi con salida a internet.
• Proyector y cable con conexión hdmi o vga (o chromecast).
• Pizarra

7. Temario (Pueden haber cambios de última hora)

Bloque 0 - Introducción

• Presentación del curso y objetivos.
• Visión general: Figma → Storybook → Liferay.

Bloque I - Primeros pasos con Storybook

• ¿Qué es Storybook y por qué usarlo?
• Instalación y configuración inicial en un proyecto React.
• Primeros componentes en Storybook.
• Organización del proyecto para una futura integración en Liferay.
• Práctica: Crear entorno de trabajo Storybook + React.

Bloque II - Creación de componentes reutilizables

• Diseño de componentes modulares y parametrizables.
• Uso de props y tipos (PropTypes o TypeScript).
• Creación de Variants y Estados.
• Controles dinámicos (Controls Panel).
• Práctica: Desarrollo de botones, inputs y tarjetas.

Bloque III - Documentación en Storybook

• Uso del addon @storybook/addon-docs.
• Documentación automática de componentes.
• Introducción a MDX: personalizar documentación.
• Buenas prácticas de documentación de componentes.
• Práctica: Documentar un conjunto de componentes.

Bloque IV - Temas, estilos y design tokens

• Uso de tokens de diseño (colores, tipografía, espaciado).
• Customización de temas en Storybook (light/dark).
• Integración con TailwindCSS o SCSS si aplica.
• Práctica: Crear y aplicar un tema personalizado a todos los componentes.

Bloque V - Testing visual y accesibilidad

• Introducción a pruebas visuales y de regresión.
• Pruebas de accesibilidad con @storybook/addon-a11y.
• Pruebas de interacción con Play Function.
• Práctica: Añadir test visual y accesible a componentes existentes.

Bloque VI - Integración con diseño: Figma y herramientas colaborativas

• Conexión entre Figma y Storybook.
• Uso de addons de Figma en Storybook.
• Comparativa diseño-implementación.
• Exportación de recursos desde Figma para Storybook.
• Práctica: Integrar un diseño de Figma en un componente Storybook.

Bloque VII - Preparación y exportación de componentes para Liferay

• Adaptación de componentes de Storybook para fragmentos y plantillas en Liferay.
• Conversión de JSX a HTML/CSS limpio (compatible Liferay).
• Separación de lógica y presentación.
• Recomendaciones de buenas prácticas en fragmentos.
• Práctica: Exportar un componente y convertirlo en fragmento Liferay.

Bloque VIII - Proyecto final: flujo completo Figma → Storybook → Liferay

• Selección de un diseño real en Figma.
• Desarrollo de componentes en Storybook.
• Documentación y testing.
• Adaptación y exportación para Liferay.
• Presentación del proyecto final.