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

Proyecto y tecnologías que usaremos

2/50
Recursos
Transcripción

En este curso realizaremos una aplicación muy parecida a Instagram, llamada petgram. Tendremos nuestras rutas, gestión de usuarios y likes.

Utilizaremos como empaquetador y transpilador:

Estilado con CSS en JS con:

Como linter utilizaremos:

Para fetching (obtención) de datos:

Para el enrutado de la SPA utilizaremos:

Para las buenas prácticas utilizaremos:

Por último haremos SEO, PWA y Deploy con:

Aportes 49

Preguntas 6

Ordenar por:

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

Este curso es brutal!

Wooow! Precisamente ayer termine de ver una pequeña serie de de videos acerca de graphQL y apollo de Miguel en youtube los cuales pueden ser una excelente introducción.

Click aqui para ver los videos 🚀

Tecnologías a utilizar:

Este curso se ve robusto. Vamos a por todo!!

Que buen profesor💚

Desde diciembre de 2020, Now se encuentra deprecado y ahora se llama Vercel. Sigue siendo gratuito para proyectos personales. Mucha más info aquí: https://vercel.com/

style-components utiliza sass?

Mi gente bella de Platzi, ya hay un curso disponible sobre despliegue de aplicaciones. Este que nos muestran de Now ya no existe, ahora se llama Vercel y lo tocan en el curso, por si lo quieren ir a ver
Curso: https://platzi.com/clases/despliegue-apps/

Una pregunta, por que no usar eslint en lugar de Standard JS?

Ahora sí, espero que después de escuela de javascript ya estar listo para este curso, estoy emocionadamente con miedo.

Dios!! Completísimo, actualizadísimo e interensantísimo, mas profesor motivadísimo. Me mola cuando un curso es tan vanguardista!! Focus mode on.

Proyecto y tecnologías que usaremos
Utilizaremos como empaquetador y transpilador:
• Webpack (Empaquetador)
• Babel (Transpilador)
Estilado con CSS en JS con:
• styled-components (Librería que nos va a permitir olvidarnos de las clases, nos va a generar hashes únicos para cada estilo en nuestros elementos)
Como linter utilizaremos:
• Standard JS (Linder que nos da unas reglas preestablecidas para asegurar la calidad del proyecto)
Para fetching (obtención) de datos:
• GraphQL (Lenguaje de consulta para API y un tiempo de ejecución para completar esas consultas con sus datos existentes. Proporciona una descripción completa y comprensible de los datos en su API, brinda a los clientes el poder de pedir exactamente lo que necesitan y nada más, facilita la evolución de las API a lo largo del tiempo y habilita poderosas herramientas para desarrolladores)
• React Apollo (Es un stack completo para JS compuesto por herramientas para crear un servidor de GraphQL (graphql-tool), un servidor standalone (graphql-server), y un cliente compatible con todos los frameworks de frontend (apollo-client))
Para el enrutado de la SPA utilizaremos:
• Reach Router (Es una versión simplificada y mejor optimizada de React Router, su creador es Ryan Florence el mismo creador de React Router. API)
Para las buenas prácticas utilizaremos:
• Lighthouse (Es una herramienta automatizada de código abierto diseñada para mejorar la calidad de tus apps web. Se tiene una auditoria de la performance como de progresive webpack)
• Cypress (Es esa herramienta o framework, que nos permite simular esa interacción de los usuarios con el browser. Para hacer el testing de nuestra aplicación End To End. Las pruebas punta a punta o End To End, son vitales para la construcción de aplicaciones Web modernas de calidad. Nos permite disponer de un set de pruebas incremental de manera ágil y robusta. Permiten integrarse en un ciclo de integración continua para implementar pruebas automáticas).
Por último haremos SEO, PWA y Deploy con:
• React Helmet (Podemos añadir SEO. Componente de la NFL que nos permite ir cambiando el title y otros metas del head dentro de nuestros componentes del react).
• Workbox (Es una librería creada por Google que simplifica de forma notable la escritura de service workers mediante una API potente y sencilla)
• Progressive Web App (Son páginas web que se comportan como aplicaciones nativas. Está destinado a funcionar en cualquier plataforma que use un navegador compatible con los estándares. La funcionalidad incluye trabajar sin conexión, notificaciones push y acceso al hardware del dispositivo, lo que permite crear experiencias de usuario similares a las aplicaciones nativas en dispositivos móviles y de escritorio. Permite difundir contenido sobre cualquier dispositivo: móvil, tablet, desktop.)
• Deply con Now (Now es un producto de Zeit, que te permite hacer deploy con solo hacer push de tu código. Deploy es el proceso que se requiere para que el código se traslade a un entorno de acceso público donde se espera quede accesible para el usuario. Si estás trabajando en un sitio web, hacer deploy significa generar todos los archivos minificados, transpilar el JavaScript, correr las pruebas, agregar el tag de la versión y subir los archivos al servidor que previamente configuraste e instalaste, o a un contenedor en la nube que orquestaste. El punto final del sitio web es ese espacio para dejarlo en producción, es decir, listo para ser usado por el cliente.)

Esto se pone muy bueno…

¿Usamos Reach Router para que conozcamos otra opcion ademas React Router o porque la consideran mejor? @midudev

Pero que buen curso se ve este. Espero que no esté desactualizado porque veo comentarios de hace 2 años.

Madre, y yo pensaba que configurar react con webpack era lo máximo jajajajaja

Now = Vercel

Reach Router excelente, algo que quería aprender.

Vaya, este curso es la hostia!!

No he estudiado platzi desde hace un mes (Estuve trabajando) y ya hay como 20000 cosas nuevas por aprender.

Pienso que es unos de los videos con el indice mas completo que he visto aca en platzi, con el entusiasmo de Leonidas jeje.

Uffff, se escucha bestial 🚀…

Este curso es ORO

Me sono a publicidad, esta increible jaja

Que completo va a estar, un reto seguramente, pero uno que vale la pena tomar 😃

Genial

Las tecnologias usadads en este curso son muy interesantes.

Grande Miiduuu!

promete este curso

Excelente curso de React

Wowwww está introducción de lo que veremos en el curso es lo más motivador que había visto!! ME ENCANTAAAAAA

Midudev que edad tienes ? 😮

Suscrito a tu canal Miguel
Cualquier divulgador de desarrollo es bienvenido

Increíble la cantidad de tecnologías que usare en el curso, muy emocionado 😃

buena app

Iniciando el curso!

Wooooooow me emocione e n la presentacion del curso y el docente pero esto se ve de otro nivelll !!

vamos a por todooooooo !

🤯🤯🤯🤯

Es increible todo lo que hay que aprender! Me encanta

Que buena aptitud del Instructor 🤟🤟🤟🤟

Me encanta el entusiasmo con que transmite este chaval sus conocimientos. Menudo crack que es.

Excelente!!!

Se nota que este curso está muy bien planificado

zarpado el curso!

Brutal, espero encontrar alternativas al desarrollo con estas herramientas

j

¡Esto pinta Genial!

Muy bueno. Gracias!!

Holy… que hype que me generó 🤯
Vamos a hacer algunos de los cursos que recomienda primero 🎉