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

Usando Link para evitar recargar la página

27/50
Recursos

En esta clase utilizaremos el componente Link para hacer que nuestros enlaces no hagan que la página se recargue y funcione como una Single Page Application. Recuerda siempre que puedas utilizar Link en lugar de a para tener una mejor experiencia de usuario y que no recargue la página.

Aportes 17

Preguntas 2

Ordenar por:

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

El componente Link de Reach/Router parece funcionar igual que el Link de React Router, éste también acepta styled component

Más información sobre styled-component con componentes custom acá

Si tienes este error --> “Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as …”

Es cuestion de llevar el Link (en este caso el componente Logo), adentro del Router.
En el componente App:

<BrowserRouter>
      <GlobalStyle />
      <Logo />
      {
        detailId
        ? <PhotoCardWithQuery id={detailId} />
        :
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/pet/:id' element={<Home />} />
        </Routes>
      }
    </BrowserRouter>

Dejar el Link envuelto en el <BrowserRouter>

Algunos errores que salen en el video ya no salen en nuevas versiones de las dependencias

Luego de hacer el deploy en Zeit con esto (y los demas videos de Reach Router) no me funciona la opcion de categorias https://petgram–now-client.now.sh/pet/2

alguna idea de que pueda ser?, no arroja ningun error y en local funciona correctamente

Yo lo hice un poco diferente, e incluso dejé de utilizar el método para obtener el ID del “detailsID”, sino que ahora utilizo el hook useParams. Al final, mis archivos me quedaron asi:
.
App.js

import { Fragment } from 'react'
import { Routes } from './routes'

import GlobalStyle from './styles/globalStyles'

const App = () => {
  return (
    <Fragment>
      <GlobalStyle />
      <Routes />
    </Fragment>
  )
}

export default App

.
/routes/index.js
.

import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
import { Logo } from '../components/Logo'
import { ListOfCategories } from '../components/ListOfCategories'
import { PhotoCardWithQuery } from '../components/PhotoCardWithQuery'
import { Home } from '../pages/Home'

export const Routes = () => {
  return (
    <Router>
      <Logo />
      <ListOfCategories />
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/category/:id' component={Home} />
        <Route exact path='/details/:id' component={PhotoCardWithQuery} />
      </Switch>
    </Router>
  )
}

.
Y el archivo PhotoCardWithQuery.js que ahora maneja el query mediante el uso del hook useParams

import { useParams } from 'react-router-dom'
import { PhotoCard } from '../PhotoCard'
import { useGetSinglePhoto } from '../../hooks/useGetSinglePhoto'

export const PhotoCardWithQuery = () => {
  const { id } = useParams()
  const { loading, data } = useGetSinglePhoto(id)

  if (loading) return null

  const { photo = {} } = data

  return <PhotoCard {...photo} />
}

Hola a todos, hoy marzo del 2022 este es el código que utilice:
Category/styles.css

import styled , { css }  from "styled-components";
import { skeletonStyle } from '../../styles/skeleton';
import { Link as LinkRouter } from 'react-router-dom'

export const Link = styled(LinkRouter)`
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  width: 75px
`

Category/index.js

import React from "react";
import { Link, Image } from './styles'
const DEAFULT_IMAGE = 'https://imgur.com/dJa0Hpl.jpg';

import { ContainerCategorySkeleton, CategoryImage, CategoryTitle } from './styles';

export const CategorySkeleton = props => {
  return (
      <ContainerCategorySkeleton>
          <CategoryImage light={props.light} />
          <CategoryTitle light={props.light} />
      </ContainerCategorySkeleton>
  )
}

export const Category = ({ cover = DEAFULT_IMAGE, path, emoji = '!'})=>(
  <Link to={path}>
    <Image src={cover} />
    {emoji}
  </Link>
)

App.js

import React from 'react'
import { Route, BrowserRouter, Routes } from 'react-router-dom'
import { GlobalStyle } from './styles/GlobalStyles'
// import { ListOfPhotoCards } from './components/ListOfPhotoCards'
import { Logo } from './components/Logo'
import { PhotoCardWithQuery } from './container/PhotoCardWithQuery'
import { Home } from './pages/Home'
export const App = () => {
  const urlParams = new URLSearchParams(location.search);
  const detailId = urlParams.get('detail');

  return (
    <>
    <BrowserRouter>
      <GlobalStyle />
      <Logo />
      {
        detailId?
        <PhotoCardWithQuery id={detailId} />:(
          
            <Routes>
              <Route path='/' element={<Home />} />
              <Route path='/pet/:id' element={<Home />} />
            </Routes>
          
        )
      }
      </BrowserRouter>
    </>
  )
}

Logo/index.js

import * as React from "react"
import { Svg } from "./styles"
import { Link } from 'react-router-dom'

export const Logo = (props) => (
  <Link to='/'>
    <Svg>
     ...
    </Svg>
  
  </Link>
  
)


Me agradó más la navegación con esta herramienta que con react-router, es un poco más amigable

Faltaria un Link a details, en PhotoCard, y sacar la logica que se agrego en App momentanemante por una ruta a details

Hay un problema con Link, si voy a “http://localhost:8080/?detail=0” y hago click en el logo, no vuelve al Home, solo me cambia la ruta como si fuera el home pero el contenido se mantiene

Les comparto mi petgram:
https://petgram.angelozam17.now.sh
/

Hola, vengo del futuro, este vídeo debería ser el número 27 y no el número 26, mira primero el 27 y luego vuelve a este.

No sé si es una diferencia entre Reach Router y React Router, pero cuándo queremos hacer esto en React Router debemos acceder al prop “match”, luego de ahí extraer el “params” y de ese modo puedes obtener los valores que están en la url que renderiza el componente.

Sin duda es una solución más sencilla hacerlo directo como se muestra aquí con Reach Router.

Y para crear un template base al hacer el to=’/’ también pondrá en foco en el contenido ¿?

Como quitamos ese comportamiento del focus

estas clases son muy buenas

El problema es que se renderizan dos componentes Home distintos dependiendo de si estamos en la ruta raíz o en una categoría. Esto hace que si cambiamos entre la raíz y una categoría, se renderizen listas de categorías distintas, ya que ese componente está dentro del home, y esto hace que se vuelva a hacer un fetch de las categorías, eso también queda raro visualmente, al menos en mi caso.

Mi solución fue hacer el router dentro del componente Home, solo para ListOfPhotoCards, aunque no sé si sea la mejor.

A mi me esta saliendo este error al usar la navegación 😦