Conectar una aplicación React con una API externa es uno de los pasos más importantes para construir un e-commerce funcional. Aquí se explica cómo leer la documentación de una API pública, hacer el fetch de datos, almacenarlos en el estado del componente y renderizar múltiples cards de productos con una grid responsive usando Tailwind CSS.
¿Por qué es fundamental leer la documentación antes de consumir una API?
Antes de escribir una sola línea de código, lo primero es entender qué datos ofrece la API [0:30]. En este caso se utiliza la API pública de Platzi disponible en fakeapi.platzi.com. La documentación muestra los endpoints disponibles, el formato de las respuestas y la estructura de cada producto: ID, título, precio, descripción, categoría e imágenes [2:07].
Conocer esta estructura permite planificar qué información pintar en cada card y anticipar si se necesita alguna transformación de datos. Si trabajas en un equipo donde no existe documentación formal, la recomendación es explorar las respuestas del endpoint directamente para comprender qué se recibe.
¿Cómo funciona el flujo de datos entre la API, el estado y las cards?
El componente Home es el encargado de ir a la API, traer los productos y distribuirlos a cada card [2:30]. El flujo se resume así:
- Home realiza la petición a la API en la nube.
- La respuesta se almacena en el estado (state) del componente.
- Con esos datos almacenados, Home renderiza tantas cards como productos existan.
¿Qué es el state en React?
El state o estado es como una cajita dentro del componente donde se guarda información que puede cambiar con el tiempo [3:45]. En React se crea con el hook useState, que devuelve dos elementos: la variable con el valor actual y una función para actualizarla.
jsx
import { useState, useEffect } from 'react';
const [items, setItems] = useState(null);
items almacena los productos que vienen de la API.setItems es la función que inyecta los datos dentro de items.- El valor por defecto puede ser
null, un array vacío, un objeto o cualquier tipo de dato según la necesidad [5:10].
¿Por qué se usa useEffect para consumir una API?
El hook useEffect encapsula la lógica de efectos secundarios como llamadas a APIs [5:40]. Cada vez que se piensa en consumo de datos externos, useEffect es la herramienta indicada. Recibe una función y un array de dependencias; cuando el array está vacío, el efecto se ejecuta solo al montar el componente.
jsx
useEffect(() => {
fetch('https://api.escuelajs.co/api/v1/products')
.then(r => r.json())
.then(data => setItems(data));
}, []);
- fetch envía la petición al endpoint [6:20].
- El primer
.then convierte la respuesta a formato JSON.
- El segundo
.then recibe la data ya transformada y la guarda en el estado con setItems.
Usar console.log en cada paso ayuda a verificar qué formato tiene la respuesta antes de procesarla [7:00].
¿Cómo se renderizan múltiples cards con los datos de la API?
Con los productos almacenados en items, se utiliza el método .map() para iterar sobre el array y generar una card por cada producto [8:50].
jsx
{items?.map(item => (
<Card key={item.id} data={item} />
))}
- El operador
?. verifica que items exista antes de iterar.
- key es una propiedad obligatoria en React que identifica de forma única cada elemento de la lista; se usa el
id del producto [11:30].
- La prop
data envía la información de cada producto al componente Card.
¿Cómo recibe el componente Card la información?
El componente Card se prepara para recibir un objeto a través de sus props [10:15]. Dentro de Card se accede a cada propiedad del producto:
jsx
function Card({ data }) {
return (
<div>
<img src={data.images[0]} alt={data.title} />
<span>{data.category.name}</span>
<h3>{data.title}</h3>
<p>${data.price}</p>
</div>
);
}
data.category.name muestra el nombre de la categoría [12:00].data.images[0] toma la primera imagen del array de imágenes [13:30].data.title y data.price completan la información visible de cada card [14:10].
¿Cómo crear un layout en grid con Tailwind CSS?
Para organizar las cards en filas y columnas se envuelven dentro de un contenedor con clases de Tailwind [15:20]:
jsx
<div className="grid grid-cols-4 gap-4 w-full max-w-screen-lg">
{items?.map(item => (
<Card key={item.id} data={item} />
))}
</div>
grid activa el sistema de cuadrícula CSS.grid-cols-4 define cuatro columnas.gap-4 agrega espaciado uniforme entre filas y columnas.w-full ocupa el cien por ciento del ancho disponible.max-w-screen-lg establece un ancho máximo para evitar que el contenido se estire en pantallas grandes.
Con estas clases aplicadas, las cards se distribuyen ordenadamente en una cuadrícula que facilita la visualización de los productos del e-commerce. Comparte en los comentarios cómo quedó tu grid y qué ajustes le hiciste al diseño.
