Componente OrderCard

¿Cómo crear un componente OrderCard en React?

Al adentrarnos en el mundo de React, es crucial saber cómo desarrollar componentes de manera efectiva, ya que estos son los bloques fundamentales de cualquier aplicación. En esta ocasión, crearemos un componente llamado OrderCard que nos permitirá visualizar los productos agregados a nuestro carrito de manera estética y funcional. Aquí te guiaremos paso a paso para que tú también puedas implementarlo en tu proyecto.

¿Cómo estructuramos nuestro componente?

Para comenzar, debemos crear una carpeta llamada OrderCard dentro del directorio de componentes. Desde allí, generamos un archivo llamado index.jsx. Este será el lugar donde definiremos la estructura básica de nuestro componente.

import React from 'react';

const OrderCard = (props) => {
  const { title, imageURL, price } = props;
  
  return (
    <div className="order-card flex justify-between items-center">
      <figure className="flex items-center gap-2">
        <img
          src={imageURL}
          alt={title}
          className="w-20 h-20 rounded-lg object-cover"
        />
        <p className="text-sm font-light">{title}</p>
      </figure>
      <div className="flex items-center gap-2">
        <p className="text-lg font-medium">{price}</p>
        {/* Aquí iría el ícono que usaremos para eliminar el producto */}
      </div>
    </div>
  );
};

export default OrderCard;

¿Qué estilos aplicamos al componente?

Dentro del componente OrderCard, aplicamos clases de estilo que permiten que los elementos se ubiquen correctamente. Utilizamos básicas técnicas de diseño, como la flexbox, para asegurarnos de que los elementos estén bien alineados y espaciados.

• Flex: Esencial para ubicar los elementos juntos.
• JustifyBetween: Para dispersar el contenido adecuadamente entre los extremos del contenedor.
• ItemsCenter: Para centrar verticalmente.
• Gap-2: Para proporcionar un espaciado uniforme entre elementos.
• Rounded-lg y Object-cover: Para darle un acabado estilizado a las imágenes.

¿Cómo acoplamos la información del producto?

Para poder usar dinámicamente los componentes, necesitamos pasar la información del producto a OrderCard. Lo conseguimos mediante las props:

const { title, imageURL, price } = props;

Aquí, recibimos valores como title, imageURL y price desde el componente padre. Esta desestructuración nos permite una forma más limpia de manejar las propiedades dentro del componente.

¿Cómo integramos OrderCard en CheckOut Side Menu?

En nuestro componente principal de Checkout Side Menu, debemos asegurarnos de mapear sobre los productos agregados al carrito, utilizando el componente OrderCard para cada elemento:

import React, { useContext } from 'react';
import OrderCard from './OrderCard';
import { ShoppingCartContext } from './ShoppingCartContext';

const CheckoutSideMenu = () => {
  const { cartProducts } = useContext(ShoppingCartContext);

  return (
    <div className='checkout-side-menu'>
      {cartProducts.map(product => (
        <OrderCard
          key={product.id}
          title={product.title}
          imageURL={product.images}
          price={product.price}
        />
      ))}
    </div>
  );
};

export default CheckoutSideMenu;

¿Qué aspectos funcionales debemos considerar?

1. Identificación exclusiva de elementos: Usa key={product.id} para cada OrderCard mapeado, que es necesario para que React diferencie de manera única cada componente en la lista.

2. Integrar contextos: Asegúrate de usar useContext para acceder al estado global donde se almacena la información del carrito de compras, permitiendo así que el componente funcione conforme a datos en tiempo real de la aplicación.

Siguiendo estos pasos y aplicando los estilos apropiados, estarás en camino de crear un carrito de compras visualmente atractivo y funcional en tu aplicación React. ¡No olvides experimentar y ajustar los estilos para que se adapten perfectamente a tus necesidades!
Encourage your students to engage and ask questions along the way, so they can deepen their understanding and excel in developing in React!