React y TypeScript - La Guía Completa Creando +10 Proyectos

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.