Cartas Dinámicas en React con Estilos en CSS

Las cartas dinámicas en React permiten mostrar contenido de manera flexible e interactiva. En este blog, aprenderemos a crear un componente de tarjetas dinámicas para productos, utilizando props, mapeo de datos y estilos en CSS.

✅ Crear un componente reutilizable de tarjeta (Card.jsx). 

✅ Renderizar listas dinámicas de productos (CardList.jsx). 

✅ Aplicar estilos CSS para mejorar la apariencia.

1️⃣ Creando el Componente

El siguiente código define un componente reutilizable de tarjeta (Card.jsx), que recibe los datos del producto a través de props.

✅ Explicación:

• Se usa props (nombre, descripcion, precio, imagen) para recibir información del producto.
• La estructura del div crea una tarjeta con imagen, nombre, descripción, precio y botón.

2️⃣ Renderizando Varias Cartas en

En CardList.jsx, generamos dinámicamente una lista de productos y la renderizamos usando el método.

✅ Explicación:

• Se define un array de productos con id, nombre, descripcion, precio e imagen.
• Usamos .map() para recorrer cada producto y generar un componente `` dinámicamente.
• Cada tarjeta tiene una **propiedad **`` para evitar advertencias en React.

3️⃣ Estilos CSS para

Para mejorar la presentación, aplicamos estilos en card.css.

✅ Explicación:

• Se usa CSS Grid (grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) para una cuadrícula adaptable.
• Sombra y efecto hover (transform: scale(1.05)) para un diseño interactivo.
• Botón estilizado con background-color y efecto hover.