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!

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

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

1/50
Recursos
Transcripción

¡Te damos la bienvenida al Curso Avanzado de React!

En este curso nuestro profesor Miguel Ángel Durán García, Lead Frontend Architect en Adevinta Spain trabajando desde hace cinco años con React, nos dará una vista más profunda de cómo usar React con Hooks, propTypes y mucho más. Recuerda que React es una biblioteca de vistas creada por Facebook no solo para la web, también podemos hacer vistas nativas para el móvil, aplicaciones de terminal e incluso realidad virtual. React es basado en componentes y declarativo.

¿Por qué debes seguir profundizando en tus conocimientos de React?

  1. Actualmente es la tecnología más demandada del mercado.
  2. Divide el código utilizando React.lazy.
  3. Render props.
  4. Hooks personalizados.
  5. Comparte la lógica con componentes de orden superior.

Recuerda que cualquier duda puedes usar nuestro sistema de discusiones. ¡Nunca pares de aprender!

Aportes 80

Preguntas 3

Ordenar por:

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

Espere el curso mas que la ultima temporada de Games of Thrones!

Qué es React

Es un sistema de plantillas para gestionar las vistas que utiliza un lenguaje de marcado llamado JSX, similar a HTML
.
Características básicas de react
.

  • Está basado en componentes: Toda la UI se divide en elementos más pequeños llamados componentes, en react, todo es un componente,
  • Es declarativo: expresa la lógica de un cálculo sin describir su flujo de control, es un estilo de programación en el que el que se define “qué” es la solución sin importar cómo se llegó a ella.

Esperaba este curso más que Avengers!!. Comencemos!!!🥳

Yo ya habia tomado un curso en otra plataforma de este maestro, y para mi simplemente es del que mas le he aprendido en menos tiempo. sus cursos son como libros de consulta que siempre me quitan las dudas 😄

No tomaré el curso aun, primero recorreré toda la ruta. pero estoy emocionado de que pronto llegaré a este que es el ultimo curso de la ruta de Front React.

Yo sigo a Miguel Ángel en su canal de Youtube y Twitter (midudev) lo recomiendo como profesor a ojos cerrados. Sé que todos vamos a aprender mucho de él. A darle con todo!

porfin! a ponerle ganas 😃

Que cómico hace poco estaba en el proceso de selección de Adevinta Barcelona desde Venezuela y pase varios de sus filtros pero falle en la prueba técnica por mi uso de SASS y por no usar JsDoc a pesar de que les gusto mi forma de atajar el problema y ahora me consigo aquí con que el profesor es uno de sus desarrolladores.

Por Fin!!! la espera termino espero aprender mucho de este curso.

A aprender más React!

Excelente curso, apenas termine el curso de react js básico inicio con este 😄

Lo más esperado, gracias 😊😊

Dale Midudev, lo sigo de hace un rato en YouTube, que bueno encontrarlo por aca

Platzi day ❤️ me permite tomar un curso avanzado de react, os adoro ❤️

A darle!

Espero mucho de este curso, más por el tema de que ya vi los hooks y context, espero entender un poco más

👌

Muy interesante, me gusto la explicación de componentes en react, me quedo mas claro. Gracias!!

Genial, estaba esperando este curso con muchas ansias

Vamos a ello!

BUENO, ESPEROS QUE CUMPLA CON LAS EXPECTATIVAS…

El curso Profesional de Desarrollo Web hace rato dejó de tener ese nombre. Creo que mucho antes de grabar este curso.

Aqui estoy xD

React ⚛️

Curso Esperado!

Excelente 😎💪🏼

yo queria ser el primero comentario jajaja

Muy buena presentación!

Preparado para iniciar! 💪 Gracias Miguel por compartirnos tus conocimientos!

Genial Miguel es muy bueno con el aprendei webComponents

suena bastante bien el curso

A profundizar 🚀…

Geniaaal me acabo de enterar de que midu tiene curso en Platzi ! un tipazo, desde ya se sabe que este curso será Premium 😄

me dieron ganas de cenar shushi

Midu que bueno encontrarte aquí te sigo mucho por Twich y Youtube

midu enseñaba en Platzi tbn, que genial 😄

jaja que interesante!, vi la miniatura de este curso y dije ese profe se parece a Midudev pero luego dije pero se llama Miguel… no creo que su apellido empiece con Du… y pues si xD, sigo a este profe en yt y explica muy bien, así que será motivo!

Genial

Se ve interesante el curso.

Grande Midudev

Buen ejemplo el del Sushi jaja

Hola, les dejo mi repositorio, en el que hago el proyecto de este curso en Nextjs:

https://github.com/danyel117/petgram-platzi

me dieron ganas de crnar SHUSHI

Sólo es la introducción y ya estoy totalmente enganchada!! Me motivó mucho la actitud del prof

Este curso es una joyita, Grande crack Midudev!!!

Muchas gracias por este curso!,
Estoy emocionado por seguir aprendiendo React

React es lo máximo!

a por un nuevo curso :3

vamos con toda!

¡Qué emoción!

La forma mas optimas para hacer pruebas de estres a la aplicación? manejar los logs en deploy?

existen balanceadores de perfomance en react?

Me siento en un curso de Video2Brain. 🌞

Que delicia !! tenia muchas ansias de arrancar con este cursoo !!!

Mi primer curso de platzi. Aqui vamos !

Se ve prometedor.

vamos!!

Vamos!!!
Mira ese potencia.jpg

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

Midudev, que tal verías la opción de mejor usar webcomponents (hechos con litElement, stencil…) para hacer un catálogo de componentes reutilizables y usarlos en proyectos de diferentes clientes que quieran la app con distintas tecnologías, ya sea vue, angular etc… ?
Por cierto, gran curso!

go go go go!!!

pfff ya quiero iniciarlo

¡Qué gran actitud la del profe, motiva mucho!

a no parar de aprender!

A por un nuevo curso, a darle 🔥

A por React Avanzado!!!
Adentro!

y empezamos !!

¡Allá vamos!

Primer curso de Platzi!, vamos con todo!

¿Por qué debes seguir profundizando en tus conocimientos de React?

Actualmente es la tecnología más demandada del mercado.
Divide el código utilizando React.lazy.
Render props.
Hooks personalizados.
Comparte la lógica con componentes de orden superior.

🤐🤐🤐

Si que le pone emoción!

Empezamos muy bien. Ya quería profundizar en React, pero con la explicación tan buena de este señor ahora tengo el doble de ganas jaja

Arrancando. Gracias!

como se llama el color theme de vscode que utiliza el profesor?

React
es Declarativo
Basado en Componentes
No es imperativo
Comparte Logica con componenetes de ORDEN SUPERIOR HOC

Wow, Iniciando curso!!!

m

Cada dia Platzi me encata mas!

Dejo los enlaces a los cursos recomendados como prerequisitos.

Curso de Introducción a la Terminal y Línea de Comandos
https://platzi.com/clases/terminal/

Curso Profesional de Git y Github
https://platzi.com/clases/git-github/

Curso de React.js
https://platzi.com/clases/react/