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

Usar información real de las categorías

10/50
Recursos

Aportes 23

Preguntas 9

Ordenar por:

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

Muy top pasar los props con el rest operator… , recibirlos como parametros directamente en el componente y que mas nos deparará este curso 😄… chavales… pillad café y arándanos que esto se pone bueno.

Por si alguien tiene dudas o simplemente para recordar conceptos🧐:

Para usar el array de categorias usad:

[import db from '../../../api/db.json'

para luego usarlo como:

 {db.categories.map(category => <Item key={category.id}><Category /></Item>)}

Salir de la carpeta /src de React es una mala practica, por supuesto si tu proyecto se creo con el comando “create-react-app”.
Te saldra un error como este:
Module not found: You attempted to import …/…/api/db.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Solucion. Esperar a que llame la API cuando corra el server mas adelante.

Si les sale un error de webpack con el archivo db.json asegurense de que en el archivo webpack.config.js en seccion “test” tengan la expresion regular asi /.js$/

Realmente las pocas clases hasta ahora me tienen realmente confundido, los cursos de React que dio el profe Sparragus y el de Redux con React son diferentes, aquí el profe usa solo const para hacer constantes, en las otras clases se usaba class y functions. Realmente no siento que este curso me esta despejando dudas, sino me esta generando más.

Código usado durante la clase: (con solucion a errores)

import React from "react";
import { Category } from '../Category'
import { List, Item } from './styles'
import data  from '../../../api/db.json'
export const ListOfCategories = ()=>{
  return (
    <List>
      {
        data.categories.map(category=><Item key={category.id}><Category {...category} /></Item>)
      }
    </List>
  )
}

La verdad que el curso esta muy bueno, mire casi todos los videos y ahora estoy repasandolos para practicar, me gusta mucho la forma de armar los componentes con const y arrow functions.

Para el estado inicial, preferí crear el archivo initialState.js en la src.

export default {
  users: [
    {
      id: '7ec3d2f0-641e-11e9-9d5d-1b8ad05606d1',
      password: '$2b$10$RNCVsIxNLKP8Gl.BPoedXuwGczl527UfsLDYcb.9V856ng4kxULrS',
      favs: ['18', '1'],
      avatar: 'https://gravatar.com/avatar/8e04be7dab487d77f16969fd3e0d45d4',
      email: '[email protected]'
    },
    {
      id: 'a882e1d0-6428-11e9-9b1f-8980b7d40890',
      password: '$2b$10$BffxqFIacmPkKr2VZgyu7.r0nMmCMbL3nNw3CdWLpKVSKWkUAQGJS',
      favs: ['18', '16', '1', '15'],
      avatar: 'https://gravatar.com/avatar/3bccd59be0a57b39bdd9b2760702795e',
      email: '[email protected]'
    }
  ],
  categories: [
    {
      id: 1,
      name: 'cats',
      emoji: '🐱',
      cover:
        'https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_cats.jpg',
      path: '/photos/cats'
    },
    {
      id: 2,
      name: 'dogs',
      emoji: '🐶',
      cover:
        'https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_dogs.jpg',
      path: '/photos/dogs'
    },
    {
      id: 3,
      name: 'hamsters',
      emoji: '🐹',
      cover:
        'https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_hamsters.jpg',
      path: '/photos/hamsters'
    },
    {
      id: 4,
      name: 'rabbits',
      emoji: '🐰',
      cover:
        'https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_rabbits.jpg',
      path: '/photos/rabbits'
    },
    {
      id: 5,
      name: 'birds',
      emoji: '🐦',
      cover:
        'https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_birds.jpg',
      path: '/photos/birds'
    },
    {
      id: 6,
      name: 'fishes',
      emoji: '🐠',
      cover:
        'https://res.cloudinary.com/midudev/image/upload/w_150/v1555671700/category_fishes.jpg',
      path: '/photos/fishes'
    }
  ],
  photos: [
    {
      id: 0,
      categoryId: 2,
      src:
        'https://res.cloudinary.com/midudev/image/upload/w_300/q_80/v1560262103/dogs.png',
      userId: 100,
      likes: 7
    },
    {
      id: 1,
      categoryId: 1,
      src:
        'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 45
    },
    {
      id: 15,
      categoryId: 4,
      src:
        'https://images.unsplash.com/photo-1520561805070-83c413349512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 1
    },
    {
      id: 18,
      categoryId: 5,
      src:
        'https://images.unsplash.com/photo-1518001589401-1743b61d1def?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 2,
      likes: 15
    },
    {
      id: 16,
      categoryId: 4,
      src:
        'https://images.unsplash.com/photo-1452857297128-d9c29adba80b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 1
    },
    {
      id: 7,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1508280756091-9bdd7ef1f463?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 40
    },
    {
      id: 12,
      categoryId: 3,
      src:
        'https://images.unsplash.com/photo-1553987882-91d92995e16c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 3,
      likes: 6
    },
    {
      id: 13,
      categoryId: 1,
      src:
        'https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 7
    },
    {
      id: 11,
      categoryId: 3,
      src:
        'https://images.unsplash.com/photo-1548767797-d8c844163c4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 40
    },
    {
      id: 5,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 2,
      categoryId: 1,
      src:
        'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 3
    },
    {
      id: 9,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1518155317743-a8ff43ea6a5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 8,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 3,
      categoryId: 1,
      src:
        'https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 7
    },
    {
      id: 19,
      categoryId: 6,
      src:
        'https://images.unsplash.com/photo-1531523668299-e20047c89111?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 4,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1500879747858-bb1845b61beb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 27
    },
    {
      id: 10,
      categoryId: 3,
      src:
        'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 17,
      categoryId: 5,
      src:
        'https://images.unsplash.com/photo-1515619363794-e826f7de3487?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 21
    },
    {
      id: 6,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 20,
      categoryId: 6,
      src:
        'https://images.unsplash.com/photo-1522720833375-9c27ffb02a5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 0
    },
    {
      id: 14,
      categoryId: 2,
      src:
        'https://images.unsplash.com/photo-1500879747858-bb1845b61beb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
      userId: 1,
      likes: 27
    }
  ]
}
 

¿A alguien más le pasa que por alguna extraña razón no pueden importar un archivo JSON ni con el json-loader ni sin el?

Buena clase!

Tengo un par de dudas que depronto alguien me pueda aclarar:

  1. Con Styled-Components como y en donde se recomienda trabajar las media query para hacer responsive la aplicación.?

  2. Más Adelante en el curso he visto que hay algo llamado context, al usar este context ya no es necesario usar por ejemplo redux?

Genial

Como puedo hacer para mi emoji se vean con la imagen bien. Tengo que instalar alguna extensión de VSCode? Actualmente me salen así 🐹

Qué práctico y fácil

Estupenda clase, esto me encanta…!!!

Super genial esto de pasar las props por rest operator. Se pone bueno el curso. Ahora a continuar para seguir aprendiendo.

Pasó mucho para que entendiera el operador rest {…category}, ahorra muchos dolores de cabeza

increible!! me gustó mucho esta mini clase 😄

b

Si tienen problemas con el error al importar db.json, deben modificar la ubicación de la carpeta api dentro de src y obviamente cambiar la ruta del import, con eso bastará para que funcione por el momento.

Muy genial. 😃