Conectando la API
Estos son los endpoints disponibles en nuestra api:
Route
HTTP Verb
Route Middleware
Description
/api/users
GET
isAuthenticated
Obtiene lista de usuarios
/api/users
POST
Crea un nuevo usuario
/api/users/:id
GET
isAuthenticated
Obtiene un solo usuario
/api/products/
GET
Obtiene la lista de productos
/api/products/:id
GET
isAuthenticated
Obtiene el detalle del producto
/api/products
POST
Crea a nueva producto
Para obtener los datos nuestra api vamos a utilizar `fetch`.
API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, como peticiones y respuestas. Esta es la API nativa del navegador que nos va brindar la opción de comunicarnos con nuestro backend.
Otener los productos
Vamos a crear un metodo en nuestro Pagina de home `Home.jsx`
const API = 'https://shopping-cart-api.khriztianmoreno.now.sh/api/products';
const getProducts = async(setProducts) => {
try {
const result = await fetch(API);
const products = await result.json();
setProducts(products);
} catch (error) {
console.error('Error :(', error);
}
}
Este metodo va a llamar a la api `/products` que consulta todos los productos disponibles en nuestra base de datos. Estos productos vamos agregarlos al estado interno del componente usando el hook useState que pasaremos como parametro a esta función (setProducts)
Queremos que al entrar a nuestra pagina inmediatamente se ejecute nuestra función y obtenga los productos, para eso vamos a usar el hook useEffect.
import React, { useEffect, useState } from 'react';
import Header from '../components/Header';
import Product from '../components/Product';
const API = 'https://shopping-cart-api.khriztianmoreno.now.sh/api/products';
const getProducts = async(setProducts) => {
try {
const result = await fetch(API);
const products = await result.json();
setProducts(products);
} catch (error) {
console.error('Error :(', error);
}
}
const Home = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
getProducts(setProducts)
}, []);
return (
<>
<Header />
<div className="container mt-4">
<div className="row">
{ /*inicio render de lista de productos*/ }
<div key={idx} className="col-lg-4 col-md-6 mb-4">
<Product {...product} />
</div>
{ /*final render de lista de productos*/ }
</div>
</div>
</>
);
}
export default Home;
Retos:
Luego de obtener los productos deberas mostrar estos en la vista, para eso debes usar el componente Product y recorrer el arreglo de productos usando
map
.Ve a la pagina de detalle y haz el mismo proceso pero esta vez llama al endpoint del detalle del producto. (Recuerda que debes capturar el id a traves de la URL, para enviarlo a tu endpoint).
Last updated
Was this helpful?