React: De cero a experto
Context API, MERN, Hooks, Firestore, JWT, Testing, Autenticaciones, Despliegues, AI, CRUD, Logs, MUI, Multiple Routers..
Lo que serás capaz de hacer
React 19+ con TypeScript ¿Quieres aprender React Actual o migrarte a trabajar con Hooks? Este curso tiene por objetivo llevarte de cero conocimiento de React hasta un nivel competitivo en el ambiente laboral de hoy en día. Este curso está construido 100% en Hooks y functional components. También cuenta con secciones sobre pruebas unitarias y de integración en cada aplicación que hacemos en el curso, esto incluye pruebas en componentes, hooks, customHooks, context, Redux, Fetch, mocks, spies, snapshots y mucho más relacionado al unit test. Sin olvidar que t odos empezamos de cero en un momento, el curso cuenta con una introducción a los conceptos que necesitaremos para entrar en React de la forma más cómoda posible. El curso fue renovado con la versión 19, la cual integró herramientas de generación de interfaces con AI, ShadCN, Tailwind, TypeScript, Vitest, TanStack y muchas más tecnologías comúnmente usadas en React, pero lo principal fue la mejora de cada ejercicio para evitar renders innecesarios sin memorización o compilación adicional. (React Compiler) Este es un listado de varios de los temas que tocamos en el curso: React a profundidad Hooks y Hooks personalizados (Incluye nuevos de React 19+) Functional Components HOC - higher-order components TypeScript Context API Zustand MERN - Mongo + Express + React + Node React Router v7+ Diseños diferentes en diferentes rutas Diseños con AI ShadCN TailwindCSS Poco de Docker Bootstrap Mongoose JWT y su re-validación Encriptación de contraseñas Google Sign-in Autenticación personalizada Unit Test, Vitests Pruebas especializadas al terminar ejercicios Despliegues a producción React Testing Library Mocks Animaciones en componentes History QueryStrings Git y Github Redux DevTools, Redux ToolKit React DevTools Y mucho más! Este curso es para todas las personas que quieran aprender React, quieran pasar de Class Base Componentes a Functional Components, quieran especializarse en pruebas, hacer UIs elegantes, aplicaciones eficientes, reactivas y todos los que quieran programar en React de forma moderna con TypeScript
- Aprender React a profundidad
- Realizar pruebas unitarias y de integración en todo tu código
- MERN - Mongo Express React Node
- Autenticación con Google y JWTs (JsonWebTokens)
- Hooks a profundidad
- Crear aplicaciones reales
Temario
UNIDAD 1 - Introducción · 4 leccionesUNIDAD 1 - Introducción
UNIDAD 1 - Introducción
- Introducción
- ¿Cómo funciona el curso?
- ¿Cómo hacer preguntas?
- Instalaciones recomendadas
UNIDAD 2 - Introducción a React y conceptos generales · 4 leccionesUNIDAD 2 - Introducción a React y conceptos generales
UNIDAD 2 - Introducción a React y conceptos generales
- Introducción
- Temas puntuales
- ¿Qué es React?
- Puntos importantes sobre React
UNIDAD 3 - Reforzamiento JavaScript / TypeScript · 24 leccionesUNIDAD 3 - Reforzamiento JavaScript / TypeScript
UNIDAD 3 - Reforzamiento JavaScript / TypeScript
- Introducción
- Temas puntuales
- Inicio de proyecto - Reforzamiento
- Explicación y estructura de directorios
- Variables y constantes
- Template String
- Objetos literales
- Interfaces de TypeScript
- Arreglos
- Funciones
- Funciones con múltiples retornos
- Desestructuración de objetos
- Desestructuración de arreglos
- Tarea - Desestructuración
- Interfaces y Enumeraciones
- Importaciones y exportaciones
- Tarea - Importación y exportación
- Promesas
- Giphy API - Obtener gifs
- Fetch API
- Interfaces y optimización
- Async - Await
- Código fuente
- Reforzamiento JavaScript/TypeScript
UNIDAD 4 - Primeros pasos en React · 17 leccionesUNIDAD 4 - Primeros pasos en React
UNIDAD 4 - Primeros pasos en React
- Introducción
- Temas puntuales
- Primer proyecto en React
- Estructura de directorios
- Estructura de directorios - Parte 2
- Mi primer componente
- Tarea - Segundo componente
- Impresión de variables
- Colocar estilos de CSS
- Componente - ItemCounter
- Propiedades del componente - Props
- Mostrar listados de elementos
- Eventos de los elementos
- Hook - useState
- Archivos de CSS
- Código fuente
- Primeros pasos en React
UNIDAD 5 - Pruebas automáticas - Unit testing · 18 leccionesUNIDAD 5 - Pruebas automáticas - Unit testing
UNIDAD 5 - Pruebas automáticas - Unit testing
- Introducción
- Temas puntuales
- Introducción a las pruebas automáticas
- Configuración Vitest
- Mis primeras pruebas automáticas
- Agrupar pruebas similares
- Pruebas sobre componentes de React
- Buscar elementos en el componente renderizado
- Evaluar "snapshots"
- Pruebas en el componente ItemCounter
- Disparar eventos
- Comprobar estilos
- Pruebas en "FirstStepsApp"
- Componentes fictícios - Mock Components
- Esperar argumentos específicos
- Índice de cobertura
- Código fuente
- Pruebas automáticas - Unit testing
UNIDAD 6 - GifExpertApp - Aplicación · 17 leccionesUNIDAD 6 - GifExpertApp - Aplicación
UNIDAD 6 - GifExpertApp - Aplicación
- Introducción
- Temas puntuales
- Demostración de la sección
- Inicio de proyecto - GifsApp
- Estructura inicial, estilos y fuente
- Pensemos en componentes
- Solución a la tarea - GifList
- Manejo de estado - Búsquedas previas
- Manejo del componente de búsqueda
- useEffect - Debounce
- Tarea - Ver búsquedas previas
- Developers Giphy - API Key
- Obtener gifs mediante petición http
- Variables de entorno
- Solución a la tarea - Mostrar Gifs
- Código fuente
- GifExpertApp - Aplicación
UNIDAD 7 - Optimización y despliegue · 13 leccionesUNIDAD 7 - Optimización y despliegue
UNIDAD 7 - Optimización y despliegue
- Introducción
- Temas puntuales
- Demostración
- Continuación de aplicación
- Problema que resuelve un "custom hook"
- Custom Hooks
- React DevTools
- Hook personalizado - useGifs
- Manejo en caché
- useRef - Mantener el valor entre re-renders
- Generar versión de producción
- Código fuente de la sección
- Optimización y despliegue
UNIDAD 8 - Testing - Pruebas sobre GifsApp · 21 leccionesUNIDAD 8 - Testing - Pruebas sobre GifsApp
UNIDAD 8 - Testing - Pruebas sobre GifsApp
- Introducción
- Temas puntuales
- Configuración de pruebas
- Pruebas sobre "CustomHeader"
- Pruebas sobre "Custom Hooks"
- Continuación - Pruebas sobre "Custom Hooks"
- Componentes con "custom hooks"
- Simular estado de un "Custom Hook"
- Prueba sobre instancias de Axios
- Pruebas sobre acción - getGifsByQuery
- Axios mock adapter - Controlar resultados de Axios
- Excepciones en las peticiones
- Espías y sobre escritura de métodos
- Pruebas sobre useGifs
- Pruebas sobre useGifs - Caché
- Pruebas sobre efectos y debounce
- Pruebas adicionales sobre efectos
- Porcentaje de cobertura
- Integrar pruebas con la versión de producción
- Código fuente
- Testing - Pruebas sobre GifsApp
UNIDAD 9 - Profundizando Hooks y React · 16 leccionesUNIDAD 9 - Profundizando Hooks y React
UNIDAD 9 - Profundizando Hooks y React
- Introducción
- Temas puntuales
- Demostración
- Inicio de aplicación - HooksApp
- TailwindCSS y Estilos
- useState - Estado que re-dibuja
- Tipado estricto en useState
- useEffect - Disparar efectos secundarios
- Recomendaciones del useEffect
- Tarea - CustomHook
- Solución de tarea - CustomHook
- Conectar varios "Custom Hooks" entre sí
- Parte 2 - Conectar varios "Custom Hooks"
- useRef - Valor que no dispara re-render
- Código fuente
- Profundizando Hooks y React
UNIDAD 10 - Profundizando Hooks - useReducer · 20 leccionesUNIDAD 10 - Profundizando Hooks - useReducer
UNIDAD 10 - Profundizando Hooks - useReducer
- Introducción
- Temas puntuales
- Demostración
- Continuación de proyecto - useReducer
- ShadcnUI - ¿Qué acabamos de instalar?
- Lista de tareas con useState
- Patrón Reducer
- Configuración de la función reducer
- Solución a la tarea - Reducer
- Controlar estados complejos - useReducer
- Persistencia local - LocalStorage
- Validadores de objetos - Zod
- Tarea - Palabras revueltas
- Solución a la tarea - Palabras revueltas
- Scramble reducer - Controlar un estado complejo
- Lógica del reducer
- Parte 2 - Lógica del reducer
- Efectos secundarios con un reducer
- Código fuente
- Profundizando Hooks - useReducer
UNIDAD 11 - Memorización y optimizaciones · 14 leccionesUNIDAD 11 - Memorización y optimizaciones
UNIDAD 11 - Memorización y optimizaciones
- Introducción
- Temas puntuales
- Continuación de aplicación
- React Memo - Función de memorización
- useCallback - Memorización de funciones
- useMemo - Memorización de valores
- useOptimistic - Preparación del ejercicio
- useOptimistic
- useTransition
- Simular fallo en useOptimistic + sonner
- Use API + Suspense - Preparación de ejercicio
- Use API + Suspense en acción
- Código fuente
- Memorización y optimzaciones
UNIDAD 12 - Use Context · 13 leccionesUNIDAD 12 - Use Context
UNIDAD 12 - Use Context
- Introducción
- Temas puntuales
- Continuación de proyecto - HooksApp
- React Router - Manejo de rutas
- Navegar entre pantallas - Diseño de páginas
- Contextos y proveedores en React
- Contexto de usuario - Información global
- Consumir el contexto
- Persistencia del usuario
- Diseño condicional dependiendo de la sesión
- Rutas privadas y públicas
- Código fuente
- Use Context
UNIDAD 13 - Single Page Application - SPA · 17 leccionesUNIDAD 13 - Single Page Application - SPA
UNIDAD 13 - Single Page Application - SPA
- Introducción
- Temas puntuales
- Demostración
- Creación de proyecto - HeroesApp
- Generadores visuales con AI
- Creación de rutas y pantallas
- Componente "Layout"
- Lazy Load - Carga perezosa
- Pensemos en componentes reutilizables
- Parte 2 - Pensemos en componentes
- Componentes de búsqueda
- Grid de personajes
- Shadcn Tabs
- Componente de paginación
- Menú superior - Identificar ruta activa
- Breadcrumb - Implementar componente
- Código fuente
UNIDAD 14 - Funcionalidad, caché y optimizaciones · 18 leccionesUNIDAD 14 - Funcionalidad, caché y optimizaciones
UNIDAD 14 - Funcionalidad, caché y optimizaciones
- Introducción
- Temas puntuales
- Continuación de proyecto
- Axios, variables de entorno y API
- TanStack Query - Gestor de estado asíncrono
- Tipado estricto de la data
- Mostrar la data de los héroes
- Navegación manual dentro de las tarjetas
- QueryParameters sobre useState
- Paginar datos
- Componente de paginación
- Mostrar resumen estadístico
- CustomHook - useSummary + solución de tarea
- Paginar por categoría
- Página de Héroe
- Solución de tarea - HeroPage
- Código fuente
- Funcionalidad, caché y optimizaciones
UNIDAD 15 - Context API - Búsquedas y favoritos · 13 leccionesUNIDAD 15 - Context API - Búsquedas y favoritos
UNIDAD 15 - Context API - Búsquedas y favoritos
- Introducción
- Temas puntuales
- Continuación de aplicación
- Contexto para control de favoritos
- Contexto de favoritos - Parte 2
- Consumir el contexto de favoritos
- useRef - En valores de inputs
- Buscar héroes por nombre
- Solución de tarea - Buscar héroes
- Componentes de búsqueda adicionales
- Filtros avanzados
- Código fuente
- Context API - Búsquedas y favoritos
UNIDAD 16 - Testing HeroesApp · 33 leccionesUNIDAD 16 - Testing HeroesApp
UNIDAD 16 - Testing HeroesApp
- Introducción
- Temas puntuales
- Continuación de la aplicación y configuraciones
- Variables de entorno para testing .env.test
- Test - getHeroAction
- Test - getSummaryAction
- Test - getHeroesByPageAction
- Parte 2 - Test - getHeroesByPageAction
- Test - useHeroSummary
- Parte 2 - Test - useHeroSummary
- Fallo - Test - useHeroSummary
- Test - usePaginatedHero
- Test - FavoriteHero Context
- Parte 2 - Test - FavoriteHero Context
- Parte 3 - Test - FavoriteHero Context
- Mock sobre objetos globales
- Test - HeroStats
- Parte 2 - Test - HeroStats
- Test - App Router
- Memory Router - Establecer rutas y argumentos
- Probar redirección
- Test - CustomPagination
- Parte 2 - Test - CustomPagination
- Parte 3 - Test - CustomPagination
- Test - HomePage
- Parte 2 - Test - HomePage
- Test - SearchPage
- Parte 2 - Test - SearchPage
- Test - SearchControls
- Parte 2 - Test - SearchControls
- Parte 3 - Test - SearchControls
- Código fuente
- Testing HeroesApp
UNIDAD 17 - Desplegar aplicación · 6 leccionesUNIDAD 17 - Desplegar aplicación
UNIDAD 17 - Desplegar aplicación
- Introducción
- Temas puntuales
- Continuación de proyecto
- Desplegar backend en Render
- Desplegar aplicación de React
- Código fuente
UNIDAD 18 - Panel administrativo de productos · 20 leccionesUNIDAD 18 - Panel administrativo de productos
UNIDAD 18 - Panel administrativo de productos
- Introducción
- Demostración
- Temas puntuales
- Inicio de proyecto - TesloShop
- Configuración del router
- Tailwind + ShadCN UI + Google Fonts
- Diseño del HomePage
- HomePage - Paginación y productos
- HomePage - Parámetros por URL
- Sidebar - Filtro del precio
- Lógica adicional de la búsqueda
- Navegación entre pantallas
- Logo personalizado
- Diseño del login y registro
- Diseño - Panel administrativo
- Navegación del AdminSidebar
- Diseño - ProductsPage
- Diseño - ProductPage
- Código fuente
- Panel administrativo de productos
UNIDAD 19 - Productos y Backend · 15 leccionesUNIDAD 19 - Productos y Backend
UNIDAD 19 - Productos y Backend
- Introducción
- Temas puntuales
- Continuación de proyecto
- Teslo Backend - Docker images
- Levantar backend y ejecutar semilla
- TanStack Query - DevTools y Axios
- Variables de entorno y Axios API
- Acción - getProductsAction
- Mostrar productos en pantalla
- Aplicar paginación
- Filtros por género y tallas
- Filtrar por rango de precios
- Filtrar por nombre de producto
- Código fuente
- Productos y Backend
UNIDAD 20 - Auth · 17 leccionesUNIDAD 20 - Auth
UNIDAD 20 - Auth
- Introducción
- Temas puntuales
- Continuación de proyecto
- Explicación - Inicio de sesión - JWT
- Acción - Inicio de sesión
- Mensajes en pantalla sobre inicio de sesión
- Gestor de estado - Zustand
- Auth Store
- Cerrar sesión
- Acción Verificación de Token con interceptores
- Verificar estado de la autenticación
- Conectar TanStack con Zustand
- Zustand getters - Autorización
- Protección de ruta por roles
- Tarea - Registro de usuarios
- Código fuente
- Auth
UNIDAD 21 - Formularios y productos · 19 leccionesUNIDAD 21 - Formularios y productos
UNIDAD 21 - Formularios y productos
- Introducción
- Temas puntuales
- Continuación de proyecto
- Tarea - Búsqueda, paginación y productos
- Acción - getProductById
- Validar y redireccionar productos
- Simplificar ProductPage
- Paquete de formularios - useForm
- Validaciones y posteo del formulario
- Validaciones de espacios y valores positivos
- useForm - Observar cambios en el formulario
- Tarea - Agregar y eliminar tallas y etiquetas
- Funciones como Props
- Acción - Actualizar o crear producto
- TanStack - useMutation
- Bloquear botón de submit mientras se postea
- Crear producto
- Código fuente
- Formularios y productos
UNIDAD 22 - Carga de archivos · 11 leccionesUNIDAD 22 - Carga de archivos
UNIDAD 22 - Carga de archivos
- Introducción
- Temas puntuales
- Continuación de proyecto
- Mostrar archivos seleccionados en pantalla
- Preparar tipos y archivos para la carga
- Cargar imágenes
- Aprovisionar PostgreSQL en la nube
- Desplegar backend
- Desplegar aplicación de React
- Código fuente
- Carga de archivos
UNIDAD 23 - Punto de control · 1 leccionesUNIDAD 23 - Punto de control
UNIDAD 23 - Punto de control
- Punto de control del curso
UNIDAD 24 - MERN Calendar - Estructura y Diseño · 26 leccionesUNIDAD 24 - MERN Calendar - Estructura y Diseño
UNIDAD 24 - MERN Calendar - Estructura y Diseño
- Introducción a la sección
- Temas puntuales de la sección
- Demostración del objetivo final de la sección
- Inicio de proyecto - MERN-Calendar
- Rutas de la aplicación
- LoginScreen y Navbar
- React Big Calendar
- Configuraciones adicionales al calendario
- Personalizar el cuadro de evento
- Escuchar eventos del calendario
- Creando un modal sobre el calendario
- Contenido del Modal
- Datepicker en español
- Obtener la información del formulario del evento
- Validaciones del formulario
- Instalación y configuración de Redux
- Mostrar y ocultar modal en base al Store
- CalendarSlice
- Cargar un evento en el modal
- Preparar la creación de un nuevo evento
- Añadir un nuevo evento
- Editar el evento activo
- Eliminar evento
- Redux - serializableCheck
- Código fuente de la sección
- MERN Calendar - Estructura y Diseño
UNIDAD 25 - CalendarApp - Backend - Node, Express, Mongo · 22 leccionesUNIDAD 25 - CalendarApp - Backend - Node, Express, Mongo
UNIDAD 25 - CalendarApp - Backend - Node, Express, Mongo
- Introducción a la sección
- Temas puntuales de la sección
- Objetivo al final de la sección
- Inicio de proyecto - CalendarApp Node Backend
- Configurando Express
- Variables de entorno y carpeta pública
- Creando las rutas relacionadas a usuarios
- Endpoints de remover, crear y login
- Recuperar información de un posteo
- Express Validator
- Custom Middlewares
- Configuración de base de datos
- Conectar Node a Mongo Atlas
- Crear un usuario en nuestra Base de Datos
- Validaciones del usuario
- Encriptar la contraseña
- Login de usuario
- Generar un Json Web Token
- Revalidar JWT
- Configurar CORS
- Código fuente de la sección
- CalendarApp - Backend - Node, Express, Mongo
UNIDAD 26 - Backend - Eventos del calendario - CRUD · 12 leccionesUNIDAD 26 - Backend - Eventos del calendario - CRUD
UNIDAD 26 - Backend - Eventos del calendario - CRUD
- Introducción a la sección
- Temas puntuales de la sección
- Continuación del proyecto - Calendar Backend
- Resolución de la tarea - CRUD
- Modelo Evento
- Validar campos necesarios
- Grabar el evento en la base de datos
- Obtener el listado de los Eventos
- Actualizar un Evento
- Eliminar Eventos
- Código fuente de la sección
- Backend - Eventos del calendario - CRUD
UNIDAD 27 - Despliegue del backend a la nube · 6 leccionesUNIDAD 27 - Despliegue del backend a la nube
UNIDAD 27 - Despliegue del backend a la nube
- Introducción a la sección
- Temas puntuales de la sección
- Subir proyecto a GitHub
- Pruebas antes de desplegar
- Desplegar a Railway
- Código fuente de la sección
UNIDAD 28 - MERN - Calendario + Backend · 16 leccionesUNIDAD 28 - MERN - Calendario + Backend
UNIDAD 28 - MERN - Calendario + Backend
- Introducción a la sección
- Temas puntuales de la sección
- Continuación de proyecto - Calendar + Backend
- Creando variables de entorno
- AuthSlice
- useForm - Login y Registro
- Axios - Configurar cliente para peticiones HTTP
- Realizar login de usuario
- Despachar acciones respectivas
- Mostrar error en la autenticación
- Creación de un nuevo usuario
- Mantener el estado de la autenticación
- Cambiar el URL después de una autenticación
- Logout y nombre de usuario
- Código fuente de la sección
- MERN - Calendario + Backend
UNIDAD 29 - MERN CRUD - Eventos del calendario · 12 leccionesUNIDAD 29 - MERN CRUD - Eventos del calendario
UNIDAD 29 - MERN CRUD - Eventos del calendario
- Introducción a la sección
- Temas puntuales de la sección
- Continuación de proyecto - Calendar CRUD de Eventos
- Creando un nuevo Evento en el calendario
- Mostrar eventos de la base de datos
- Cargar los eventos al store
- Actualizar el evento
- Cambiar el color de los eventos según usuario
- Eliminar un evento
- Limpiar información del calendario
- Código fuente de la sección
- MERN CRUD - Eventos del calendario
UNIDAD 30 - Fin el MERN - Desplegarlo a producción · 5 leccionesUNIDAD 30 - Fin el MERN - Desplegarlo a producción
UNIDAD 30 - Fin el MERN - Desplegarlo a producción
- Introducción
- Temas puntuales
- Levantar proyectos localmente
- Desplegar backend y frontend a la nube
- Código fuente de la sección
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
30 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
23 cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Fernando Herrera.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 30 unidades · 450 lecciones · 60 h
- 12 meses de acceso
- 23 cuestionarios de evaluación
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Fernando Herrera; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.


