React: de cero a experto

React: de cero a experto - Edición 2025

En este curso de React aprenderás desde los fundamentos de la librería hasta aspectos técnicos avanzados y despliegues, incorporando librerías adicionales ampliamente utilizadas en la industria. Todo el contenido está basado en TypeScript.

Adquirir Ahora Vista previa gratis

{CONTENIDO DEL CURSO}

1. Introducción
2. Temas puntuales
3. Introducción a las pruebas automáticas
4. Configuración Vitest
5. Mis primeras pruebas automáticas
6. Agrupar pruebas similares
7. Pruebas sobre componentes de React
8. Buscar elementos en el componente renderizado
9. Evaluar "snapshots"
10. Pruebas en el componente ItemCounter
11. Disparar eventos
12. Comprobar estilos
13. Pruebas en "FirstStepsApp"
14. Componentes fictícios - Mock Components
15. Esperar argumentos específicos
16. Índice de cobertura
17. Código fuente
18. Repaso interactivo: Pruebas automáticas - Unit testing
1. Introducción
2. Temas puntuales
3. Demostración de la sección
4. Inicio de proyecto - GifsApp
5. Estructura inicial, estilos y fuente
6. Pensemos en componentes
7. Solución a la tarea - GifList
8. Manejo de estado - Búsquedas previas
9. Manejo del componente de búsqueda
10. useEffect - Debounce
11. Tarea - Ver búsquedas previas
12. Developers Giphy - API Key
13. Obtener gifs mediante petición http
14. Variables de entorno
15. Solución a la tarea - Mostrar Gifs
16. Código fuente
17. Repaso interactivo: GifExpertApp - Aplicación
1. Introducción
2. Temas puntuales
3. Demostración
4. Continuación de aplicación
5. Problema que resuelve un "custom hook"
6. Custom Hooks
7. React DevTools
8. Hook personalizado - useGifs
9. Manejo en caché
10. useRef - Mantener el valor entre re-renders
11. Generar versión de producción
12. Código fuente de la sección
13. Repaso interactivo: Optimización y despliegue
1. Introducción
2. Temas puntuales
3. Configuración de pruebas
4. Pruebas sobre "CustomHeader"
5. Pruebas sobre "Custom Hooks"
6. Continuación - Pruebas sobre "Custom Hooks"
7. Componentes con "custom hooks"
8. Simular estado de un "Custom Hook"
9. Prueba sobre instancias de Axios
10. Pruebas sobre acción - getGifsByQuery
11. Axios mock adapter - Controlar resultados de Axios
12. Excepciones en las peticiones
13. Espías y sobre escritura de métodos
14. Pruebas sobre useGifs
15. Pruebas sobre useGifs - Caché
16. Pruebas sobre efectos y debounce
17. Pruebas adicionales sobre efectos
18. Porcentaje de cobertura
19. Integrar pruebas con la versión de producción
20. Código fuente
21. Repaso interactivo: Testing - Pruebas sobre GifsApp
1. Introducción
2. Temas puntuales
3. Demostración
4. Inicio de aplicación - HooksApp
5. TailwindCSS y Estilos
6. useState - Estado que re-dibuja
7. Tipado estricto en useState
8. useEffect - Disparar efectos secundarios
9. Recomendaciones del useEffect
10. Tarea - CustomHook
11. Solución de tarea - CustomHook
12. Conectar varios "Custom Hooks" entre sí
13. Parte 2 - Conectar varios "Custom Hooks"
14. useRef - Valor que no dispara re-render
15. Código fuente
16. Repaso interactivo: Profundizando Hooks y React
1. Introducción
2. Temas puntuales
3. Demostración
4. Continuación de proyecto - useReducer
5. ShadcnUI - ¿Qué acabamos de instalar?
6. Lista de tareas con useState
7. Patrón Reducer
8. Configuración de la función reducer
9. Solución a la tarea - Reducer
10. Controlar estados complejos - useReducer
11. Persistencia local - LocalStorage
12. Validadores de objetos - Zod
13. Tarea - Palabras revueltas
14. Solución a la tarea - Palabras revueltas
15. Scramble reducer - Controlar un estado complejo
16. Lógica del reducer
17. Parte 2 - Lógica del reducer
18. Efectos secundarios con un reducer
19. Código fuente
20. Repaso interactivo: Profundizando Hooks - useReducer
1. Introducción
2. Temas puntuales
3. Continuación de aplicación
4. React Memo - Función de memorización
5. useCallback - Memorización de funciones
6. useMemo - Memorización de valores
7. useOptimistic - Preparación del ejercicio
8. useOptimistic
9. useTransition
10. Simular fallo en useOptimistic + sonner
11. Use API + Suspense - Preparación de ejercicio
12. Use API + Suspense en acción
13. Código fuente
14. Repaso interactivo: Memorización y optimizaciones
1. Introducción
2. Temas puntuales
3. Continuación de proyecto - HooksApp
4. React Router - Manejo de rutas
5. Navegar entre pantallas - Diseño de páginas
6. Contextos y proveedores en React
7. Contexto de usuario - Información global
8. Consumir el contexto
9. Persistencia del usuario
10. Diseño condicional dependiendo de la sesión
11. Rutas privadas y públicas
12. Código fuente
13. Repaso interactivo: Use Context
1. Introducción
2. Temas puntuales
3. Demostración
4. Creación de proyecto - HeroesApp
5. Generadores visuales con AI
6. Creación de rutas y pantallas
7. Componente "Layout"
8. Lazy Load - Carga perezosa
9. Pensemos en componentes reutilizables
10. Parte 2 - Pensemos en componentes
11. Componentes de búsqueda
12. Grid de personajes
13. Shadcn Tabs
14. Componente de paginación
15. Menú superior - Identificar ruta activa
16. Breadcrumb - Implementar componente
17. Código fuente
1. Introducción
2. Temas puntuales
3. Continuación de proyecto
4. Axios, variables de entorno y API
5. TanStack Query - Gestor de estado asíncrono
6. Tipado estricto de la data
7. Mostrar la data de los héroes
8. Navegación manual dentro de las tarjetas
9. QueryParameters sobre useState
10. Paginar datos
11. Componente de paginación
12. Mostrar resumen estadístico
13. CustomHook - useSummary + solución de tarea
14. Paginar por categoría
15. Página de Héroe
16. Solución de tarea - HeroPage
17. Código fuente
18. Repaso interactivo: Funcionalidad, caché y optimizaciones
1. Introducción
2. Temas puntuales
3. Continuación de aplicación
4. Contexto para control de favoritos
5. Contexto de favoritos - Parte 2
6. Consumir el contexto de favoritos
7. useRef - En valores de inputs
8. Buscar héroes por nombre
9. Solución de tarea - Buscar héroes
10. Componentes de búsqueda adicionales
11. Filtros avanzados
12. Código fuente
13. Repaso interactivo: Context API - Búsquedas y favoritos
1. Introducción
2. Temas puntuales
3. Continuación de la aplicación y configuraciones
4. Variables de entorno para testing .env.test
5. Test - getHeroAction
6. Test - getSummaryAction
7. Test - getHeroesByPageAction
8. Parte 2 - Test - getHeroesByPageAction
9. Test - useHeroSummary
10. Parte 2 - Test - useHeroSummary
11. Fallo - Test - useHeroSummary
12. Test - usePaginatedHero
13. Test - FavoriteHero Context
14. Parte 2 - Test - FavoriteHero Context
15. Parte 3 - Test - FavoriteHero Context
16. Mock sobre objetos globales
17. Test - HeroStats
18. Parte 2 - Test - HeroStats
19. Test - App Router
20. Memory Router - Establecer rutas y argumentos
21. Probar redirección
22. Test - CustomPagination
23. Parte 2 - Test - CustomPagination
24. Parte 3 - Test - CustomPagination
25. Test - HomePage
26. Parte 2 - Test - HomePage
27. Test - SearchPage
28. Parte 2 - Test - SearchPage
29. Test - SearchControls
30. Parte 2 - Test - SearchControls
31. Parte 3 - Test - SearchControls
32. Código fuente
33. Repaso interactivo: Testing HeroesApp
1. Introducción
2. Temas puntuales
3. Continuación de proyecto
4. Desplegar backend en Render
5. Desplegar aplicación de React
6. Código fuente
1. Introducción
2. Demostración
3. Temas puntuales
4. Inicio de proyecto - TesloShop
5. Configuración del router
6. Tailwind + ShadCN UI + Google Fonts
7. Diseño del HomePage
8. HomePage - Paginación y productos
9. HomePage - Parámetros por URL
10. Sidebar - Filtro del precio
11. Lógica adicional de la búsqueda
12. Navegación entre pantallas
13. Logo personalizado
14. Diseño del login y registro
15. Diseño - Panel administrativo
16. Navegación del AdminSidebar
17. Diseño - ProductsPage
18. Diseño - ProductPage
19. Código fuente
20. Repaso interactivo: Panel administrativo de productos
1. Introducción
2. Temas puntuales
3. Continuación de proyecto
4. Teslo Backend - Docker images
5. Levantar backend y ejecutar semilla
6. TanStack Query - DevTools y Axios
7. Variables de entorno y Axios API
8. Acción - getProductsAction
9. Mostrar productos en pantalla
10. Aplicar paginación
11. Filtros por género y tallas
12. Filtrar por rango de precios
13. Filtrar por nombre de producto
14. Código fuente
15. Repaso interactivo: Productos y Backend
1. Introducción
2. Temas puntuales
3. Continuación de proyecto
4. Explicación - Inicio de sesión - JWT
5. Acción - Inicio de sesión
6. Mensajes en pantalla sobre inicio de sesión
7. Gestor de estado - Zustand
8. Auth Store
9. Cerrar sesión
10. Acción Verificación de Token con interceptores
11. Verificar estado de la autenticación
12. Conectar TanStack con Zustand
13. Zustand getters - Autorización
14. Protección de ruta por roles
15. Tarea - Registro de usuarios
16. Código fuente
17. Repaso interactivo: Auth
1. Introducción
2. Temas puntuales
3. Continuación de proyecto
4. Tarea - Búsqueda, paginación y productos
5. Acción - getProductById
6. Validar y redireccionar productos
7. Simplificar ProductPage
8. Paquete de formularios - useForm
9. Validaciones y posteo del formulario
10. Validaciones de espacios y valores positivos
11. useForm - Observar cambios en el formulario
12. Tarea - Agregar y eliminar tallas y etiquetas
13. Funciones como Props
14. Acción - Actualizar o crear producto
15. TanStack - useMutation
16. Bloquear botón de submit mientras se postea
17. Crear producto
18. Código fuente
19. Repaso interactivo: Formularios y productos
1. Introducción
2. Temas puntuales
3. Continuación de proyecto
4. Mostrar archivos seleccionados en pantalla
5. Preparar tipos y archivos para la carga
6. Cargar imágenes
7. Aprovisionar PostgreSQL en la nube
8. Desplegar backend
9. Desplegar aplicación de React
10. Código fuente
11. Repaso interactivo: Carga de archivos
1. Punto de control del curso
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - MERN-Calendar
5. Rutas de la aplicación
6. LoginScreen y Navbar
7. React Big Calendar
8. Configuraciones adicionales al calendario
9. Personalizar el cuadro de evento
10. Escuchar eventos del calendario
11. Creando un modal sobre el calendario
12. Contenido del Modal
13. Datepicker en español
14. Obtener la información del formulario del evento
15. Validaciones del formulario
16. Instalación y configuración de Redux
17. Mostrar y ocultar modal en base al Store
18. CalendarSlice
19. Cargar un evento en el modal
20. Preparar la creación de un nuevo evento
21. Añadir un nuevo evento
22. Editar el evento activo
23. Eliminar evento
24. Redux - serializableCheck
25. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Objetivo al final de la sección
4. Inicio de proyecto - CalendarApp Node Backend
5. Configurando Express
6. Variables de entorno y carpeta pública
7. Creando las rutas relacionadas a usuarios
8. Endpoints de remover, crear y login
9. Recuperar información de un posteo
10. Express Validator
11. Custom Middlewares
12. Configuración de base de datos
13. Conectar Node a Mongo Atlas
14. Crear un usuario en nuestra Base de Datos
15. Validaciones del usuario
16. Encriptar la contraseña
17. Login de usuario
18. Generar un Json Web Token
19. Revalidar JWT
20. Configurar CORS
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación del proyecto - Calendar Backend
4. Resolución de la tarea - CRUD
5. Modelo Evento
6. Validar campos necesarios
7. Grabar el evento en la base de datos
8. Obtener el listado de los Eventos
9. Actualizar un Evento
10. Eliminar Eventos
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Subir proyecto a GitHub
4. Pruebas antes de desplegar
5. Desplegar a Railway
6. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - Calendar + Backend
4. Creando variables de entorno
5. AuthSlice
6. useForm - Login y Registro
7. Axios - Configurar cliente para peticiones HTTP
8. Realizar login de usuario
9. Despachar acciones respectivas
10. Mostrar error en la autenticación
11. Creación de un nuevo usuario
12. Mantener el estado de la autenticación
13. Cambiar el URL después de una autenticación
14. Logout y nombre de usuario
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - Calendar CRUD de Eventos
4. Creando un nuevo Evento en el calendario
5. Mostrar eventos de la base de datos
6. Cargar los eventos al store
7. Actualizar el evento
8. Cambiar el color de los eventos según usuario
9. Eliminar un evento
10. Limpiar información del calendario
11. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Levantar proyectos localmente
4. Desplegar backend y frontend a la nube
5. Código fuente de la sección

Acerca de este curso

$50.00
445 lecciones
46 horas de contenido en video
Fernando Herrera

{REQUISITOS}

• Conocimiento básico de JavaScript es necesario
• Conocimiento básico de programación es necesario
• Poder realizar instalaciones en el equipo como administrador
• Pueden seguir el curso en OSX (Mac), Windows o Linux
• Estar dispuesto a realizar las tareas y ejercicios adicionales

{DESCRIPCIÓN}

¿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 con el unit test.

Sin olvidar que todos 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 en 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 revalidació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.

{CURSOS QUE PODRÍAN INTERESARTE}

OFERTAS→ RECURSOS GRATUITOS→

{PAGO ÚNICO}

Adquiere el curso con un único pago de forma vitalicia y acceso a posibles actualizaciones futuras.

$50.00

Promociones y descuentos aplican.

COMPRAR AHORA

Suscripción
Devtalles PRO Mensual

^USD16

SABER MÁS

Suscripción
DevTalles PRO Trimestral

^USD48

SABER MÁS

Suscripción
DevTalles PRO Semestral

^USD96

SABER MÁS

Suscripción
DevTalles PRO Anual

^USD176

12 meses por el precio 11

SABER MÁS

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en React, te invitamos a seguir las Rutas de aprendizaje de React, diseñadas para que sigas aprendiendo.

Ver rutas

Sección 1 - Introducción

Sección 2 - Introducción a React y conceptos generales

Sección 3 - Reforzamiento JavaScript / TypeScript

Sección 4 - Primeros pasos en React

Sección 5 - Pruebas automáticas - Unit testing

Sección 6 - GifExpertApp - Aplicación

Sección 7 - Optimización y despliegue

Sección 8 - Testing - Pruebas sobre GifsApp

Sección 9 - Profundizando Hooks y React

Sección 10 - Profundizando Hooks - useReducer

Sección 11 - Memorización y optimizaciones

Sección 12 - Use Context

Sección 13 - Single Page Application - SPA

Sección 14 - Funcionalidad, caché y optimizaciones

Sección 15 - Context API - Búsquedas y favoritos

Sección 16 - Testing HeroesApp

Sección 17 - Desplegar aplicación

Sección 18 - Panel administrativo de productos

Sección 19 - Productos y Backend

Sección 20 - Auth

Sección 21 - Formularios y productos

Sección 22 - Carga de archivos

Sección 23 - Punto de control

Sección 24: MERN Calendar - Estructura y Diseño

Sección 25: CalendarApp - Backend - Node, Express, Mongo

Sección 26: Backend - Eventos del calendario - CRUD

Sección 27: Despliegue del backend a la nube

Sección 28: MERN - Calendario + Backend

Sección 29: MERN CRUD - Eventos del calendario

Sección 30: Fin el MERN - Desplegarlo a producción

Acerca de este curso

React Native Expo: Aplicaciones nativas para IOS y Android

React PRO: Lleva tus bases al siguiente nivel

Next.js: El framework de React para producción

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual