Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

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

via Udemy

Overview

Aprende React desde cero: Hooks y State hasta TypeScript, Zod, Zustand, React Query, Next.js, React Router, MERN y PERN

What you'll 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
  • Agregar Roles con Express
  • Autenticación en aplicaciones React
  • Autorización en React
  • React Query para peticiones con gran performance
  • Next14 con App Router
  • Server Actions en Nextjs
  • Aprenderás Prisma y Next
  • Sequelize y Mongoose para los proyectos FullStack

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.

Syllabus

  • Introducción al Curso - Qué es React, Proyectos que Construiremos y más
  • Introducción a JavaScript para React
  • PROYECTO: Carrito de Compras - Introducción y Herramientas
  • PROYECTO: Carrito de Compras - Creando el Proyecto en Windows
  • PROYECTO: Carrito de Compras - Creando el Proyecto en Mac
  • PROYECTO: Carrito de Compras - Creando el Carrito, introducción a Hooks y más
  • PROYECTO - Carrito de Compras - Crear tus propios Hooks
  • PROYECTO - Carrito de Compras - Migrando a TypeScript paso a paso
  • PROYECTO - Calculadora de Propinas con TypeScript
  • PROYECTO - Contador de Calorías, Consumo y Ejercicios con useReducer
  • PROYECTO - Migrar el Carrito de Compras de Guitarras a useReducer
  • PROYECTO - Calculadora de Propinas - Migrando hacia useReducer
  • PROYECTO - Control de Gastos y Presupuestos con Context API para estado global
  • PROYECTO - Contador de Calorias hacia ContextAPI y useReducer
  • PROYECTO - Administrador de Pacientes con Zustand y React Hook Form
  • PROYECTO - Aplicación de Clima que obtiene el Clima en tiempo real con una API
  • PROYECTO - Cotizador de Criptomonedas en Tiempo Real con ZOD y Zustand
  • PROYECTO - Buscador de Bebidas y Recetas con React Router DOM
  • PROYECTO - Agregando IA al buscador de Bebidas
  • PROYECTO - Full Stack React con PERN - Administrador de Productos y REST API
  • PROYECTO - Full Stack React con PERN - Testing con SuperTest
  • PROYECTO - Full Stack React con PERN - Documentar tus API's con Swagger
  • PROYECTO - Full Stack React con PERN - Creando el Frontend con React
  • PROYECTO - Full Stack React con PERN - Deployment
  • UpTask - Administrador de Tareas, Proyectos con MERN y React Query
  • UpTask - Administrador de Tareas - Prmeros pasos backend
  • UpTask - Administrador de Tareas - Proyectos - Modelos, rutas y Controlador
  • UpTask - Administrador de Tareas - Tareas - Modelos, rutas y Controlador
  • UpTask - Administrador de Tareas - Creando el Frontend de la aplicación
  • UpTask - Administrador de Tareas - Frontend - Creando Proyectos
  • UpTask - Administrador de Tareas - Frontend - Dashboard de Proyectos
  • UpTask - Administrador de Tareas - Frontend - Editar y Eliminar Proyectos
  • UpTask - Administrador de Tareas - Frontend - Vista de Proyecto y Tareas
  • UpTask - Administrador de Tareas - Frontend - Tareas del Proyecto
  • UpTask - Administrador de Tareas - Frontend - Editar Tareas
  • UpTask - Administrador de Tareas - Frontend - Mostrando información de tareas
  • UpTask - Administrador de Tareas - Frontend - Cambiar estado de tareas
  • UpTask - Administrador de Tareas - Backend - Comenzando con la Autenticación
  • UpTask - Administrador de Tareas - Backend - Registro de Usuarios
  • UpTask - Administrador de Tareas - Backend - Generando Token de Confirmación
  • UpTask - Administrador de Tareas - Backend - Iniciar Sesión
  • UpTask - Administrador de Tareas - Frontend - Comenzando con la Autenticación
  • UpTask - Administrador de Tareas - Reestablecer Password - Seguridad y más
  • UpTask - Administrador de Tareas - Autenticación con JWT
  • UpTask - Administrador de Tareas - Almacenando el Usuario al Proyecto
  • UpTask - Administrador de Tareas - Obtener Proyectos del Usuario Autenticado
  • UpTask - Administrador de Tareas - Creando un Hook para obtener usuario actual
  • UpTask - Administrador de Tareas - Últimos Ajustes a la autenticación
  • UpTask - Administrador de Tareas - Backend - Agregando Colaboradores
  • UpTask - Administrador de Tareas - Frontend - Agregando Colaboradores

Taught by

Juan Pablo De la torre Valdez

Reviews

4.7 rating at Udemy based on 11789 ratings

Start your review of React y TypeScript - La Guía Completa Creando +10 Proyectos

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.