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

Creando la página Detail

28/50
Recursos

Aportes 18

Preguntas 0

Ordenar por:

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

Si les cuesta trabajo entender la lógica que hay en el id, les paso esta imagen que hice para entender mejor lo que esta sucediendo.

Hay dos cosas pasando cuando nos referimos al Id. El camino rosa y el morado.

  1. El camino rosa: Cuando estamos en el <Home> tenemos un listado de fotos, los cuales no son más que simples datos, entre esos datos, tenemos el Id. Cada foto cuenta con su propio Id, el cual se convierte en una URL al darle click ya que se le asigno al componente <Link to={/detail/${id}}>.

  2. El camino morado: El camino morado comienza desde ese id que se convierte en URL, y es tomado por el componente de Reach Router (<Detail path="/detail/:detailId"/>). Hasta ahora eso no basta para mostrar la imagen a la que se le dio click. Por lo cual, ese detailId tiene que viajar a travez de los props hasta la página <Detail>, y que es pasado a <PhotoCard> para saber que foto mostrar, prácticamente otra petición.

Espero haberme dado a explicar 😅 , si tienen una duda, pueden preguntarme aquí mismo.

Nota: Al poner <PhotoCard /> me refiero al componente <PhotoCardWithQuery />, simplemente que no quería escribir tanto en mi nota.

De tantos cursos que he realizado en Platzi, sin duda alguna este es el mejor de todos; es muy completo y el profesor explica a detalle cada tema, lleva muy bien la secuencia de los temas y resuelve los errores en el mismo vídeo. No como en otros cursos 👏👏👏👏

Estos cursos son los que hacen a la calidad de platzi. Felicitaciones.

Cuando termine el curso montare mi portafolio en react, con lo aprendido. Muy excelente el curso.

Para los que estan trajando con hooks:
App.js

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

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

Detail.js

import React from 'react'
import { useParams } from 'react-router-dom'
import { PhotoCardWithQuery } from '../container/PhotoCardWithQuery'

export const Detail = () =>{
  const params = useParams();
  console.log(params)
  return (
    <PhotoCardWithQuery id={params.detailId} />
  )
}

PhotoCard.js

import React from "react";
import { ImgWrapper, Img, Article } from './styles'
import { useLocalStorage } from "../../hooks/useLocalStorage";
import { useNearScreen } from "../../hooks/useNearScreen";
import { useMuationToogleLike } from '../../hooks/useMuationToogleLike '
import { FavButton } from '../FavButton'
import { Link } from "react-router-dom";


const DEFAULT_IMAGE = 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'

export const PhotoCard = ({ id, likes = 0, src = DEFAULT_IMAGE}) =>{
  const [show, ref] = useNearScreen();
  const key = `like-${id}`
  const [ liked, setLiked ] = useLocalStorage(key, false)
  const { mutation, mutationLoading, mutationError } = useMuationToogleLike();
  
  const handleFavClick = () => {
    !liked && mutation({
      variables: {
        input: { id }
      }
    })
    setLiked(!liked)
  }
  
  return (
    <Article ref={ref}>
      {
        show && 
        <>
          <Link to={`/detail/${id}`}>
            <ImgWrapper>
              <Img src={src} />
            </ImgWrapper>
          </Link>
          <FavButton liked={liked} likes={likes} onClick={handleFavClick} />
        </>
      }
      
    </Article>
  )
}

Comparto el componente App.js

export const App = () => {
  return (
    <>
      <BrowserRouter>
        <GlobalStyles />
        <Logo />
        <Switch>
          <Route path='/pet/:id' component={Home} />
          <Route path='/detail/:id' component={Datail} />
          <Route path='/' component={Home} />
        </Switch>
      </BrowserRouter>
    </>
  )
}

Tuve un problema con el Link del PhotoCard. Cuando Link envuelve a ImgWrapper y a Img, las imágenes se me renderizaban pequeñas tanto en el Home como en los details.
Aquí entonces ImgWrapper tiene que envolver a Link y a Img:

  <ImgWrapper>
    <Linkto={`/detail/${id}`}>
      <Imgsrc={src} />
    </Link>
  </ImgWrapper>

¡Qué organizado y limplio se ve el proyecto a este punto! y más si usas hooks para hacer el fetching de datos

Dios, llevaba como 15 min con errores en la App, al final resulto ser que tenía {} en lugar de () en Detail.js envolviendo a <PhotoCardWithQuery/>

Hola! Me funciona todo perfecto pero me tira el siguiente Warning en la consola:

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

A alguien más le pasa esto??

App.js

import React from "react";
import { BrowserRouter, Routes, Route} from "react-router-dom";
//styles
import { GlobalStyle } from "./Styles/GlobalStyles";
// import { Routes } from './Routes'
import { Home } from './Pages/Home';
import { Detail } from "./Pages/Detail";

import { Logo } from './Components/Logo';


export const App = () =>{
    const  urlParams = new window.URLSearchParams(window.location.search)
    const detailId = urlParams.get('detail')
    console.log(detailId)
    return (
        <BrowserRouter>
        <GlobalStyle />
        <Logo />
        <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/pet/:id' element={<Home />} />
            <Route path='/detail/:id' element={<Detail />} />
        </Routes>
        </BrowserRouter>
    )
} 

Detail.js

import React from 'react';
import { PhotoCardWithQuery } from '../Container/PhotoCardWithQuery';

export const Detail = () => {
    return ( 
        <PhotoCardWithQuery />
    )
}

PhotoCard/index.js

import React, {useEffect, useRef, useState} from 'react';
import { Link } from 'react-router-dom'

import { Article, ImgWrapper, Img} from './styles';
import { FavButton } from '../FavButton';

/* HOOKS */
import { useLocalStorage } from '../../Hooks/useLocalStorage';
import { useNearScreen } from '../../Hooks/useNearScreen';

/* CONTAINER */

import { useMutationToogleLike } from '../../Hooks/useMutationToggleLike';

const DEFAULT_IMAGE = 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'

export const PhotoCard = ({id, likes=0, src = DEFAULT_IMAGE})=> {
    
    const [show, ref] = useNearScreen();
    
    const key = `like-${id}`;
    const [liked, setLiked] = useLocalStorage(key, false)
    
    const { mutation, mutationLoading, mutationError } = useMutationToogleLike()
    
    const handleFavClick = () => {
        !liked && mutation({
          variables: {
            input: { id }
          }
        })
        setLiked(!liked)
      }
      console.log('{ mutation, mutationLoading, mutationError }', { mutation, mutationLoading, mutationError })


    return(
        <Article ref={ref}>
            {
                show &&
                <>
                    <Link to={`/detail/${id}`}>
                        <ImgWrapper>
                            <Img src={src} />
                        </ImgWrapper>
                    </Link>
                    <FavButton liked={liked} likes={likes} onClick={handleFavClick}/>
                </>
            }
        </Article>
    )
}

Hasta ahora el curso ha sido de los mejores 💙

Una duda, al poner el detailID como parámetro en la URL el @reach/router lo pasa automáticamente como prop entonces?

😃

Navegación bastante fluida, sin tanta traba en la lógica con Link

Genial! Excelente curso!! Gracias @midudev!!!

Hola Equipo ! Les consulto si cuando utilizo el Link puedo pasar parametros a mi componente ? Tienen algún ejemplo al usar el parametro en el componente ?

Muchas gracias

Yo lo resolvi von use state y use effect 😃

m