Módulos y Contenidos:

Módulo 1: Introducción a React (2 semanas)

• ¿Qué es React?
  • Introducción a React: historia, ventajas y usos.
  • Comparativa con otras librerías/frameworks de JavaScript(Angular, Vue).
• Instalación de Herramientas
  • Instalación de Node.js y NPM.
  • Creación de un proyecto con create-react-app.
  • Estructura de carpetas y archivos de un proyecto React.
• Primer Componente en React
  • Creación de un componente funcional básico.
  • Entender el JSX (JavaScript XML).
  • Cómo React maneja la renderización de UI.
  • El concepto de Virtual DOM.

Módulo 2: Componentes y Props (2 semanas)

• Qué son los Componentes
  • Componentes funcionales vs. componentes de clase.
  • El ciclo de vida de los componentes (introducción).
• Props: Propiedades de los Componentes
  • Uso de props para pasar datos entre componentes.
  • Destructuración de props.
  • Renderizado dinámico utilizando props.
• Ejemplo Práctico
  • Creación de una lista de elementos y paso de datos entre componentes.

Módulo 3: Estado en React (State) (2 semanas)

• Introducción al Estado
  • ¿Qué es el estado en React?
  • Diferencia entre props y state
  • Uso de useState (Hook) para gestionar el estado en componentes funcionales.
• Actualización del Estado
  • Cómo actualizar el estado correctamente.
  • Uso de funciones de actualización y las implicaciones de la asincronía.
• Ejemplo Práctico
  • Contador básico utilizando useState.

Módulo 4: Manejo de Eventos (2 semanas)

• Eventos en React
  • Cómo manejar eventos en React (clics, formularios, teclas, etc.).
  • Sintaxis de los eventos en JSX.
  • Uso de bind para el contexto de eventos en componentes de clase (si se introduce algún componente de clase).
• Eventos con Hooks
  • Manejo de eventos en componentes funcionales utilizando useState.
• Ejemplo Práctico
  • Crear un formulario de entrada de datos con eventos de cambio (onChange) y envío (onSubmit).

Módulo 5: Condicionales y Renderizado (2 semanas)

• Renderizado Condicional
  • Cómo mostrar u ocultar contenido condicionalmente en React.
  • Uso de operadores lógicos (ternarios, &&).
  • Uso de funciones de renderizado para contenido dinámico.
• Ejemplo Práctico
  • Crear un componente que muestre un mensaje de bienvenida solo si el usuario está autenticado.

Módulo 6: Listas y Formularios en React (2 semanas)

• Renderizado de Listas
  • Uso de map() para renderizar listas de elementos en JSX.
  • Clave (key) en las listas de React.
• Formularios en React
  • Crear formularios controlados en React.
  • Manejo de entradas de texto, casillas de verificación y selectores.
• . Ejemplo Práctico
  • Crear un formulario para agregar nuevos elementos a una lista.

Módulo 7: Introducción a Hooks (2 semanas)

• Qué son los Hooks
  • Introducción a los hooks en React: qué son y por qué se utilizan.
  • Uso básico de useState y useEffect.
• El Hook useEffect
  • Qué es el hook useEffect y cómo usarlo.
  • Uso de useEffect para manejar efectos secundarios: carga de datos, actualizaciones de DOM, etc.
• . Ejemplo Práctico
  • Fetching de datos usando useEffect y mostrar la información en un componente.

Módulo 8: Enrutamiento con React Router (2 semanas)

• Introducción a React Router
  • Qué es React Router y por qué es importante para el enrutamiento de aplicaciones.
  • Instalación y configuración de React Router.
• Uso de Route, Link y BrowserRouter
  • Configuración de rutas y componentes de enlace.
  • Renderizado de componentes de acuerdo con las rutas.
• . Ejemplo Práctico
  • Crear una pequeña aplicación de varias páginas (Home, About, Contact) usando React Router.

Módulo 9: Estilos en React (2 semanas)

• Estilos en React
  • Cómo aplicar estilos en React: estilos en línea, CSS tradicional, y Styled Components.
• CSS Módulos
  • Uso de módulos de CSS en React para evitar conflictos de clases.
• . Ejemplo Práctico
  • Crear un componente estilizado con CSS y otro con Styled Components.

Módulo 10: Proyecto Final (2 semanas)

• Desarrollo de una Aplicación Completa
  • Los estudiantes crearán una aplicación React básica utilizando todos los conceptos aprendidos: componentes, manejo de estado, eventos, enrutamiento y estilos.
• Revisión del Proyecto
  • Revisión y análisis de los proyectos de los estudiantes.
  • Resolución de problemas y mejores prácticas.