Usar información real de las categorías

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🧐:

• Método map()

• Operador rest / spread

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$/

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…!!!

Spread Operator https://platzi.com/clases/1815-ecmascript-6/26122-let-y-const-multilinea-spread-operator-y-desestruc/

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. 😃