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 el localStorage para guardar los likes

19/50
Recursos

Aportes 25

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Le falto el JSON.parse(like) cuando obtiene el valor del local storage, de lo contrario siempre que le das like a una foto no volvera a false, porque lo que retorna es un string con el valor 鈥渇alse鈥 hay que parsearlo para que lo lea, al principio funciona ya que los valores que devuelven son null! (osea falsos)

const [liked, setLiked] = useState(() => {
    try {
      const like = window.localStorage.getItem(key)
      return JSON.parse(like)
    } catch (e) {
      console.log('error!!', e)
    }
  })

Igual excelente curso!!

Los iconos tambi茅n los pueden estilizar directamente con styled components

import styled from 'styled-components'
import { MdFavorite } from 'react-icons/md'

export const LikeIcon = styled(MdFavorite)`
  color:  #ff277a;
  ${fadeIn({ time: '250ms', type: 'ease-in' })}
`

Hasta este punto, el proyecto funciona la primera vez que lo ejecutas y luego los corazones nunca vuelven a ser false.

Para solucionarlo, deben hacer lo siguiente:

const [liked, setLiked] = useState(() => {
    try {
      const like = window.localStorage.getItem(key)
      return JSON.parse(like)
    } catch (e) {
      console.log('error!!', e)
    }
  })```

al quitar el me gusta no funciona segu铆a mostrando los me gusta鈥 soluci贸n

const [liked, setLiked] = useState(() => {
        try {
            const like = window.localStorage.getItem(key)
            
            if (like == 'true') {
                return like
            }
            return false
                
        } catch (e) {
            return false
        }
    })

Brutal, en definitiva uno de los mejores profesores que me he topado en platzi, que maestro!

Para guardar el valor cuando le das Unlike, simplemente agregamos una ternaria

 const  setLocalStorage = value => {
    try{
      value ? window.localStorage.setItem(`like_${id}`,value)
           : window.localStorage.removeItem(`like_${id}`,value)

      setLiked(value);

    }catch(e){
      console.error(e)
    }
  }

Para agregar color rojo al liked y una peque帽a animacion.

            <Button liked={liked} onClick={() => setLocalStorage(!liked)}>
              <Icon size='32px' /> {likes} likes!
            </Button>
export const Button = styled.button`
  display: flex;
  align-items: center;
  padding-top: 8px;
	width: 100%;
	padding: 0 15px;
	box-shadow: 0 30px 35px #e5e5e5;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
  & svg {
    margin-right: 4px;
		color: #d1d1d1;
    width: 23px;
    ${
      props => props.liked && css`
        ${fadeIn()}
        color: red`
    }
  }
`

Los valores almacenados en localStorage se pueden ver en el inspector (devTools) en 鈥

En las versiones m谩s recientes de EcmaScript ya no hace falta incluir (e) en el catch si este no se va a usar (o no nos interesa manejar el error de manera espec铆fica), as铆 que podemos usar solo } catch {

Si les sale el error:

Too many re-renders. React limits the number of renders to prevent an infinite loop

No se preocupen, en la pr贸xima clase con el refactor que se hace, queda solucionado 鉁岋笍

Crack!! 馃憦馃憦

Este proceso est谩 super genial, pero en un proyecto real usar铆amos una peticion de tipo post (si el api es REST) y todos esos likes los recuperariamos del api鈥 No?

Consulta, a modo de escalabilidad (por cuestiones de rendimiento si nos encontramos en alg煤n proyecto m谩s grande) en cuanto a la funci贸n de onClick, es igual poner

<Button onClick={() => setLocalStorage(!like)} />

A intentar no utilizar dentro de los componentes las arrow functions y utilizar algo como

setLocalStorage = () => {
 const value = !like
 ...
}
<Button onClick={setLocalStorage} />

驴Ser铆a lo mismo o la segunda forma si mejora un poco a la larga la performance de nuestra App?
Gracias!

Respecto el uso de una funci贸n en useState y el porqu茅:

El par谩metro que le pasamos a useState es 鈥溍琻itialState鈥, 茅ste s贸lo se utiliza en el primer render, pero si no lo pasamos dentro de una funci贸n, entiendo que se ejecutar铆a en cada render si extraemos el valor directamente, es decir, estar铆amos ejecutando cada vez window.localStorage.getitem:

useState(window.localStorage.getItem(key))

En cambio si usamos una funci贸n, como nos presenta el video, 茅sta solo se ejecuta en el primer render, y as铆 s贸lo ejecutamos window.localStorage.getItem 1 vez.

He aqu铆 el porqu茅 la documentaci贸n oficial menciona que si requerimos una computaci贸n pesada (yo dir铆a cualquier computaci贸n), mejor usar una funci贸n.

A煤n me queda la duda de si ser铆a m谩s eficiente definir una function getLocalStorage() fuera del componente para as铆 evitar estar definiendo una funci贸n en cada render, o si la m谩quina V8 es lo suficientemente inteligente/optimizada para que sea irrelevante.

No ser铆a mejor guardar un array o un objeto que contenga los likes dentro del local Storage?, para no guardar N keys distintas, guardar una 煤nica que contenga todos.

Dado que hoy en d铆a existen m煤ltiples implementaciones nativas de IntersectionObserver, el polyfill que antes se manten铆a en este repo ya no est谩 soportado y ha sido archivado

Genial

Una funcionalidad de uso com煤n compleja, pero con esta clase te simplifica la vida

me gusta esta explicacion acerca del localStorage
https://www.youtube.com/watch?v=hb8O0qRqiSk&ab_channel=FernandoHerrera

Genial buen tip, el de poner Try Catch al setear o recuperar del localStorage, no contemplaba cuando un usuario entra en modo privado鈥

Bien, esto es solo algo provisional despu茅s veremos como guardar esta informaci贸n en la base de datos

me funcion贸 solo cerrando con eval(), la obtenci贸n del item.

const [liked, setLiked] = useState(() => {
        try {
            return eval(window.localStorage.getItem(key));
        } catch (error) {
            console.log(error);
            return false;
        }
    });    

Algo que a primeras vistas tiene un contexto complejo, se muestra simple para miras a un cliente

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

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

Aplicando l贸gica, muy interesante, como podemos grabarnos tantas palabras claves y 煤tiles y que las recordemos a la hora de usarlas?