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

Refactorizando y usando variables de loading y error

24/50
Recursos

Aportes 17

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

Me paso algo curioso, mi internet va lentisimo(estoy en Venezuela) por lo cual si no usaba la variable loading para indicar que estaba cargando la data, siempre me devolvia error, ya que la data nunca llego a definirse, me decia que no podia leer photos de undefined; la solucion era muy sencilla (tonto yo que no se me ocurrio desde un principio) y justamente la saque de la web de midudev (nuestro profesor jajajaja) donde el explica a fondo como usar graphql, tendria que haber saltado a este video desde un principio,

Les dejo mi c贸digo para los que quieran hacer un efecto de Placeholder loading

deben instalar esta dependencia

recuerden pasarle la propiedad 鈥渓oading鈥 al PhotoCard

...
import ReactPlaceholder from "react-placeholder"
import { TextBlock, RectShape, RoundShape } from "react-placeholder/lib/placeholders"

...

  const photoCardSkeleton = (
    <React.Fragment>
      <RectShape color="#eee" style={{ height: "400px", marginBottom: 10 }} />
      <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
        <RoundShape
          color="#eee"
          style={{ width: 50, height: 50, marginLeft: 10, marginRight: 10 }}
        />
        <TextBlock color="#eee" rows={1} style={{ width: 120 }} />
      </div>
    </React.Fragment>
  )

return (
    <Article ref={element}>
      {show && (
        <ReactPlaceholder
          ready={!loading}
          showLoadingAnimation={true}
          customPlaceholder={photoCardSkeleton}
        >
          <React.Fragment>
            <a href={`/?detail=${id}`}>
              <ImgWrapper>
                <Img src={src} />
              </ImgWrapper>
            </a>
            <Button onClick={() => setLiked(!liked)}>
              <Icon size="32px" /> {likes} likes!
            </Button>
          </React.Fragment>
        </ReactPlaceholder>
      )}
    </Article>
  )

quedar铆a as铆:

鈥淰er comentario anterior para el c贸digo鈥

El componente quedar铆a as铆

Prueben mi componente loader para las photos

Componente

import React from 'react'
import { Loader } from '../../components/PhotoLoader/styles'

export const PhotoLoader = () => {
  return (
    <Loader />
  )
}

Estilo

import styled from 'styled-components'
import { skeletonAnimation } from '../../styles/animation'

export const Loader = styled.div`
  padding: 150px;
  color: #f6f7f8;
  background: #f6f7f8;
  margin: 10px;
  box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
  height: auto;
  width: 414px;
  ${skeletonAnimation}
`

Animaci贸n

const placeHolderShimmer = keyframes`
    0%{
        background-position: -490px 0
    }
    100%{
        background-position: 490px 0
    }
`
export const skeletonAnimation = ({
  time = '1s',
  fill = 'forwards',
  iteration = 'infinite',
  timingFunction = 'linear',
  colorBackground = '#f6f7f8',
  colorAnimation = '#edeef1'
} = {}) =>
  css`
    animation-duration: ${time};
    animation-fill-mode: ${fill};
    animation-iteration-count: ${iteration};
    animation-name: ${placeHolderShimmer};
    animation-timing-function: ${timingFunction};
    background-image: -webkit-gradient(
      linear,
      left center,
      right center,
      from(${colorBackground}),
      color-stop(0.2, ${colorAnimation}),
      color-stop(0.4, ${colorAnimation}),
      to(${colorBackground})
    );
    background-image: -webkit-linear-gradient(
      left,
      ${colorBackground} 0%,
      ${colorAnimation} 20%,
      ${colorBackground} 40%,
      ${colorBackground} 100%
    );
    position: relative;
  `

Si quieren ver mas tiempo el loader, en la consola vayan a network y seleccionen slow 3g

Para cargar un loader mientras carga la foto tendrian que modificar la funci贸n renderProps y retornar un styled component con el loader de la siguiente forma:

 const renderProps = ({ loading, error, data: { photo = {} } }) => {
  if (loading) return <Loader />
  if (error) return `Error! ${error.message}`
  return <PhotoCard {...photo} />
}```

Cree un nuevo componente para cuando este cargando y lo agregu茅 en la carpeta de PhotoCard. Use el mismo archivo para estilos ya que solo use dos etiquetas;)

styled-components

les comparto el skeleton que hice adaptando con styled-components

import React from 'react';
import { SkeletonImg, SkeletonInfo, SkeletonItem, SkeletonName } from '../shared/Skeleton';

const Skeleton = () => {
  return (
    <SkeletonItem>
      <div>
        <SkeletonImg></SkeletonImg>
      </div>
      <SkeletonInfo>
        <SkeletonName />
        <SkeletonName />
      </SkeletonInfo>
    </SkeletonItem>
  );
};

export default Skeleton;

Aqu铆 los estilos:

import styled, { css, keyframes } from "styled-components"

const loading = keyframes`
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(460px);
  }
}
`
export const SkeletonItem = styled.li`
  background-color: rgb(218, 218, 218);
  display: flex;
  align-items: center;
  margin: 15px 0;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
`

export const SkeletonImg = styled.div`
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f2f2f2;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to right, #f2f2f2, #ddd, #f2f2f2);
    animation: ${loading} 2s infinite linear;
  }
`

export const SkeletonInfo = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
`

export const SkeletonName = styled.div`
  width: 70%;
  height: 18px;
  background: #f2f2f2;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(to right, #f2f2f2, #ddd, #f2f2f2);
    animation: ${loading} 2s infinite linear;
  }
`

https://loading.io/ por si quieren un loading

Lo de la separaci贸n de c贸digo se aprecia como buena pr谩ctica. ya que es un desarrollo compartido

skeleton para el loading y toast para el mensaje de error,

Nos pasamos el curso refactorizando

Definitivamente este y varios cursos de react necesitan una actualizaci贸n, con este ya van varios cursos de react que me topo s煤per desactualizados donde me la paso mas tiempo arreglando errores que entendiendo lo que se trata de ense帽ar, y en este particular es sumamente molesto que este visual studio code con zoom a 300% o 400%, no culpo al profesor ni nada, me parece que explica muy bien, pero si hace falta actualizar la escuela de react. En mi caso terminare este curso porque pues ya lo empeze y me siento obligado a ello, pero no lo recomendar铆a este curso.

n

Genial!!!