🚀 Desarrollo Web en Entorno Cliente (DWEC)

De los Fundamentos de JavaScript a la Arquitectura de Aplicaciones con React

🖐️ Bienvenida al Curso

¡Te damos la bienvenida al módulo profesional de Desarrollo Web en Entorno Cliente (DWEC)!

El desarrollo frontend moderno ha dejado de ser la simple manipulación de etiquetas HTML para convertirse en una disciplina de ingeniería de software completa. En este curso realizarás un viaje transformador: partirás de los cimientos del lenguaje JavaScript hasta dominar la arquitectura de Single Page Applications (SPA) con React, aplicando técnicas de optimización de rendimiento y gestión de estado propias de un entorno profesional.

🗺️ Mapa Visual de Navegación del Aprendizaje

El itinerario está diseñado de forma incremental. Cada unidad construye la base de la siguiente:

flowchart TD
    subgraph T1 ["1.ª Evaluación: Vanilla JS"]
        UD1["UD1: Arquitecturas Web y Herramientas"] --> UD2["UD2: Sintaxis, Tipos y Funciones"]
        UD2 --> UD3["UD3: Control de Flujo y Arrays"]
        UD3 --> UD4["UD4: Objetos y POO"]
        UD4 --> UD5["UD5: DOM y Eventos"]
        UD5 --> UD6["UD6: Asincronía y Almacenamiento"]
    end

    subgraph T2 ["2.ª Evaluación: React"]
        UD7["UD7: React Core y JSX"] --> UD8["UD8: Eventos y useState"]
        UD8 --> UD9["UD9: Formularios y Validaciones"]
        UD9 --> UD10["UD10: useRef, Rendimiento y Fiber"]
        UD10 --> UD11["UD11: useEffect, BOM y Router"]
        UD11 --> UD12["UD12: Context API y Estado Global"]
    end

    T1 ==> T2

📚 Estructura Detallada del Plan de Estudios

🟢 1.ª Evaluación: Vanilla JavaScript (63 horas)

Unidad Didáctica	Subunidades y Bloques Temáticos	Competencia Principal
UD 1: Arquitecturas Web y Herramientas de Desarrollo (RA1)	Entornos de ejecución (Navegador vs. Node.js), arquitecturas cliente/servidor, editores, linter y control de versiones	Configurar el entorno de desarrollo y comprender la arquitectura cliente/servidor
UD 2: Sintaxis, Tipos y Funciones (RA2)	Gestión de memoria (`let`, `const`), tipos de datos, funciones de primera clase, closures y scope	Dominar la sintaxis básica, la tipografía de datos y la programación funcional inicial
UD 3: Control de Flujo, Bucles y Arrays (RA2)	Estructuras condicionales, iterativas y métodos funcionales de array (`map`, `filter`, `reduce`)	Implementar la lógica de control del programa y la manipulación avanzada de colecciones
UD 4: Objetos y Programación Orientada a Objetos (RA3)	Objetos literales, prototipos, clases, herencia, encapsulamiento, composición y objetos nativos (`Math`, `Date`, `String`, `Intl`, `Error`)	Diseñar modelos de datos y estructuras de código reutilizables mediante POO
UD 5: DOM Nativo y Gestión de Eventos (RA4)	Árbol DOM, manipulación dinámica, ciclo de eventos (bubbling, capturing) y delegación	Manipular el árbol del documento y gestionar la interactividad con el usuario
UD 6: Asincronía y Almacenamiento — Storage/Vite (RA4)	Event Loop, Promesas, `async/await`, API Fetch, `localStorage`/`sessionStorage` y herramientas de construcción como Vite	Integrar peticiones a APIs externas, persistencia en cliente y compilación del proyecto

🟡 2.ª Evaluación: React (48 horas)

Unidad Didáctica	Subunidades y Bloques Temáticos	Competencia Principal
UD 7: React Core, JSX y Arquitectura Frontend (RA5)	Evolución de las arquitecturas web, Virtual DOM y Fiber, JSX, Props y Composición	Diseñar la arquitectura base de una SPA con React
UD 8: Eventos y Estado con `useState` (RA5)	Eventos sintéticos, estado local y custom hooks	Gestionar la interactividad y el estado de un componente
UD 9: Formularios y Validaciones (RA6)	Formularios controlados/no controlados, React Hook Form y Zod	Capturar y validar datos de usuario
UD 10: `useRef`, Rendimiento y React Fiber (RA6)	Acceso al DOM con `useRef`, `useMemo`, `useCallback`, `React.memo` y `Suspense`	Optimizar el rendimiento de renderizado
UD 11: `useEffect`, BOM y React Router (RA7)	Ciclo de vida, efectos secundarios y enrutamiento SPA	Sincronizar componentes con sistemas externos y rutas
UD 12: Context API y Estado Global (RA7)	`createContext`, `useContext`, Prop Drilling y comparativa con Zustand/Redux	Gestionar el estado global sin acoplamiento excesivo