Desarrollo web con React: creación de aplicaciones interactivas e innovadoras

1 - Introducción a React
Objetivo
Comprender los fundamentos de React.
Configurar un entorno de desarrollo de React.
Duración de la unidad
1 Hora 35 Minutos
Contenido
1. Introducción a React
1.1. ¿Qué es React y por qué es importante?
1.1.1. Ventajas de usar React
1.2. Instalación y configuración del entorno de desarrollo
1.2.1. Instalación de Node.js y npm
1.2.2. Selección de un editor de código Visual Studio Code REACT
1.3. Mi primera aplicación React
1.3.1. ¿Qué es Vite?
1.3.2. Creando nuestra primera aplicación React con Vite
1.3.3. Estructura del proyecto en Vite
1.4. Resumen
2 - Fundamentos de React
Objetivo
Crear y utilizar componente en React.
Aplicar Props y State.
Manejar eventos y realizar el manejo de eventos en React.
Duración de la unidad
1 Hora 30 Minutos
Contenido
2. Fundamentos de React
2.1. Componentes
2.1.1. Exportar e importar componentes
2.2. JSX
2.2.1. Reglas JSX
2.3. Props
2.3.1. Características
2.4. Ciclo de vida de los componentes
2.4.1. Montaje de componentes
2.4.2. Actualización de componentes
2.4.3. Desmontaje de componentes
2.5. Resumen
3 - Gestión de estado en React
Objetivo
Comprender los fundamentos de la gestión del estado en React.
Utilizar los Hooks de React para la gestión del estado.
Duración de la unidad
2 Horas 35 Minutos
Contenido
3. Gestión de estado en React
3.1. UseState
3.2. UseEffect
3.3. UseContext
3.4. UseReducer
3.5. Resumen
4 - Enrutamiento en React
Objetivo
Implementar el enrutamiento en una aplicación React utilizando React Router, permitiendo la transición entre diferentes vistas de manera dinámica.
Duración de la unidad
1 Hora 40 Minutos
Contenido
4. Enrutamiento en React
4.1. Instalar y configurar React Router
4.2. Componente Router
4.2.1. Opciones componente Route
4.2.1.1. path
4.2.1.2. exact
4.2.1.3.  strict
4.2.1.4. sensitive
4.2.1.5. component
4.2.1.6. render
4.2.1.7. children
4.2.1.8. redirectTo
4.3. Creación de rutas anidadas
4.4. Paso de parámetros y consultas
4.4.1. Parámetros de Ruta
4.4.2. Parámetros de Consulta (Query Params)
4.5. Resumen
5 - Trabajo con formularios
Objetivo
Desarrollar formularios implementando técnicas de validación para garantizar la integridad y precisión de los datos ingresados por el usuario.
Duración de la unidad
2 Horas 20 Minutos
Contenido
5. Trabajo con formularios
5.1. Formularios controlados vs. no controlados
5.1.1. Formularios controlados
5.1.2. Formulario no controlado
5.2. Inputs de formularios
5.2.1.  Input de texto
5.2.2. Área de texto (Textarea)
5.2.3. Checkbox
5.2.4. Input radio
5.2.5. Select
5.3. Validación de formularios
5.4. Validación de formulario Avanzado
5.5. Formik
5.5.1. Instalación de Formik
5.5.2. Inicialización de un formulario con Formik
5.5.3. Hooks personalizados con useFormik
5.6. Resumen
6 - Gestión de datos
Objetivo
Integrar APIs externas en aplicaciones React.
Duración de la unidad
1 Hora 50 Minutos
Contenido
6. Gestión de datos
6.1. Integración de APIs externas
6.1.1. Tipos de métodos HTTP POST, GET, PUT/PATCH y DELETE
6.2. Transformación y manipulación de datos
6.2.1 Entendiendo la integración de APIs en React
6.2.2. Transformación de Datos
6.2.3. Manipulación de Datos
6.2.4. Uso de async/await
6.3. Control de errores
6.4. Axios paso a paso
6.4.1. Instalación de axios
6.4.2. Realizar una solicitud GET
6.4.3. Enviar una solicitud POST
6.4.4. Manejo de errores
6.4.5. Uso de async-await con Axios
6.5. Gestión de datos en desarrollo con LocalStorage
6.5.1. Ejemplo de almacenamiento y recuperación de datos
6.5.2. Eliminación de datos
6.6. Resumen
7 - Estilización y diseño
Objetivo
Utilizar CSS y librerías de estilos para estilizar componentes y aplicaciones React de manera efectiva garantizando una experiencia óptima en todo tipo de dispositivos.
Duración de la unidad
1 Hora 25 Minutos
Contenido
7. Estilización y diseño
7.1. Aplicar CSS
7.2. Librería de estilos Styled Components
7.2.1. ¿Qué es?
7.2.2. Ejemplo básico
7.2.3. Reutilización basada en props
7.2.4. Temas y variables globales
7.2.5. Refinando componentes existentes
7.3. Resumen
8 - Despliegue y hospedaje
Objetivo
Implementar el proceso de despliegue en plataformas de hospedaje populares, como Netlify o Vercel, para poner en línea una aplicación React de manera eficiente.
Duración de la unidad
4 Horas 20 Minutos
Contenido
8. Despliegue y hospedaje
8.1. Vite
8.1. Configuración de Vite para Producción
8.1.1. Tree Shaking y Eliminación de Código Muerto
8.1.2. Optimización de Recursos Externos
8.1.3. Uso de Variables de Entorno
8.1.4. Pruebas de Rendimiento y Análisis de Bundle
8.1.5.0 Automatización del Proceso de Construcción y Despliegue
8.2. Empaquetado y estructura de carpetas al hacer un build con vite
8.2.1. Contenidos del directorio de distribución
8.2.2. Ejemplo de configuración de Vite para el empaquetado
8.3. Simular servidor de producción
8.3.1. Instalación de serve
8.3.2. Uso de serve para simular el servidor
8.3.3.  Personalización del puerto
8.4.Resumen
9 - Optimización y rendimiento
Objetivo
Aplicar técnicas de optimización para mejorar el rendimiento de las aplicaciones React.
Duración de la unidad
1 Hora 25 Minutos
Contenido
9. Optimización y rendimiento
9.1. React Memo
9.1.1. Características de React Memo
9.1.2. Uso de React Memo
9.2. PureComponent
9.2.1. Ejemplo de uso de PureComponent
9.3. Uso eficiente de Hooks
9.3.1. UseState y rendimiento
9.3.2. UseEffect y la limpieza de side effects
9.3.3. UseContext y componentes altamente reutilizables
9.3.4. UseReducer para estados complejos
9.3.5. UseMemo para optimizar rendimiento
9.4. Lazy loading y Suspense
9.4.1. Manejo de Errores con Suspense
9.5. Resumen
10 - Gestión de estado avanzada y depuración
Objetivo
Integrar Redux con aplicaciones React, conectando componentes con el store de Redux para acceder y actualizar el estado global de manera efectiva.
Duración de la unidad
1 Hora 20 Minutos
Contenido
10. Gestión de estado avanzada y depuración
10.1. Redux y su ecosistema
10.2. Redux toolkit
10.3. Uso de React DevTools
10.3.1. Inspección de componentes
10.3.2. Detección de cambios de estado y props
10.3.3. Profiling de rendimiento
10.3.4. Rastreo de actualizaciones
10.3.5. Examinar el árbol de componentes
10.4. Resumen