Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

¡Felicidades!

50/50
Recursos

¡Felicitaciones por terminar el Curso de React Avanzado

Hemos aprendido a cómo usar los Hooks de useState() y useEffect(), cómo crear nuestros propios Hooks, manejar los HoC (High Order Components), implementar Reach Router, agregar estilos con styled-components y mucho más.

Sabemos que ha sido un largo camino, pero estamos seguros de que valió la pena y ¡nunca pares de aprender!.

Aportes 65

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

  • Valió la pena?
  • Valió cada maldito segundo!

Hola,comparto la app finalizada:
https://petgram-platzi.now.sh/
NOTA:
Me he percatado que el server tiene algunos detalles,algunos de estos son:
Despues crear un usuario algunas veces cuanto intento recuperar la data me dice graphql que no existe.
Algunas veces puedes registrarte o iniciar sesion sin pasar email y password

Excelente curso, dejo mis resultados 😃
https://petgram.malejandro13.now.sh/

EL mejor curso que vi en Platzi 😃

Este profesor vale oro. Muchísimas gracias por este curso largo, increíble y ameno. Lo amé igual que el de Sparragus.

Muchos se quejan de que el curso esta desactualizado, pero aun así sigue siendo un muy buen curso, ademas al buscar la documentación y los aportes de la comunidad se convirtio en todo un reto este curso.

Hola fue un curso muy genial!!! Aunque creo que ya necesita ser actualizado, muchas cosas se usan diferentes!!

Comparto mi resultado!!
https://petgram-yadu-yadurani.vercel.app/

de los mejores cursos de platzi

Muy buen curso! Buenísimo el profesor, además de explicar todo claramente, va escribiendo a la par la funcionalidad. Los temas son muy interesantes, deberían plantear un curso avanzado de PWA con el mismo profesor! 😄

Excelente curso, y para los que venimos de haber visto el primer curso de React del 2017 con Leonidas Esteban, ha sido un cambio ENORME de React, ¿Se percataron que en ningún momento usamos la palabra ‘class’??.

Creo que React ha evolucionado para mejor, aunque ciertamente los cambios han sido considerables, pero para bien.

Muchas gracias Midudev!! sorpréndenos próximamente con algún otro curso!!

Muy bueno el curso aqui dejo mis apuntes de todo el curso por si les interesa repasar temas:

apuntes
proyecto del curso

https://github.com/willydavid1/react-avanzado/blob/master/apuntes.txt
https://petgram-avanzado-react.vercel.app/

Lo terminé👏🏼 un curso muy retador! Les comparto mi app desplegada https://petslover-verosilva.vercel.app/ y mi repo https://github.com/VeroSilva/Petslover

Muchas gracias @midudev por este curso! 😄🔝
Me ha encantado porque he aprendido mucho con él, no sólo React sino también a tener una visión más global de lo que es una app, SEO, hacer test, etc. Además me he divertido mucho haciendo este proyecto!!

Cómo han dicho otros compañeros espero que hagas más cursos!! 👏🏻👏🏻
 
Les comparto el resultado de mi app

Es un gran curso, se nota el gran dominio del profesor (siganlo en youtube como midudev, tiene un gran contenido ), me costo mucho culminar el proyecto por la antigüedad del mismo , pero lo logre con la ayuda de los comentarios:

Pueden ver el proyecto aquí:

Me encanto el curso, a pesar de estar algo desactualizado

A pesar de ser desactualizado, este y el Curso de React Hooks son los mejores para mí de la Carrera de Frontend con React. Me enseñaron mucho

Tuve bastantes trabas, problemas con compatibilidad, etc. Pero logré terminar este maravilloso curso
Muy completo y complejo, pero gratificante
Comparto mi app

¡Necesitamos más cursos con @midudev, me ha encantado la manera en la que enseña y su dominio del tema! 🤯

Excelente curso!!!
Ha sido muy completo!

El mejor curso que he tomado hasta hoy 😱, este curso me ha enriquecido bastante 🧗‍♂️, deberían considerar hacer más cursos con este profesor, por si llegan a renovar el curso de GraphQL estaría padre que lo hicieran con esté profesor, 😃

De mis cursos favoritos en Platzi, felicidades y muchas gracias a midudev por brindarnos tantos conocimientos, fue bastante entretenido ver cada herramienta nueva que no habia usado antes(graphql, cypress, reach/router), espero que haga mas cursos aquí y por último dejo mi app

Que buen curso… valdrá la pena verlo de nuevo !!!

Muchas gracias @midudev !!! Excelente curso! Valio la pena cada clase! Saludos desde Argentina!

Excelente curso, muy practico y fácil de entender. Espero seguir viendo muchos más cursos tuyos en platzi.
A todos los estudiantes de platzi, recomiendo seguir a midu en su tw, canal de youtube, postcast WTFront!, su pagina midu.dev que siempre esta aportando su conocimiento.

Aunque falto agregar pruebas unitarias con react testing library jajajaja

Alguien tiene alguna información sobre como integrar React a un sitio web desarrollado en otra tecnología? configuración de webpack + babel para react en sitio web ya existente… ya que a veces no nos toca desarrollar react desde cero sino incorporarlo solo en una parte de tu aplicación ya existente.

Esta configuración es muy básica https://es.reactjs.org/docs/add-react-to-a-website.html

Wow! Excelente curso y excelente profesor. Díficil elegir entre @midudev y @sparragus. Gracias por compartir con nosotros todo lo que saben 💚 He aprendido muchísimo.

Excelente curso. De los mejores cursos sino el mejor que he hecho en Platzi. Muchas gracias @midudev. Felicitaciones

El mejor curso hasta ahora. Buen profesor.

Que curso tan Waooo

Sin duda alguna , el mejor curso que he tomado hasta ahora, excelente en todos los aspectos, curso que supera tus expectativa, ademas la manera de enseñar de midudev es genial y los bonus hacen que sea un curso muy completo.

Excelente, muchas gracias tocayo Migue por el curso, genial!!!

Muy bueno el curso, bien explicado. Les dejo mi petgram hice algunas mejoras en el diseño y funcionalidad. Si alguien le gusta o le ayuda le dejan una estrellita : )

Repositorio Github

El profesor explica muy bien, pero este curso esta muy desactualizado, me pase más horas investigando y tratando de resolver las clases que lo que veía en el curso.

Hola camaradas 😄
Espero llegaran todos hasta aqui, un viaje largo y no facil, pero sumamente valioso y gratificante. Gracias a los comentarios, fueron como farolas en los momentos oscuros del viaje. Espero mis aportes lo hayan sido tambien.
Muchos exitos en su aprendizaje y proyectos, hasta la victoria!

en 2022, después de 3 años desde que salió este curso y que muchas de las herramientas utilizadas tienen nuevas versiones, este sigue siendo unos de los mejores cursos de React de toda la plataforma, gracias Midudev.

Excelente curso, Espero que este curso se pueda actualizar muy pronto

App

Lo hice en Netlify 😅 no supe como hacerlo en vercel y me causo desesperacion xd, ya en una siguiente oportunidad espero tenerle carino

Les comparto mi proyecto finalizado con muchas más mejoras

Este ha sido el mejor curso de desarrollo que he tomado a la fecha en esta plataforma.

Excelente curso!!!

El mejor curso de react!!

Vigente a dia de hoy 08/2021, wow que viaje, me tomo muchas noches sin dormir por actualizar ciertas librerias jajaja 😄, pero valio la pena.
#NuncaParesDeAprender
URL: https://petgram-paolo.vercel.app/

https://platzi.com/r/christianfer/
Obtén 1 mes gratis adicional con la compra de tu suscripción con mi link. Así además, me ayudas a obtener también 1 mes gratis, así podemos aprender los 2!
Agradecería mucho tu ayuda, ya que la situación en Venezuela no me da muchas posibilidades.

Hasta el momento es el mejor curso de React que hay en Platzi 💙💙💙💙💙 además por este curso lo empecé a seguir en redes sociales y Twitch y es un desarrollador/profesor genial 💙

Un curso demasiado completo, la actitud del profesor es genial y valió la pena cada clase 💙💙💙💙💙

Excelente curso, de los mejores y más completos que he tenido!!!

Buenísimo el curso! Hacía falta uno avanzado .

Esto es lo mejor que he visto. Que gran curso, felicidades!!!

Tremendo curso! He llegado hasta aquí aprendiendo un montón realizando este divertido projecto, cumplió y superó todas mis expectativas, mis felicitaciones a Miguel y al equipo de Platzi por este gran curso, gracias totales!! 👏👏👏

Sin duda uno de los cursos mas completos y repasables que he tomado, recalculando ruta… 😄!!!

Sin duda alguna uno de los mejores cursos de Platzi, valió la pena cada segundo, sin duda alguna voy repetir el curso para repasar cada detalle. Gracias Miguel. 👏👍

Gracias @midudev, reforcé mis conocimientos ampliamente. Actualizaré un proyecto que tengo a hooks. Saludos.

Gracias por todo midudev, excelente curso, he quedado encantado con todo el ánimo que has enseñado.
Ya me he suscrito a youtube 😃
Gracias gracias
Espero seguir creciendo…

Muy bueno! gracias por todo amigo has sido muy claro en todo y gracias por tomarte el tiempo de editar los vídeos y entregarnos un buen curso.

Hola,
Les comparto mi app!
Solo un favor, hice una limpieza de navegadores con CleanMyMac y se borro algunas cosas del navegador, como cookies, autofills etc.
Pero no sabia que se borraba el código de graphql… porfa alguien que me pueda pasar una url para copiar el código a mi graphql? please!

Excelente curso!

Me ha super encantado el curso, ya tengo ganas de nominar este curso al curso del año, se lo merece.

Excelente curso de verdad, merecido el nombre de avanzado! Me gustaría volver a tomar otro curso con este profesor!

Que gran curso!!, desde el incio hasta el final. ORO puro!, gracias midudev!, te seguire viendo en tu canal 😄

Super contento con el curso, mcuhas gracias.

De casualidad alguien tiene el repositorio del proyecto?

excelente curso!!!

Buenísimo el curso, eres el mejor

Excelente curso, le agarré amor a react definitivamente

😊Super Curso!!
Amé la profundidad y el cariño con que tratas todo el temario.
Haces fácil lo difícil y por eso aprendí un montón.
Aquí mi repo 👈

k

Muchas gracias!!

Excelente curso!