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

Zeit es ahora Vercel

5/50

Lectura

Zeit es ahora Vercel

Como bien sabemos, Zeit pasó a llamarse Vercel:

Captura de Pantalla 2020-07-08 a la(s) 11.21.48.png

Link: Vercel

Y esto trajo algunos cambios.

En la próxima clase verás que el profesor realiza el deploy con Now, entonces cada vez que el profesor mencione “now.json” deberías reemplazarlo por “vercel.json”, de la misma manera, en la terminal se debería utilizar la palabra vercel.

Ante cualquier duda, aquí está la documentación de Vercel para que puedas orientarte.

De todas maneras, cualquier duda que tengas, puedes escribirla en el sistema de comentarios y con gusto te ayudaremos.

Aportes 33

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

tanto tiempo para poner 4 parrafos? enserio? ningún video?

Gracias por esta información

Muchas gracias por el aviso

Considero que este curso necesita una actualizacion por las nuevas versiones que salieron. Como por ejemplo la version 18 de react. Por otro lado el profesor es increible explicando.

Que dificultad hay en hacer un video explicando como hacerlo con los nuevos cambios?

Me parece que en el curso Next .js: Optimización y Deploy a Producción dicen como hacer y configurar esta cuenta en Vercel.

Gracias por el aviso

Genial

Con toda!

Interesante la información antes de pasar a la siguiente clase, gracias!!

😎✌

enterado!

Gracias =)

Gracias por la aclaracion

coincido con zambombas

gran aviso

👍

😃 gracias por la información

Estupendo…

Platzi, son los mejores. 💚

muchas gracias

listo

Estas actualizaciones son de bastante importancia, gracias por la información

Genial!!

Gracias!!
😃

#NuncaParesDeAprender 💚

@teamplatzi
Existirá próximamente un cusro de Deply con Vercel?
Quisiera saber si debo tomar o no el de Now 😃

Espero su Feedback ^^
A seguir aprendiendo!!! :DDD

Empezemos Vercel.json

OK

Gracias por el dato!!!

v

genial. gracias.

gracias por la info!