Consumir una API en React es uno de los pasos clave para convertir un proyecto estático en un e-commerce funcional. Aquí aprenderás a leer la documentación de la Fake Store API de Platzi, traer los productos con fetch, guardarlos en un estado y renderizarlos como cards dinámicas con Tailwind.

Por qué leer la documentación antes de consumir una API

Antes de escribir una sola línea de código, conviene revisar la documentación del endpoint. Ahí encuentras qué datos vas a recibir y cómo están estructurados, lo que evita transformaciones innecesarias después [01:25].

La API pública que vamos a usar vive en fakeapi.platzi.com y expone un endpoint de productos que devuelve un array de objetos. Cada objeto trae un id, title, price, description, category e images, justo lo que necesitas para pintar productos y filtrarlos por categoría más adelante [02:30].

¿Qué es un endpoint? Es la URL específica de una API a la que haces una petición para obtener o enviar datos. En este caso, hacer un GET a la URL de productos te devuelve la lista completa.

Cómo se conectan home, la API y las cards

Piensa en la API como una biblioteca de datos en la nube, ajena a tu proyecto. Tu página Home es quien va a tocarle la puerta, pedir los productos y luego repartirlos a cada card [04:10].

Si recibes 10 productos, Home no va a renderizar una sola card: va a multiplicarla por 10. Esa multiplicación se hace iterando el array con .map(), y cada card recibe los datos de un producto distinto.

Cómo guardar la respuesta de la API en un estado de React

Para almacenar los productos que llegan de la nube, React usa el hook useState. Imagínalo como una cajita donde el componente padre guarda información y, cuando esa cajita cambia, los componentes hijos se actualizan solos [05:50].

La sintaxis es directa: declaras una constante con dos elementos, el valor y la función que lo actualiza.

jsx const [items, setItems] = useState(null);

• items: la cajita donde se guardan los productos.
• setItems: la función que inyecta nuevos valores a esa cajita.
• null: el valor inicial mientras la API aún no responde.

¿Cuándo uso useState? Cada vez que un componente necesita recordar información que puede cambiar con el tiempo, como datos de una API, inputs de formularios o filtros activos.

Cómo hacer el fetch dentro de useEffect

Siempre que pienses en consumir una API en React, piensa en useEffect. Este hook encapsula efectos secundarios y se ejecuta cuando el componente se monta, lo que lo hace perfecto para llamadas de red [07:40].

jsx useEffect(() => { fetch('https://api.escuelajs.co/api/v1/products') .then((r) => r.json()) .then((data) => setItems(data)); }, []);

El array vacío al final indica que el efecto solo corre una vez. La respuesta de fetch llega como una promise, así que necesitas dos .then: el primero la transforma a JSON, el segundo te entrega los datos listos para guardar con setItems.

Cómo renderizar las cards con map y pasar props

Con los datos ya en el estado, falta pintarlos. Para eso, dentro del JSX abres llaves, preguntas si items existe y aplicas .map() para devolver una card por cada producto [10:15].

jsx {items && items.map((item) => ( <Card key={item.id} data={item} /> ))}

Dos detalles importantes acá:

• La prop data es el nombre que elegiste para pasar el objeto del producto al componente hijo.
• La key con item.id es obligatoria en React para identificar cada elemento del array y optimizar el renderizado.

Cómo acceder a los datos dentro del componente Card

Dentro de Card, recibes las props y accedes a la información con notación de punto. Como el objeto llega envuelto en la prop data, terminas escribiendo data.data para llegar al producto real [13:20].

jsx function Card({ data }) { return ( <div> <p>{data.category.name}</p> <img src={data.images[0]} alt={data.title} /> <h2>{data.title}</h2> <span>${data.price}</span> </div> ); }

Fíjate que images es un array, por eso accedes a la posición [0] para mostrar la primera imagen. Y category.name te entrega el nombre de la categoría, que será clave cuando implementes filtros en el navbar.

Cómo crear un layout responsive con CSS Grid y Tailwind

Mostrar 212 productos uno debajo de otro no es agradable. La solución es envolver el .map() en un div que funcione como wrapper con clases de Tailwind para CSS Grid [16:30].

jsx

<div className="grid grid-cols-4 gap-4 w-full max-w-screen-lg"> {items && items.map((item) => ( <Card key={item.id} data={item} /> ))} </div>

Estas son las clases que hacen el trabajo:

• grid: activa CSS Grid en el contenedor.
• grid-cols-4: define cuatro columnas.
• gap-4: separa filas y columnas con un espacio uniforme.
• w-full: ocupa el 100% del ancho disponible.
• max-w-screen-lg: limita el ancho máximo para que el diseño no se estire en pantallas grandes.

¿Por qué usar max-w-screen-lg? Evita que tu grid se expanda de borde a borde en monitores grandes y mantiene la lectura cómoda al fijar un ancho máximo controlado.

Un pequeño typo como escribir gris en vez de grid puede dejar tu layout roto sin error visible, así que revisa siempre los nombres de las clases cuando algo no se vea como esperas.

Con esto ya tienes el flujo completo: API consumida, estado poblado, cards renderizadas y un grid limpio. ¿Cómo te quedaron tus cards? Compártelo en los comentarios y muéstrame tu versión del layout.