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

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

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 unaProyecto 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.

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Tipos de Datos en JavaScript

Vamos a comenzar nuestro curso, también en este capítulo encontrarás lo que vamos a construir

¿Qué es React?

Proyectos 01 a 04 del Curso - Fundamentos de React y TypeScript

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Cubre el stack MERN, que es popular para el desarrollo web moderno, lo que puede aumentar las oportunidades profesionales de los estudiantes

Enseña React Router DOM, la librería más popular para crear aplicaciones en React de múltiples páginas, lo que permite a los estudiantes construir aplicaciones web complejas

Integra Tailwind, un framework de CSS moderno, lo que permite a los estudiantes crear interfaces de usuario atractivas y personalizadas

Utiliza TypeScript desde el inicio en todos los proyectos, lo que ayuda a los estudiantes a aprender a escribir código más seguro y mantenible

Requiere que los estudiantes instalen Node y NPM, lo que puede ser un obstáculo para aquellos que no están familiarizados con el desarrollo de JavaScript

Enseña el stack PERN, que incluye PostgreSQL, una base de datos relacional, lo que puede ser útil para proyectos que requieren almacenamiento de datos estructurado

Reviews summary

Curso completo react y typescript

Según los estudiantes, este curso es una guía completa y práctica para aprender React y TypeScript. Destacan especialmente la gran cantidad de proyectos reales que se construyen, lo cual permite aplicar los conocimientos de inmediato. El instructor es considerado muy claro y didáctico, haciendo que temas complejos sean fáciles de entender. La inclusión de TypeScript desde el principio y la cobertura de tecnologías modernas como Next.js 14, Prisma, y stacks MERN/PERN son puntos fuertemente valorados. Aunque el curso es extenso y cubre muchos temas, la estructura y el enfoque práctico lo hacen altamente recomendable para quienes buscan dominar el desarrollo frontend y fullstack con estas tecnologías.

Se beneficia de conocimientos previos de JS.

"Aunque hay una introducción, tener bases sólidas de JavaScript ayuda mucho a seguir el ritmo."

"El curso acelera en algunos puntos si no tienes buen manejo de JS moderno."

"Recomiendo repasar JavaScript moderno antes de empezar para aprovecharlo al máximo."

Ideal para iniciar o mejorar carrera como dev.

"Siento que estoy mucho mejor preparado para entrevistas de trabajo después de este curso."

"Es una excelente base para conseguir un empleo como desarrollador frontend o fullstack."

"Me ha ayudado a dar un gran salto en mis habilidades y aplicarlas profesionalmente."

Cubre un amplio rango de tecnologías modernas.

"El curso es super completo, cubre desde fundamentos hasta Next.js 14 y MERN."

"Me sorprendió la cantidad de temas y tecnologías modernas que se abordan, muy actual."

"La inclusión de Next.js 14, Server Actions y Prisma lo hace muy relevante para el desarrollo actual."

"Cubre todos los hooks esenciales y te prepara para el desarrollo fullstack."

Enseña a usar TypeScript junto con React.

"La integración de TypeScript desde el inicio es un gran acierto y muy útil."

"Aprender React con TypeScript a la vez es muy eficiente gracias a este curso."

"Valoro mucho que use TypeScript en todos los proyectos, es esencial hoy en día."

"Me encantó cómo introduce y usa TypeScript a lo largo de todo el curso."

El instructor explica de forma clara y concisa.

"El profesor es excelente, explica de forma clara y concisa."

"Las explicaciones son muy claras y fáciles de seguir, incluso en temas complejos."

"La forma de enseñar del instructor es muy didáctica y amena."

"Excelente profesor, explica muy bien y hace que aprender sea agradable."

Enfoque fuerte en la construcción de apps reales.

"La metodología de ir haciendo proyectos reales es excelente."

"Lo mejor del curso son los proyectos prácticos que te enseñan a aplicar React y TypeScript."

"Me gustó mucho el enfoque práctico creando +10 proyectos, aprendí a usar React y TypeScript en situaciones reales."

"Los proyectos son la parte más valiosa, te permite ver cómo se construyen aplicaciones completas desde cero."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React y TypeScript - La Guía Completa Creando +10 Proyectos with these activities:

Repasar los Tipos de Datos en JavaScript

Show steps

Refrescar los conceptos básicos de los tipos de datos en JavaScript para comprender mejor cómo TypeScript los extiende y mejora.

Browse courses on JavaScript

Show steps

Revisar la documentación de MDN sobre tipos de datos en JavaScript.
Escribir ejemplos de código utilizando diferentes tipos de datos.
Practicar la conversión entre diferentes tipos de datos.

Consultar 'Programming TypeScript'

Show steps

Utilizar un libro de referencia para profundizar en los conceptos de TypeScript y resolver dudas.

View Putting Knowledge to Work on Amazon

Show steps

Identificar los temas del curso que requieren mayor profundización.
Buscar los capítulos correspondientes en el libro.
Leer los capítulos y tomar notas.

Leer 'Effective TypeScript'

Show steps

Profundizar en el conocimiento de TypeScript con un libro de referencia que complementa el curso.

View Putting Knowledge to Work on Amazon

Show steps

Seleccionar los capítulos más relevantes para el contenido del curso.
Leer los capítulos seleccionados y tomar notas.
Experimentar con los ejemplos de código del libro.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Resolver ejercicios de TypeScript en plataformas como Exercism

Show steps

Practicar la resolución de problemas de TypeScript para mejorar las habilidades de codificación y la comprensión de los tipos.

Show steps

Registrarse en una plataforma como Exercism.
Elegir ejercicios de TypeScript de diferentes niveles de dificultad.
Resolver los ejercicios y enviar las soluciones.
Revisar las soluciones de otros usuarios y aprender de ellas.

Crear un blog sobre un tema específico de React y TypeScript

Show steps

Escribir sobre un tema específico para profundizar la comprensión y compartir el conocimiento con otros.

Show steps

Elegir un tema específico relacionado con React y TypeScript.
Investigar el tema y recopilar información.
Escribir un artículo de blog claro y conciso.
Publicar el artículo en un blog personal o en una plataforma como Medium.

Convertir un proyecto JavaScript existente a TypeScript

Show steps

Practicar la conversión de código JavaScript a TypeScript para solidificar la comprensión de los tipos y la migración de código.

Show steps

Elegir un proyecto JavaScript pequeño o mediano.
Configurar TypeScript en el proyecto.
Convertir gradualmente los archivos JavaScript a TypeScript.
Resolver los errores de tipo y refactorizar el código.

Contribuir a un proyecto de código abierto de React y TypeScript

Show steps

Ganar experiencia práctica trabajando en un proyecto real y colaborando con otros desarrolladores.

Show steps

Buscar un proyecto de código abierto de React y TypeScript en GitHub.
Familiarizarse con el código base del proyecto.
Identificar un problema o una característica que se pueda mejorar.
Implementar la solución o la característica y enviar una solicitud de extracción.

Career center

Learners who complete React y TypeScript - La Guía Completa Creando +10 Proyectos will develop knowledge and skills that may be useful to these careers:

Desarrollador React

El rol de Desarrollador React se centra exclusivamente en la construcción de aplicaciones utilizando la biblioteca React. Este curso está diseñado para formar Desarrolladores React con experiencia práctica, ya que te guía a través de la construcción de más de 10 proyectos del mundo real. Con el curso, aprenderás a usar hooks, manejar el estado global con Context API y Zustand, y crear aplicaciones con múltiples páginas usando React Router. Los proyectos cubren diversos aspectos como la creación de un carrito de compras, un administrador de gastos, y una aplicación de clima, que son ejemplos típicos de lo que hace un Desarrollador React. La utilización de TypeScript desde el inicio del curso también te brinda una ventaja competitiva al aprender buenas prácticas de programación.

See salaries and explore the career path for Desarrollador React

Desarrollador Frontend

Un Desarrollador Frontend se especializa en construir la interfaz de usuario de una página web o aplicación. Este curso es ideal para cualquiera que aspire a ser Desarrollador Frontend, pues proporciona una base solida en React, una de las bibliotecas más populares para construir interfaces. El curso te enseña a crear componentes, manejar el estado con hooks como useState y useEffect, y cómo interactuar con las API. Aprenderás acerca de la creación de interfaces dinámicas y responsivas, y cómo manejar formularios y eventos. Este conocimiento es fundamental para cualquier Desarrollador Frontend. Los proyectos prácticos del curso, como el carrito de compras y la aplicación del clima, te brindarán experiencia real en el manejo de proyectos.

See salaries and explore the career path for Desarrollador Frontend

Desarrollador Full Stack

Un Desarrollador Full Stack puede construir tanto la interfaz de usuario como el backend de una aplicación. El curso es muy relevante para el Desarrollador Full Stack, puesto que abarca todo el ecosistema de React, con proyectos full stack que utilizan PERN y MERN. Aprenderás a crear API's, a conectar el frontend con el backend, y a utilizar bases de datos. Los proyectos avanzados del curso como el administrador de tareas y proyectos, con autenticación y roles de usuario, ofrecen una experiencia completa del trabajo de un Desarrollador Full Stack. Además, se incluye la introducción a Next.js, lo que te permite construir aplicaciones con renderizado del lado del servidor, una característica vital para un Desarrollador Full Stack moderno.

See salaries and explore the career path for Desarrollador Full Stack

Desarrollador de Aplicaciones Web

El Desarrollador de Aplicaciones Web es quien construye las aplicaciones que usamos a diario en el navegador. Este curso te proporcionará una sólida base en el desarrollo de aplicaciones web modernas utilizando React, TypeScript, y otras herramientas. Aprenderás a manejar el estado, a consumir APIs, y a construir interfaces interactivas. El curso te guía desde los fundamentos hasta la creación de aplicaciones full stack, lo que es esencial para el Desarrollador de Aplicaciones Web. Los proyectos que construyes, desde el carrito de compras hasta el administrador de tareas, te darán la experiencia de la resolución de problemas típicos en el desarrollo de aplicaciones web.

See salaries and explore the career path for Desarrollador de Aplicaciones Web

Ingeniero de Software

Un Ingeniero de Software diseña, desarrolla y mantiene sistemas y aplicaciones de software, por tal motivo, este curso es una excelente opción. El aprendizaje de React y TypeScript, junto con la experiencia en proyectos del mundo real, te convertirán en un candidato altamente competitivo. Un Ingeniero de Software debe tener un entendimiento profundo de la arquitectura de software, y este curso te proporciona los conocimientos necesarios para construir aplicaciones escalables y mantenibles. La familiarización con hooks, manejo de estados, y el uso de API, te ayudarán a construir aplicaciones de software complejas. Los proyectos full stack, incluyendo el uso de PERN y MERN, y la introducción a Next.js, te brindarán una base sólida para cualquier proyecto que pueda afrontar un Ingeniero de Software.

See salaries and explore the career path for Ingeniero de Software

Líder técnico

Un Líder Técnico es responsable de guiar a un equipo de desarrollo. Este curso te ayudará a consolidar tu rol de Líder Técnico, gracias a tu dominio de las tecnologías de desarrollo web más recientes. El curso te familiarizará con React, TypeScript, hooks, y el manejo de estados, entre otros aspectos. Los proyectos prácticos, desde un carrito de compras hasta un administrador de tareas, te permitirán entender las dificultades del desarrollo y cómo superarlas. Aprenderás a construir aplicaciones full stack con PERN y MERN, lo que te dará la confianza necesaria para liderar proyectos. Además, la introducción a Next.js te ayudará a conocer las nuevas tendencias en el desarrollo web moderno.

See salaries and explore the career path for Líder técnico

Arquitecto de software

El Arquitecto de Software diseña la estructura de los sistemas de software. Este curso te dará una amplia experiencia práctica en la creación de aplicaciones React con TypeScript, lo que sirve como una base esencial para cualquier Arquitecto de Software. El curso te permitirá comprender a fondo el ecosistema de React, incluyendo el manejo de estados, la creación de componentes, y la interacción con APIs. Los proyectos full stack te darán la experiencia necesaria para comprender cómo se conectan las diferentes partes de una aplicación y cómo se escalan. La introducción a tecnologías como Next.js te presentará a los patrones de diseño de aplicaciones modernas, un aspecto importante para el trabajo de un Arquitecto de Software. Un Arquitecto de Software que desee especializarse en tecnologías web debería considerar este curso.

See salaries and explore the career path for Arquitecto de software

Especialista en Interfaz de Usuario

Un Especialista en Interfaz de Usuario se enfoca en la creación de interfaces atractivas, funcionales y fáciles de usar. Este curso es ideal para un Especialista en Interfaz de Usuario porque aprenderás a crear componentes reutilizables, manejar el estado con hooks, e interactuar con APIs. El curso te da conocimiento de cómo construir la interfaz de usuario, lo que es fundamental para un especialista en esta área. Los proyectos prácticos del curso, como el carrito de compras y el administrador de gastos, proporcionan experiencia directa en la creación de interfaces de usuario funcionales. El uso de Tailwind en el curso también le enseñará a crear interfaces de usuario con un enfoque en diseño.

See salaries and explore the career path for Especialista en Interfaz de Usuario

Consultor de Software

El Consultor de Software asesora a las empresas sobre cómo mejorar sus operaciones mediante el uso de la tecnología. El curso te servirá para construir una base sólida en tecnologías de desarrollo web muy actuales. A través de este curso obtendrás experiencia práctica con React, que es esencial para comprender las capacidades y limitaciones de las herramientas de desarrollo. Al dominar el ecosistema de React y TypeScript, aprenderás a construir aplicaciones y a entender mejor las necesidades de tus clientes. La variedad de proyectos prácticos, desde un carrito de compras hasta una aplicación de administración de tareas, mostrará tu versatilidad. Como Consultor de Software, podrás recomendar soluciones basadas en el conocimiento que obtengas de este curso.

See salaries and explore the career path for Consultor de Software

Instructor de Programación

El Instructor de Programación tiene la vocación de enseñar a otros. Este curso te dará un dominio completo de React y TypeScript. Un Instructor de Programación debe tener un conocimiento profundo de los aspectos técnicos, y este curso te proporcionará los conocimientos necesarios para enseñar de manera efectiva. La experiencia que obtengas en los proyectos prácticos te dará información valiosa sobre los problemas comunes que encuentras al programar, lo que es esencial para un Instructor de Programación. La variedad de temas cubiertos, desde los hooks hasta la creación de aplicaciones full stack con Next.js, te permitirá enseñar una variedad de temas de desarrollo web.

See salaries and explore the career path for Instructor de Programación

Ingeniero de Software en la Nube

Un Ingeniero de Software en la Nube se especializa en construir y mantener aplicaciones que residen en la nube. Este curso es una opción interesante para un Ingeniero de Software en la Nube porque te enseñará a construir aplicaciones web full stack, que son la base de muchos servicios basados en la nube. Aprenderás a conectar el frontend con el backend, a utilizar bases de datos, y a crear API's con Node.js y Express. Los proyectos del curso, como el administrador de tareas y proyectos, te darán la experiencia en la resolución de problemas que encontrarás en el diseño de aplicaciones para la nube. La introducción a Next.js es útil porque se usa en la creación de aplicaciones en la nube.

See salaries and explore the career path for Ingeniero de Software en la Nube

Desarrollador de Aplicaciones Móviles

Un Desarrollador de Aplicaciones Móviles crea aplicaciones que se ejecutan en teléfonos y tabletas. Si bien este curso se centra en React para aplicaciones web, los conceptos y técnicas que aprendas serán muy útiles para un Desarrollador de Aplicaciones Móviles. La lógica de programación, el manejo del estado, y la interacción con APIs son habilidades que te servirán para el desarrollo móvil. Aprender a construir aplicaciones con React y TypeScript te dará una base sólida para luego aprender tecnologías de desarrollo móviles como React Native. Aunque React Native no está explicitamente cubierto, los fundamentos aprendidos en este curso harán que la transición sea más fácil para un Desarrollador de Aplicaciones Móviles.

See salaries and explore the career path for Desarrollador de Aplicaciones Móviles

Analista de Datos

Un Analista de Datos se dedica a interpretar datos para tomar mejores decisiones. Este curso te servirá al brindarte conocimientos prácticos sobre cómo crear aplicaciones web interactivas. El curso te mostrará cómo hacer aplicaciones con manejo de estados, lo cual puede ser muy útil para la visualización de datos. Aunque un Analista de Datos no se centra en el desarrollo web, las habilidades de programación y la lógica que adquieras en este curso pueden ser valiosas. La experiencia de trabajar con formularios, APIs, y la validación de datos también te puede servir para el manejo de datos en un contexto de análisis.

See salaries and explore the career path for Analista de Datos

Diseñador Web

Un Diseñador Web se encarga de la apariencia y usabilidad de un sitio web. Este curso es importante para un Diseñador Web que quiera entender cómo funcionan las páginas web modernas. Aprenderás a usar React y TypeScript, lo que te permitirá comprender la lógica detrás de las interfaces interactivas. Al tener conocimientos sobre el desarrollo frontend, estarás mejor equipado para colaborar con los Desarrolladores Frontend. Los temas que se ven en este curso, como el manejo del estado y el uso de hooks, te permitirán entender cómo implementan los desarrolladores tu diseño. La experiencia con Tailwind también te dará una mejor comprensión del diseño basado en clases.

See salaries and explore the career path for Diseñador Web

Especialista en marketing digital

Un Especialista en Marketing Digital se dedica a promocionar productos o servicios mediante plataformas digitales. Si bien este curso no es directamente un requisito para un Especialista en Marketing Digital, puede ser beneficioso tener una comprensión básica de cómo funcionan las aplicaciones web. El curso te permitirá entender mejor las limitaciones y oportunidades de las tecnologías web. Al tener conocimientos sobre React, TypeScript, y el uso de APIs, estarás mejor posicionado para comprender las necesidades del equipo de desarrollo y comunicarte con ellos de manera eficaz. Además, tu conocimiento sobre el funcionamiento de las aplicaciones web puede ser útil para comprender los datos de los usuarios.

See salaries and explore the career path for Especialista en marketing digital

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

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Curso completo react y typescript

Activities

Career center

Reading list

Share

Similar courses