No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Práctico de Next.js

Curso Práctico de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Páginas en Next.js

12/22
Recursos

Aportes 8

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Los videos estan unos con volumen alto y otros con volumen bajo, este toco el bajo.

Por defecto en el proyecto el componente Checkout no le pasa por props nada a OrderItem, por lo cual no podemos visualizar algún dato en /checkout. Una solución temporal es enviarle datos mediante props:

import OrderItem from 'components/OrderItem'

import styles from 'styles/Checkout.module.scss'

const order = {
  id: 1,
  title: 'Gorgeous Granite Pants',
  price: 296,
  description: 'Carbonite web goalkeeper gloves are ergonomically designed to give easy fit',
  category: {
    id: 1,
    name: 'Clothes',
    image: 'https://api.lorem.space/image/fashion?w=640&h=480&r=982',
  },
  images: ['https://api.lorem.space/image/fashion?w=640&h=480&r=290', 'https://api.lorem.space/image/fashion?w=640&h=480&r=363', 'https://api.lorem.space/image/fashion?w=640&h=480&r=747'],
}

const Checkout = () => {
  return (
    ...
    ...
        <OrderItem product={order} />
    ...
    ...
  )
}

export default Checkout


.
Además, recordemos hacer uso del componente Image que nos brinda next/image 😄

return (
  <div className={styles.OrderItem}>
    <figure>
      <Image
        src={product?.images[0]}
        alt={product?.title}
        width={70}
        height={70}
      />
    </figure>
    <p>{product?.title}</p>
    <p>${product?.price}</p>
    <Image 
      src={close}
      alt="close"
      onClick={() => handleRemove(product)}
      width={15}
      height={15}
    />
  </div>
);

.
PD: Recuerden añadir en next.config.js a api.lorem.space y luego reiniciar el servidor:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['placeimg.com', 'api.lorem.space'],
  },
}

module.exports = nextConfig

creo que los cursos de webpack react y este el de next sson no solo un desastre por lo mal orientado si no por el poco aprendizaje que quedan creo que el enfoque se ha perdido

Una sugerencia para el equipo de Platzi, este curso me parece un poco denso en algunas partes, sería bueno que agregaran algunos quizzes como con el curso anterior; pienso que ayuda a recordar las cosas importantes

El curso esta muy interesante, pero el volumen del audio varia en unos videos se escucha alto, normal y bajo.

Muy buen curso! TY.

Evita que se rompa el programa en caso de que no se tenga permiso (o no encuentre) un elemento

jajajajaja lo único malo de este curso es como juegan con el audio