Introducción
Este curso brinda a los participantes los conocimientos fundamentales de React: qué es, por qué se utiliza, cómo estructura las interfaces web y cómo permite construir aplicaciones dinámicas, interactivas y mantenibles. Aunque hay algo de código, el enfoque es práctico, claro y orientado a proyecto real — ideal para desarrolladores front-end o full-stack que quieran dominar React.
Objetivos
Al finalizar el curso, los participantes podrán:
- Entender la filosofía de React: componentes reutilizables, Virtual DOM, interfaz declarativa.
- Crear interfaces web usando componentes React, con la sintaxis JSX.
- Gestionar datos y estado dentro de componentes (props, state, hooks), permitiendo interactividad y reactividad.
- Organizar proyectos React de forma modular y estructurada, facilitando mantenimiento y escalabilidad.
- Manejar rutas, navegación y lógica de vistas cuando la aplicación sea de varias páginas o tenga navegación.
- Integrar React con estilos, assets y buenas prácticas de UI/UX para construir interfaces robustas.
Índice de Contenidos
Módulo 1: Fundamentos de React
- Qué es React, su filosofía, ventajas y cuándo conviene usarlo.
- Virtual DOM y renderizado eficiente.
- JSX: qué es y cómo se usa para definir la UI.
Módulo 2: Componentes, Props y Estado (State)
- Componentes funcionales y estructura básica: cómo construir piezas reutilizables de UI.
- Props: paso de datos a componentes hijos — interfaz y reutilización.
- State interno: gestionar cambios de datos y reactividad de la UI.
- Ciclo de vida / Hook básicos para manejar efectos y actualización de componentes (dependiendo de la versión de React).
Módulo 3: Interactividad y Eventos — UI dinámica
- Manejo de eventos: clicks, formularios, inputs — cómo reaccionar a acciones de usuario.
- Renderizado condicional, listas dinámicas, actualización de UI en función del estado o props.
- Formularios, inputs controlados, validaciones básicas (si aplica).
Módulo 4: Estructura de proyecto y buenas prácticas
- Organización de carpetas, modularidad, componentes reutilizables.
- Separación de lógica, presentación y estilos.
- Integración con CSS / preprocesadores / librerías de estilos (según contexto).
Módulo 5: Navegación y multipágina — SPAs con React
- Concepto de SPA (Single Page Application).
- Uso (o introducción) a librerías de routing para React para navegación interna.
- Gestión de vistas, rutas dinámicas, parámetros, carga de diferentes componentes en función de la ruta.
Módulo 6: Ecosistema React — Estado global, librerías complementarias, estructura real de apps
- Cuando la aplicación crece: gestión de estado global (con Context, u otra librería si se incluye).
- Uso de librerías auxiliares, modularización, integración con APIs externas.
- Buenas prácticas para mantenimiento, escalabilidad y mantenimiento de código limpio.
Módulo 7: Preparar una App React para Producción
- Build / compilación / optimización de assets para producción.
- Buenas prácticas de rendimiento: evitar renderizados innecesarios, optimización de componentes.
- Consideraciones de accesibilidad, responsive design, compatibilidad de navegadores.
Módulo 8: Proyecto de Ejemplo – Aplicación Web con React (visión global)
- Definición del proyecto: objetivos, estructura, componentes, rutas, estado, lógica.
- Diseño conceptual de la UI y de la arquitectura interna — sin obligar a escribir todo el código desde cero.
- Cómo documentar y planificar la implementación: uso de esquemas, mockups, datos de ejemplo.
- Entender el flujo de datos: inputs usuario → estado → renderizado → navegación → actualización.