DESARROLLO WEB CON REACTJS

Contenido

• Módulo 1 Fundamentos y Preparación del Entorno
• Basado en React Intro, React Get Started y React ES6:
• · ¿Qué es React y por qué se usa? (Enfoque en Single Page Applications).
• · Repaso profundo de JavaScript ES6 para React: clases, funciones flecha (() => {}), variables (let/const), métodos de arreglos (.map()), desestructuración, operador spread/rest, y módulos (import/export).
• · Configuración del entorno local utilizando herramientas modernas de andamiaje (Vite o Create React App).
• · Práctica: Configuración inicial del primer espacio de trabajo y ejercicios de ES6 aplicados.
• Módulo 2: Arquitectura Basada en Componentes y JSX
• Basado en React Render HTML, React JSX, React Components y React Props:
• · Entendiendo JSX: Reglas de oro de la sintaxis, expresiones embebidas y elementos raíz únicos.
• · Componentes funcionales vs. Componentes de clase (con enfoque moderno en funcionales).
• · Anidación y reutilización de componentes en la interfaz.
• · Paso de datos con Props: propiedades de solo lectura, desestructuración de props y envío de datos complejos (objetos y funciones).
• · Práctica: Creación de una biblioteca de componentes estáticos reutilizables (tarjetas de presentación, botones dinámicos).
• Módulo 3: Lógica de Interfaz: Eventos, Renderizado y Colecciones
• Basado en React Events, React Conditionals y React Lists:
• · Manejo de eventos en React: diferencias sintácticas con el DOM nativo (CamelCase) y paso de argumentos a manejadores de eventos.
• · Renderizado condicional: estrategias utilizando if-else, operadores ternarios (? :) y cortocircuitos lógicos (&&).
• · Trabajando con colecciones: renderizado de listas mediante el método .map().
• · La importancia crítica del atributo key para la reconciliación del Virtual DOM.
• · Práctica: Construcción de un tablero interactivo que filtre y muestre colecciones de elementos dinámicamente según las interacciones del usuario.
• Módulo 4: Formularios y Navegación entre Páginas
• Basado en React Forms y React Router:
• · Formularios controlados: vinculación de inputs al estado interno de React (value y onChange).
• · Gestión de múltiples campos de entrada en un solo manejador de eventos.
• · Validación básica de datos y manejo del envío del formulario (onSubmit).
• · Introducción a la navegación multi-página en el cliente con React Router v6: configuración de , , , y navegación programática.
• · Práctica: Crear una aplicación con un formulario de registro funcional y un sistema de navegación simple con barra de menús.
• Módulo 5: Estado Avanzado y Control de Efectos (Hooks)
• Basado en la sección completa de React Hooks:
• · useState: Inicialización y actualización de estados simples y estructurados (objetos/arreglos).
• · useEffect: Control de efectos secundarios, manejo del ciclo de vida (montaje, actualización y desmontaje) y el arreglo de dependencias.
• · useContext: Compartir estados de forma global evitando el prop drilling.
• · useRef: Acceso directo a elementos del DOM de forma segura y persistencia de valores mutables entre renderizados.
• · useReducer: Alternativa para la gestión de estados complejos basados en patrones de acción/reductor.
• · useCallback y useMemo: Técnicas esenciales de memorización para optimizar el rendimiento evitando renderizados innecesarios.
• · Práctica: Consumo de una API externa (Fetch/Axios) dentro de un useEffect para alimentar el estado global de la aplicación.
• Módulo 6: Proyecto Integrador y Despliegue
• Contenido (Consolidación práctica de todo el programa):
• · Arquitectura de la aplicación: estructura de carpetas profesional.
• · Integración de todos los conceptos de : Componentes + Props + Router + Forms + Hooks (Manejo de estados y efectos).
• · Preparación de la aplicación para entornos de producción (npm run build).
• · Estrategias de despliegue rápido (Vercel o Netlify).
• · Práctica: Finalización, revisión de código del proyecto final de los estudiantes y despliegue en vivo.