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!

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Usando Intersection Observer

17/50
Recursos

Aportes 46

Preguntas 5

Ordenar por:

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

Lo que se logra con esto es una especie de LazyLoad de las imágenes, porque técnicamente ya se tiene toda la información lista para mostrar, cuando se empiece a usar la base de datos de manera correcta, estaríamos haciendo una petición grande de igual manera para solo mostrar las 3 primeras.

Mi manera de hacer esto sería la siguiente: Hacer un “infinite loader”, solo hacer fetch de las tres primeras cards y crear un elemento abajo de ListOfCards con un intersection observer, el cual, al activarse realice otro pedido de otras 3 cards a la db y renderizarlas. En cuanto al lazy load de las imágenes, se puede utilizar el api lazy de html o en su defecto una dependencia de terceros. Esto es, tal y como es Instagram

¿Extrañas a Leonidas?

Yo hice uso Intersection Observer, un poquito diferente, hago un solo IntersectionObserver que vigile a todos los elementos, peuden verlo en este link:
https://github.com/SoyOscarRH/SoyOscarRH.github.io/blob/master/Webpage/Code/Helpers/lazyLoadImages.ts

Y solo lo ejecutan una sola vez como por ejemplo:

import lazyLoadImages from ".../lazyLoadImages"
document.addEventListener("DOMContentLoaded", lazyLoadImages)

Y las imagenes al final tienen que tener el src de una imagen por defecto (un placeholder), como por ejemplo:

<img
        className="lazy"
        data-src={`Assets/${folder}/${name}`}
        src={"Assets/Blank.png"}
/>

Y si lo quieren ver en vivo y directo:
https://SoyOscarRH.github.io/

Esto es lo mas hermoso que he visto desde que programo con javascript. Que gran clase.

esta clase me volo el cerebelo

Andaba buscando esta funcionalidad 🙂👍
Lazy Loader -> Intersection Observer API

  • Buenisima clase!!

La verdad si yo hacía esto por mí mismo no me habría dado cuenta que el error yacía en la altura de los articles. Simplemente qué genial el profesor! Estoy aprendiendo mucho

No estoy muy seguro si entendí del todo lo que es ref, pero luego de reflexionarlo un rato esta sería mi síntesis.
'
Dado a que no estamos usando classNames, lo que podemos hacer es usar la propiedad ref para capturar un grupo de elementos del DOM o capturarlo uno a uno y pasarlos al Intersection Observer para luego renderizar su contenido cuando entren al viewport cambiando el state de cada uno a show = true.
'
Algo que no me queda claro es, ¿por qué el useEffect tiene que estar viendo el cambio de ref?. Probé quitando el ref al final del useEffect, dejando un array vacío y funciona igual. Según entiendo es porque el useEffect no se ejecuta en el cambio de la referencia, si no, que lo que se ejecuta es el Intersection observer que le pusimos a cada elemento.

¿Estamos conscientes del poder de este pequeño pedazo de código que puede ser reutilizado para manejar el LazyLoad de cualquier componente??!!! Que gran clase!!

Super lo de Lazy Loader 😃👍

Esta clase me gusto

Wow, no sabia esto del Observer

Un atajo para los<Fragments /> seria simplemente usar ```
<> </>


Por ejemplo:


```js
        <>
          <a href={`/detail/${id}`}>
            <ImgWrapper>
              <Img src={src} alt='photo' />
            </ImgWrapper>
          </a>

          <Button>
            <MdFavoriteBorder size='32px' /> {likes} likes!
          </Button>
        </>

Lazy loading ahora forma parte del estándar HTML. Checar como funciona <img loading="lazy" /> funciona en React.

No entendi mucho que es el viewport…

Excelente clase! No se hace el request hasta que el elemento se encuentre en el viewport.

Adicionalmente agregué el threshold al objeto de configuración del IntersectionObserver.

useEffect(
    function() {
      const observer = new window.IntersectionObserver(
        function(entries) {
          const { isIntersecting } = entries[0];
          if (isIntersecting) {
            setShow(true);
            observer.disconnect();
          }
        },
        {
          threshold: 0.5
        }
      );
      observer.observe(element.current);
    },
    [element]
  );```

Mis comentarios

import React, { useEffect, useRef, useState, Fragment } from "react";
import { Article, ImgWrapper, Img, Button } from "./styles";
import { MdFavoriteBorder } from "react-icons/md";

const DEFAULT_IMAGE =
  "https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_cats.jpg";

export const PhotoCard = ({ id, likes = 0, src = DEFAULT_IMAGE }) => {

  // Iniciarlizar la referencia que se usara en Article
  const element = useRef(null)

  // Inicializar estado de show
  const [show, setShow] = useState(false)

  useEffect(function () {
    //console.log(element.current)
    const observer = new window.IntersectionObserver(function (entries) {
      //console.log(entries)

      // Obtener el elemento isIntersection
      const { isIntersecting } = entries[0]
      console.log({ isIntersecting })

      // Sí hace intersección entonces cambiar el el valor de show
      if (isIntersecting) {
        console.log('si, esta haciendo intersección')
        setShow(true)

        // Una vez hecho el render ya no es necesario observar ese elemento, ayudará al performance.
        observer.disconnect();
      }
    });

    // Iniciar el observador
    observer.observe(element.current);
  }, [element]);

  return (
    <Article ref={element}>
      {
        show && <Fragment>
          <a href={`/detail/${id}`}>
            <ImgWrapper>
              <Img src={src} />
            </ImgWrapper>
          </a>

          <Button>
            <MdFavoriteBorder size='32px' /> {likes} likes!
          </Button>
        </Fragment>
      }

    </Article >
  );
};

Esto es lo mismo que colocarle a la imagen loading=“lazy” ?

No me quedó muy claro lo de la altura de cada elemento

NO entiendo la logica, si el Return se ejecuta al finalizar la funcion, como es posible que le asigne a Ref su valor?

Genial

Trabajo todos los días con jquery, y ver lo sencillo que fue con componentes y react hacer el lazy loading sin librerias externas me vuela la cabeza. Genial delivery de contenido

increible esta clase, aqui se puede notar el porque los Hooks son tan útiles, y todo relativamente en muy pocas líneas de codigo!

Excelente, muy volado!

Lazy Loader Excelente!!! usando React y intersectionObserver API

Lazy Loader Excelente!!! usando React y intersectionObserver API

Esta clase me estalló la cabeza, esta brutal!!!

Gran clase.

Excelente! Y que bueno el profesor explicando

que buena clase!

Pregunta

¿Seria mejor aplicar el Intersection Observer en ListOfPhotoCards para cargar de 3 en 3 las PhotoCards?

https://platzi.com/clases/1642-javascript-profesional/22175-intersectionobserver/

En este curso se explica un poco mas en detalle el Intersection Observer

Este curso va de mejor a mucho mejor!

Que nivel!!!

Que efectos puede traer el no realizar el observer.disconnect ?

En las dependencias del useEffect hemos puesto a “element”, mi pregunta es qué debe pasar con element para que se considere que ha cambiado y se lanze el efecto: ¿Que haga referencia a un elemento distinto?, ¿que lo referenciado, es decir el <Category>, sufra algún cambio? o ¿alguna otra cosa?

Slds.

Qué tremenda clase, sabía como implementar el IntersectionObserver en Vanilla JS, pero tenía curiosidad de cómo hacer en React, increíble 🤯

Excelente clase…!!

Hola! luego de escribir show && <Fragment… etc en el componente, no renderea mas las fotos… sera que podrias ayudarme? A alguien mas le sucedio? Gracias!

Son increíbles estas clases. Lo que aprendo en cada una es genial. Una cosa que me encanta es como el profe sin querer (o capaz no) tiene errores, y al “debugearlos” me ayuda a entender mucho más la lógica del código.
Super contento con este curso!! 😃

Si se fijan cuando los elementos salen de la pantalla se siguen renderizando, y también hay 2 categorías renderizandose ¿como se puede hacer para que al salir se desrendericen?

alguien sabe cual es el color theme de visual studio que utiliza el profesor?

practica, pero en esta parte me sale error 😦

Muy bien explicado, tuve que verlo 3 veces para entenderlo, lo mejor ya entiendo un poco más los hooks, gracias

n

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

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