Curso React
¡Hola a todos!
¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sabías cómo empezar, este entrenamiento es fundamental para tu proceso formativo.
Duración estimada: 200-250 horas académicas (aproximadamente 6 meses) Modalidad: Presencial/Virtual híbrida Intensidad sugerida: 4-5 horas semanales (2 sesiones de 2-2.5 horas)
Bienvenido al Taller, hablaremos de:
-
Html5
-
CSS3
-
javaScript
-
Bootstrap
-
Git
-
PHP
-
React
-
Angular
-
MySql
Temario Curso de React
📊 Información General del Curso
Duración estimada: 10-12 semanas
Horas totales: 120-150 horas
Modalidad: Presencial/Virtual
Nivel: Principiante a Intermedio-Avanzado
Prerrequisitos: JavaScript ES6+, HTML5, CSS3
🎯 Objetivos del Curso
Al finalizar el curso, los estudiantes podrán:
Crear aplicaciones web interactivas con React
Manejar el estado de aplicaciones complejas
Implementar routing y navegación
Consumir APIs y manejar datos asíncronos
Aplicar mejores prácticas de desarrollo
Deployar aplicaciones React en producción
📚 MÓDULO 1: Fundamentos de React (Semana 1-2)
Duración: 24 horas | Intensidad: 12 horas/semana
Tema 1.1: Introducción a React (4 horas)
¿Qué es React y por qué usarlo?
Comparación con Vanilla JavaScript
Virtual DOM y reconciliación
Ecosistema de React
Configuración del entorno de desarrollo
Tema 1.2: Primeros pasos con Create React App (4 horas)
Instalación y configuración
Estructura de un proyecto React
JSX: sintaxis y reglas
Primer componente funcional
Renderizado de elementos
Tema 1.3: Componentes y Props (8 horas)
Componentes funcionales vs de clase
Props: paso de datos entre componentes
Props.children y composición
PropTypes para validación
Destructuring de props
Tema 1.4: Manejo de eventos (4 horas)
Eventos sintéticos en React
Event handlers
Binding y arrow functions
Paso de parámetros a event handlers
Tema 1.5: Renderizado condicional y listas (4 horas)
Operadores ternarios y &&
Renderizado de arrays
Key prop y su importancia
Filtrado y mapeo de datos
🔄 MÓDULO 2: Estado y Ciclo de Vida (Semana 3-4)
Duración: 24 horas | Intensidad: 12 horas/semana
Tema 2.1: Introducción al Estado (6 horas)
¿Qué es el estado?
useState Hook
Estado vs Props
Actualizaciones del estado
Estado como función
Tema 2.2: Hooks Fundamentales (10 horas)
useEffect: efectos secundarios
Ciclo de vida con useEffect
Cleanup functions
Dependencias en useEffect
useContext para compartir estado
Tema 2.3: Formularios y Controlled Components (8 horas)
Inputs controlados vs no controlados
Manejo de formularios complejos
Validación básica
Librerías de formularios (Formik/React Hook Form)
🔄 MÓDULO 2: Estado y Ciclo de Vida (Semana 3-4)
Duración: 24 horas | Intensidad: 12 horas/semana
Tema 2.1: Introducción al Estado (6 horas)
¿Qué es el estado?
useState Hook
Estado vs Props
Actualizaciones del estado
Estado como función
Tema 2.2: Hooks Fundamentales (10 horas)
useEffect: efectos secundarios
Ciclo de vida con useEffect
Cleanup functions
Dependencias en useEffect
useContext para compartir estado
Tema 2.3: Formularios y Controlled Components (8 horas)
Inputs controlados vs no controlados
Manejo de formularios complejos
Validación básica
Librerías de formularios (Formik/React Hook Form)
🏗️ MÓDULO 3: Arquitectura de Componentes (Semana 5-6)
Duración: 24 horas | Intensidad: 12 horas/semana
Tema 3.1: Composición de Componentes (8 horas)
Patrones de composición
Higher-Order Components (HOC)
Render Props
Children patterns avanzados
Tema 3.2: Custom Hooks (8 horas)
Creación de hooks personalizados
Lógica reutilizable
Hooks para llamadas a APIs
Testing de custom hooks
Tema 3.3: Optimización de Rendimiento (8 horas)
React.memo
useMemo y useCallback
Lazy loading con Suspense
Code splitting
Profiling de aplicaciones
🌐 MÓDULO 4: Enrutamiento y Navegación (Semana 7)
Duración: 12 horas | Intensidad: 12 horas/semana
Tema 4.1: React Router (6 horas)
Instalación y configuración
Route, Link, NavLink
Parámetros de ruta
Query parameters
Tema 4.2: Navegación Avanzada (6 horas)
Nested routes
Protected routes
Programmatic navigation
History API
📡 MÓDULO 5: Manejo de Estado Global (Semana 8-9)
Duración: 24 horas | Intensidad: 12 horas/semana
Tema 5.1: Context API Avanzado (8 horas)
Context patterns
Multiple contexts
Context optimization
Context vs state management libraries
Tema 5.2: Introducción a Redux (8 horas)
Principios de Redux
Actions, Reducers, Store
React-Redux hooks
Redux DevTools
Tema 5.3: Redux Toolkit (8 horas)
Configuración moderna con RTK
CreateSlice y CreateAsyncThunk
RTK Query para API calls
Mejores prácticas
🔌 MÓDULO 6: APIs y Datos Asíncronos (Semana 10)
Duración: 12 horas | Intensidad: 12 horas/semana
Tema 6.1: Fetch API y Axios (6 horas)
Llamadas HTTP en React
Manejo de loading states
Error handling
Abort controllers
Tema 6.2: Librerías de Data Fetching (6 horas)
React Query/TanStack Query
SWR
Caching y sincronización
Optimistic updates
🧪 MÓDULO 7: Testing (Semana 11)
Duración: 12 horas | Intensidad: 12 horas/semana
Tema 7.1: Fundamentos de Testing (6 horas)
Jest y React Testing Library
Testing de componentes
Testing de hooks
Mocking
Tema 7.2: Testing Avanzado (6 horas)
Integration tests
E2E testing con Cypress
Testing de Redux
Continuous Integration
🚀 MÓDULO 8: Proyecto Final y Deploy (Semana 12)
Duración: 12 horas | Intensidad: 12 horas/semana
Tema 8.1: Desarrollo del Proyecto (8 horas)
Planificación de aplicación completa
Implementación de funcionalidades
Code review y refactoring
Optimización final
Tema 8.2: Deployment y Producción (4 horas)
Build de producción
Deployment en Netlify/Vercel
Environment variables
Monitoring y analytics
📋 Metodología y Evaluación
Distribución de Tiempo por Clase:
Teoría: 40% (explicación conceptual)
Práctica guiada: 35% (coding junto al instructor)
Práctica independiente: 25% (ejercicios individuales)
Evaluaciones:
Quizzes semanales: 20%
Proyectos modulares: 40%
Proyecto final: 30%
Participación: 10%
Proyectos Prácticos:
To-Do App (Módulo 2)
E-commerce básico (Módulo 4)
Dashboard con datos externos (Módulo 6)
Aplicación completa (Módulo 8)
🛠️ Herramientas y Tecnologías
Esenciales:
Node.js y npm
Create React App / Vite
VS Code con extensiones React
React Developer Tools
Git y GitHub
Librerías principales:
React Router
Redux Toolkit
Axios/React Query
Material-UI o Tailwind CSS
React Testing Library
📖 Recursos Adicionales
Documentación oficial de React
React Beta Docs
FreeCodeCamp React Course
React patterns y best practices
Ejercicios en CodeSandbox
Enlaces de interes
Recursos especializados
Videotutoriales explicativos
Herramientas recomendadas
- Drag and drop con javascript: https://drag-and-drop.formkit.com
- SQLFlow herramienta que visualiza bases de datos: https://sqlflow.gudusoft.com/#/
- Creador de personas que no existen: https://thispersondoesnotexist.com/
- Pagina de Iconos: https://fontawesome.com/
- Creador de Gradientes: https://cssgradient.io/
- Creador de imagenes con IA: https://firefly.adobe.com