React y TypeScript - La Guía Completa Creando +10 Proyectos (Udemy.com)
Aprende React desde cero: Hooks y State hasta TypeScript, Zod, Zustand, React Query, Next.js IA React Router MERN y PERN
Created by: Juan Pablo De la torre Valdez
Last updated July 2026
What you will learn
- En pocas palabras: Desde useState hasta Nextjs 14 con Server Actions
- Aprenderás a crear y manejar proyectos con React
- Aprenderás los hooks más utilizados useEffect, useState, useMemo, useCallback, useReducer y más
- Aprenderás a crear tus propios hooks
- Aprenderemos a utilizar TypeScript con React
- Utilizar Context API para un estado global sin dependencias
- Aprenderás Zustand para manejar el estado global fácilmente
- Consumir API's externas en React
- Integrar Tailwind a tus proyectos
- React hook form la librería más popular para formularios en React hoy en día
- Aprenderemos Zod para validar las respuestas de nuestras api's y darles consistencia
- Headless UI para crear diseños interactivos en Tailwind
- React Router DOM para tener proyectos con múltiples páginas
- Stack de PERN y MERN
- Crear aplicaciones FullStack con React TypeScript y Express
Course Description
Aprende React con TypeScript paso a paso creando proyectos del mundo real.
El único curso en Udemy que enseña React con proyectos del mundo real; Incluso si tus bases de JavaScript no son muy fuertes el curso tiene una introducción con todo lo que debes saber.
¿Quisiste aprender React y solo te aprendiste los nombres de los Pokemon? entonces este curso es para ti.
En este curso aprenderemos a crear proyectos reales abarcando todo el ecosistema de React: State, Hooks, crear tus propios hooks, hooks avanzados, estado global, componentes y eventos, consultar API's externas y crear tus propias API's
Todos los Proyectos incluyen TypeScript desde el inicio.
Proyecto 01: Carrito de compras.- En este proyecto estaremos aprendiendo los fundamentos de React: Componentes, Eventos y State, mientras creas un carrito de compras real con cantidades, precios, y más, tomaremos este mismo carrito para mostrarte como crear tus propios Hooks y como transformarlo a código de TypeScript y cuales son sus beneficios.
Proyecto 02: Calculadora de Propinas y Consumos: Un proyecto ideal para restaurantes donde se podrá generar una orden con consumos y la persona podrá elegir la propina que desea dejar.
Proyecto 03: Contador de Calorias y Ejercicios: Una de las tareas que más vas a realizar en tu vida como Developer es procesar formularios; en este proyecto tendremos un formulario, leeremos sus datos, lo vamos a procesar y realizar algunas operaciones como validación y mucho más, además aprenderás que es useReducer para manejar estados complejos en tus apps.
Proyecto 04: Migrar Carrito de Compras a useReducer: En este capítulo estaremos viendo como tomar el proyecto de carrito de compras y convertirlo hacia useReducer; cuando tomas un proyecto que conoces en una tecnología nueva es garantía que podrás entender mejor los conceptos.
Proyecto 05: Migrar Calculadora de Propinas hacia useReducer: Veamos como migrar nuestro otro proyecto hacia useReducer.
Proyecto 06: Control de Gastos y Presupuestos: En este proyecto estaremos viendo que es Context API para tener un estado global sin dependencias; Context API va a ayudarte a no pasar props por cada componente, completamos el curso con filtrar gastos por categoría, calendario de fechas de gastos, gráficas y mucho más!
Proyecto 07: Administrador de Pacientes: Este proyecto añade 2 herramientas nuevas: Zustand para manejar un estado global de forma muy simple y React Hook Form, una librería para tener validación y procesamiento en formularios de forma bastante sencilla.
Proyecto 08: Aplicación de Clima: Esta será nuestra primera aplicación que obtiene datos de una API, como React Developer vas a trabajar en muchos proyectos que incluyen API's; estaremos viendo como validar y enviar peticiones hacia API, como leer las respuestas y como mostrar esa información.
Proyecto 09: Cotizador de Criptomonedas: Este proyecto al igual que el anterior se conecta a una API para obtener el precio de una Criptomoneda en dolares, pesos mexicanos y otras monedas; Este proyecto incluye Zustand y Zod para validar las respuestas que obtenemos de nuestra API.
Proyecto 10: Buscador de Recetas: Este es nuestro primer proyecto que incluye múltiples páginas; lo estaremos realizando con React Router DOM la librería más popular para crear aplicaciones en React de múltiples página, este curso utiliza el Slice Pattern para tener múltiples Stores de Zustand!
Proyecto 11: Administrador de Productos: Este es nuestro primer proyecto Full Stack donde estaremos creando tanto frontend como backend utilizando el PERN (PostgreSQL, Node.js, Express y React) este proyecto utiliza una REST API que conectaremos con React, añadiremos temas más avanzados como Testing y Documentación de API's.
Proyecto 12: Administrador de Tareas y Proyectos: Este es el Proyecto más avanzado del curso, utiliza el MERN stack que es uno de los más populares hoy en día, este proyecto incluye un sistema robusto de autenticación y registro de usuarios con confirmación de cuentas y resetear el password en caso de olvidarlo; además incluye roles y los usuarios solo pueden realizar ciertas acciones. El curso incluye además una REST API bastante compleja y avanzada, El curso utiliza también React Query, Tailwindcss, React Router, Mongoose, Express, TypeScript y mucho más.
Proyecto 13: Quiosco de Comida: Finalizaremos este curso con una introducción a Next.js, utilizaremos la versión 14 con App Router, Server Actions, Prisma, Zod, Zustand, Tailwind, y mucho más, el proyecto incluye subida de archivos, CRUD Completo, paginador, buscador y más.
Instructor Details
- 4.6 Rating
12,496 Reviews
Juan Pablo De la torre Valdez
¡Soy diseñador y programador web desde hace 19 años! (2006)
No te aburriré ni te contaré la típica historia de que soy programador desde los 6 años porque eso sería mentir.
Empecé a los 18 años y la programación cambió mi vida.
Aprendí con tutoriales en video, por eso creo en este formato de enseñanza; el problema es que muchos cursos hablaban con términos confusos, extraños y no creaban un proyecto real, es por eso que enseño Creando Proyectos Reales.
Por años he trabajado con WordPress, Drupal, PHP, JavaScript, Laravel, Node.js, Express, React, Angular, Vue, Ruby on Rails, Django, React Native, Flutter en diferentes empresas de mi Ciudad y para algunos clientes de forma Freelancer, pero cuando conocí a Udemy descubrí que podia realizar los cursos creando proyectos reales que tanta falta hacían, por lo tanto renuncie a mi trabajo y deje mi agencia de diseño Freelancer para comenzar Código Con Juan en Udemy.
More courses by Juan Pablo De la torre Valdez
CSS La Guía Completa - Flexbox, CSS Grid, SASS +20 proyectos (2026)
4.7 (4,652 Reviews)
Provider: Udemy
Time: 37.1h
$11.99
Professional WordPress Theme & Plugin Development (2019)
4.4 (1,138 Reviews)
Provider: Udemy
Time: 34.8h
$74.99
WordPress E-Commerce Development w/ WooCommerce & Storefront (2019)
4.3 (461 Reviews)
Provider: Udemy
Time: 9.6h
$64.99
Modern JavaScript The Complete Course - Build +15 Projects (2019)
4.3 (407 Reviews)
Provider: Udemy
Time: 27.8h
$14.99
More React courses
Next.js: El framework de React para producción (2026)
4.9 (4,540 Reviews)
Provider: Udemy
Time: 39h
$10.99
React JS + Redux + ES6. Completo ¡De 0 a experto! (español) (2022)
4.4 (4,660 Reviews)
Provider: Udemy
Time: 53.6h
$11.99
Microservices with Node JS and React (2026)
4.8 (20,187 Reviews)
Provider: Udemy
Time: 54.4h
$139.99
【한글자막】 React 완벽 가이드 2025 with React Router & Redux
4.8 (2,992 Reviews)
Provider: Udemy
Time: 72.7h
$79.99
Learn to build an e-commerce store with .Net, React & Redux (2026)
4.8 (2,218 Reviews)
Provider: Udemy
Time: 29.6h
$94.99
React - Полный Курс по React, Redux и Redux Toolkit (2026)
4.8 (1,977 Reviews)
Provider: Udemy
Time: 32.5h
$69.99
Reviews
By 유지태 夜神月 on 7/3/2026
Estimado profesor, le agradezco porque he tomado varios cursos con usted, le habìa recomendado cursos atràs como en el de VueJS que en los cursos de fullstack se hiciera de pronto todo el backend y despuès el frontend, para estar inmersos en conocimiento porque cada 40 minutos cambiabamos en el de Upstak o en diferente tiempo, ya que a veces saltando entre stack, es complicado para algunos,mientras digerimos conocimiento ya sea front o back, le mando un abrazo a la distancia, ojalà tome esa consideraciòn para ya nada màs digamos estar viendo por què razòn tomamos peticiones a ciertos endpoints.
By Ruben on 6/2/2026
Hay temas que son mas complicados que otros por lo que considero que se le debe de deidcar mas tiempo en ellos, se entiende que si es el caso nos debemos de apoyar con preguntas y me parece bien, el detalle es que llega el momento en el que no las contestan.
By Jonathan Amaya on 5/20/2026
Profe Juan, el temário va directo al grano. Cubre desde los fundamentos sólidos de React (Hooks, Context API, gestión de estado) hasta el renderizado en el servidor (SSR, SSG, ISR) y el App Router de Next.js. No se salta pasos y la curva de aprendizaje está muy bien cuidada. Cada curso suyo es una, no desepciona, ahora por mi reciente adquisición Laravel 13
By Matias Nicolas Terron Medina on 3/17/2026
Muy buena explicación en todo el curso, buenos proyectos y muy útiles para aprender muchas cosas, también el factor de que hayan cosas que quedaron "desactualizadas" ayuda a buscar la manera de solucionarlo lo que te impulsa a aprender mas y como buscar soluciones. Súper recomendado!
By Alan Mauricio Escamilla Castro on 2/14/2026
Es el segundo curso que tomo con Juan Pablo y en verdad es un gran maestro. Su forma de enseñar a través de ejemplos y la claridad de sus explicaciones están muy por encima del resto de cursos disponibles en la plataforma. Si bien algunas partes necesitan ser actualizadas, encontrarse con estos "problemas" te ayuda a pensar como developer y a buscar soluciones. Finalmente, a los que van comenzando y les interesa este curso, les recomendaría comenzar por el curso de JavaScript Moderno y después realizar este. El flujo de aprendizaje se siente muy natural y vas a tener muy buenas bases de JavaScript.
By Pablo Enrique Caparelli on 1/11/2026
Hola. Ante todo gracias porque aprendí mucho en el curso. Si bien hay errores en algunos videos, es entendible porque las nuevas versiones de diferentes aplicaciones y los cambios que se van dando con el tiempo, hace que sea difícil la actualización. Me gustó que me contestaran las preguntas, esto lo valoro mucho.
By Jorge Luis Escobedo Solana on 1/7/2026
Es un curso que sigue siendo vigente. Si tiene algunas pequeñas cosas un poco desactualizadas, pero nada que no te impida realizar el curso, la explicación es excelente y la forma en que vas desarrollando los proyectos, te permite aprender muy bien para poner en practica lo que ves en los videos
By Luis Alberto Bolaño Navarro on 12/30/2025
Excelente curso definitivamente con Juan y su equipo es seguro que vas aprender, recomiendo este curso 100% , como recomendacion para los que se animen a hacerlo se deben tener buenas bases de Js , fue toda una experiencia este curso se comienza desde lo mas basico hasta proyectos mas complejos .....
By Ricky Angel Jiménez Bueno on 12/23/2025
Como siempre excelente curso de parte del profe Juan. Aprendí mas sobre React y TypeScript, ya que venia de completar el curso JavaScript Moderno del mismo profesor. Si quieren un mejor orden de aprendizaje, les recomiendo hacer JS Moderno y después seguir con este, que es mas centrado en la tecnologías anteriores y su continuación a Next.js con proyectos mas complejos.
By Denilson Trochez on 11/18/2025
Exelente profesor, me gusta su manera de explicar este es mi tercer curso con el y el último en este 2026 definitivamente tengo una base súper sólida y voy a fortificarla haciendo proyectos reales para negocios en mi ciudad, súper recomendado los cursos de Juan Pablo de la Torre
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 92 / 100










