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

Uso de polyfill de Intersection Observer e imports dinámicos

18/50
Recursos

En esta clase añadiremos soporte a navegadores viejos con un polyfill de Intersection Observer.

Aportes 32

Preguntas 8

Ordenar por:

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

Probablemente ustedes no tenga errores al ejecutar el dynamic import sin instalar la dependecia @babel/plugin-syntax-dynamic-import y es que el 4 de Julio de 2019 en la versión 7.5.0 de babel esta característica se añadió al paquete @babel/preset-env justo como sale en esta nota de release en el repo oficial babel en github.
 

Release 7.5.0 · babel/babel

me parece que el curso está teniendo un contenido muy bueno, el único problema es el tema del campo de visión del código. tener la consola y el lateral abiertos todo el rato dificulta un poco la legibilidad.

Para los que tienen un poco de duda sobre cómo se conecta el hook con el article…

  1. Primero debemos entender que en el ListOfPhotoCard/index.js, estámos mapeando el array, es decir que estamos haciendo print 9 veces (o las que tengas en el array) del componente <PhotoCard/>

  2. En PhotoCard estamos iniciando la const element utilizando useRef(null).

  3. Con la prop ref estamos tomando el elemento del DOM y le estamos pasando element, por ende este no va a ser null sino será el elemento article.

  4. En el useEffect estamos devolviendo una promesa la cual encadena el IntersectionObserver… Y a su vez estará observendo el element del punto #2 (es decir: estará observando el article).

Si aún tienes duda, quitale la prop ref al article (o cambiale el nombre) e intenta compilar…

Actualmente, en Junio 2020, ya el import dinámico está integrado a JS, no hace falta descargar los plugins.

Otra manera de preguntar por una key en un objeto puede ser:

'IntersectionObserver' in window

Eso te devolverá un boolean.

paquetes a instalar

npm i intersection-observer
npm i @babel/plugin-syntax-dynamic-import -D
npm i babel-eslint -D

No tuve necesitad de instalar @babel/plugin-syntax-dynamic-import , simplemente funcionó.

Si queremos crear un Hook personalizado y reutilizable, el codigo queda mas o menos asi:

import React, { useState, useRef, useEffect } from 'react'

export function useNearScreen() {
  const [show, setShow] = useState(false)
  
  const $element = useRef(null)
  
  useEffect(() => {
    Promise.resolve(
      typeof window.IntersectionObserver !== 'undefined' 
        ? window.IntersectionObserver
        : import('intersection-observer')
    )
      .then(() => {
        const observer = new window.IntersectionObserver(entries => {
          const { isIntersecting } = entries[0]
          if (isIntersecting) {
            setShow(true)
            observer.disconnect()
          }
        })
      
        observer.observe($element.current)
      })
  }, [$element])

  return { $element, show }
}

Y lo podemos utilizar de la siguiente manera

  const { $element, show } = useNearScreen()

  <Article ref={$element}>
          { show ? 'Hello world' : null }
  </Article>

Yo utilicé Async - Await en vez de Promises, así quedó mi código:
.

Se podria hacer con un assyc await en ves de una promesa con su .then

Recientemente salió ECMA 2020 y ya se pueden usar imports dinámicos tranquilamente de manera natural, sin necesidad de nada extra.

muy buena clase, el profesor explica muy rapido. Una maginifica solucion es el bajar la velocidad del video.

Link descargas de paquetes en la terminal de vsc.

npm install @babel/plugin-syntax-dynamic-import --save-dev

Qué horror 😦

Excelente curso, muy buena manera de explicar y sin dejar cabos sueltos jajaj buena la del linter!

Al dia de hoy no hace falta instalar el plugin, ya babel lo incluye.

Hola, les dejo el avance de mi repositorio hasta acá hecho en Nextjs:

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

m,

Su consola de VSC hace que el código sea menos visible, si de por si hay pantallas muy chicas así se ven menos jaja, pero igual muy buen curso.

Me parece que actualmente ya no es necesario utilizar @babel para utilizar un import dinamico, el repositorio ofical nos dice que esta actualmente en la fase 4 del proceso TC39 y por lo tanto los Imports dinamicos ya se estan añadiendo oficialmente al ECMAscript Standard

Genial

Hola! Tengo una consulta, es lo mismo si valido que sea igual (==) a ‘undefined’ y no diferente. Cambia algo performe? Me resulta más intuitivo hacerlo de esta manera:

typeof window.IntersectionObserver == "undefined"
          ? import("intersection-observer")
          : window.IntersectionObserver

A pesar de haber instalado babel-eslint me sigue devolviendo
Unexpected token import

Que config adicional hay que hacer para que se hagan arreglos del código cuando se guarda, a mi nunca me pasa ni en este curso ni en el de Sparragus, que también lo explica, jaja que tristeza jajaja, y que buena clase, este curso esta matador.

Tengo muchos errores con webpack-dev-server alguien sabe como solucionar este problema, estoy trabajando con las versiones que usa el profe porque las actuales generan problemas


> [email protected]1.0.0 dev /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado
> webpack-dev-server

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/mnt/d/mateo/profesional/platzi/escuela-webdesign/intermedio/avanzado-react/segundo-intento/curso-platzi-react-avanzado/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/matespinosa09/.npm/_logs/2020-11-09T14_40_39_237Z-debug.log

Temas de compatibilidad resueltos de 0, esperanzador

En algunos casos el element.current viene undefined y se rompe la promesa. Yo tuve que agregar un early return cuando es undefined para evitar que se rompa.

Si no quieren utilizar promesas este sería el código en términos de async/await:

  useEffect(() => {
    (async () => {
      typeof window.IntersectionObserver !== 'undefined' ?
        window.IntersectionObserver :
        await import('intersection-observer');

      const observer = new window.IntersectionObserver((entries) => {
        const { isIntersecting } = entries[0];
        if (isIntersecting) {
          setShow(true);
          console.log('Sí');
          observer.disconnect();
        }
      });
      observer.observe(element.current);
    })();
  }, [element]);

excelente clase me gusto!!!

Muy interesante, tengo errores en mis practicas, bajare el proyecto de github y lo comparare para saber y aprender que hice mal. Gracias!! muy interesantes las clases. 😃

Justamente estaba usando los dynamic import en la empresa a la cual trabajo y no necesite la dependencia.