Cómo obtener datos de una REST API con React

React es es una de las librerías más populares en el mundo del desarrollo Web. Conocer sus mecanismos y características principales resulta muy importante si deseamos implementar soluciones en sitios o aplicaciones web. En este artículo, aprenderemos a obtener datos de una REST API utilizando React.

A continuación veremos una ejemplo detallado en cada uno de sus pasos. Tomaremos como idea una tienda online y obtendremos los datos de productos de una REST API para mostrarlos en una lista con React.

El planteo del proyecto

Para este ejemplo nos enfocaremos en un caso práctico: un sistema de que obtiene un listado y muestra productos habilitados, ordenados por precio.

Para este ejemplo Los datos que obtendremos serán un array de objetos JSON con la siguiente estructura: id de producto, nombre del producto, precio, categoría y un campo habilitado (booleano). Usaremos la versión más reciente de React y aprovecharemos el poder de los Hooks, en particular useState y useEffect.

La REST API y los datos del ejemplo

En el contexto de una tienda online, los datos de productos cambian frecuentemente. Una REST API permite gestionar esos datos de manera eficiente, interactuando con el backend para obtener la lista actualizada de productos. React, con sus Hooks, proporciona una forma sencilla y declarativa para manejar estos flujos de datos asíncronos, lo que lo convierte en una excelente opción para desarrollar aplicaciones empresariales y de comercio electrónico.

Antes de comenzar con el código, vamos a definir los datos de ejemplo que simularemos obtener desde una REST API:

[
  { "id": 1, "producto": "Laptop", "precio": 1200, "categoria": "Electrónica", "habilitado": true },
  { "id": 2, "producto": "Teclado", "precio": 40, "categoria": "Accesorios", "habilitado": false },
  { "id": 3, "producto": "Ratón", "precio": 25, "categoria": "Accesorios", "habilitado": true },
  { "id": 4, "producto": "Monitor", "precio": 300, "categoria": "Electrónica", "habilitado": true },
  { "id": 5, "producto": "Silla", "precio": 150, "categoria": "Muebles", "habilitado": false },
  { "id": 6, "producto": "Auriculares", "precio": 80, "categoria": "Accesorios", "habilitado": true },
  { "id": 7, "producto": "Micrófono", "precio": 120, "categoria": "Accesorios", "habilitado": true },
  { "id": 8, "producto": "Escritorio", "precio": 250, "categoria": "Muebles", "habilitado": true },
  { "id": 9, "producto": "Cámara Web", "precio": 60, "categoria": "Electrónica", "habilitado": false },
  { "id": 10, "producto": "Impresora", "precio": 200, "categoria": "Electrónica", "habilitado": true }
]

Como podemos ver, los datos con los que trabajaremos están representados en una array de JSON. Allí tenemos la id de producto, el nombre del producto, el precio, la categoría a la que pertenecen y el key habilitado, para saber si están disponibles en el sistema.

La aplicación en React

Para comenzar, primero, asegurémonos de tener la última versión de React instalada y un proyecto creado. Encontraremos más detalles sobre como crear un proyecto con React podemos leer la documentación: https://es.react.dev/learn.

Una vez que tenemos el proyecto listo vamos a dividir nuestra aplicación en componentes. En este ejemplo, utilizaremos los siguientes Hooks de React:

• useState para manejar el estado de los productos.
• useEffect para realizar la llamada a la API y obtener los datos cuando el componente se monte.

Llamada a la API con fetch y manejo de los datos

A continuación, crearemos un componente ProductList que se encargará de obtener los productos habilitados desde la API y mostrarlos en una lista ordenada por precio.

El código del componente es el que podemos observar a continuación:

import React, { useState, useEffect } from 'react';

const ProductList = () => {
  // Declaramos el estado para almacenar los productos
  const [products, setProducts] = useState([]);

  // Dentro de useEffect vamos a cargar los datos cuando el componente se monta
  useEffect(() => {
    // Simulamos una llamada a una API
    const fetchProducts = async () => {
      const response = await fetch('https://api.example.com/products');
      const data = await response.json();
      // Filtramos solo los productos habilitados y los ordenamos por precio
      const enabledProducts = data
        .filter(product => product.habilitado)
        .sort((a, b) => a.precio - b.precio);
      setProducts(enabledProducts);
    };

    fetchProducts();
  }, []); // [] se asegura de que useEffect se ejecute solo una vez

  // Renderizamos la lista de productos habilitados
  return (
    <div>
      <h1>Productos Disponibles</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.producto} - ${product.precio} ({product.categoria})
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Código explicado:

• useState: creamos un estado products que almacenará el array de productos. Inicialmente está vacío [].
• useEffect: este Hook ejecuta la función fetchProducts solo una vez, cuando el componente se monta, lo que hace que nuestra aplicación obtenga los datos justo al cargar la página.
• fetch: usamos fetch para simular la obtención de datos desde una REST API. En una aplicación real, esta URL podría apuntar a un backend que retorna los productos en formato JSON.
• Filtrado y Ordenación: utilizamos filter para quedarnos solo con los productos que tienen habilitado: true. Luego, ordenamos los productos por precio con sort, de menor a mayor.
• Renderizado: en el return, renderizamos una lista no ordenada (<ul>) con los productos habilitados, mostrando el nombre del producto, el precio y la categoría.

Casos de uso

Este patrón de consumo de datos desde una REST API es común en ecommerce. En lugar de almacenar los productos en el frontend, se solicita al servidor la información actualizada cada vez que sea necesario. Esto permite mantener la tienda en línea con información precisa y dinámica.

Algunos beneficios para destacar:

• Escalabilidad: las tiendas en línea pueden tener miles de productos. Con React y una REST API, es posible cargar solo los productos necesarios, optimizando el rendimiento.
• Actualización en tiempo real: si los productos cambian frecuentemente (por ejemplo, el stock o los precios), esta arquitectura permite actualizar los datos sin tener que recargar la página.

En conclusión

En este artículo, hemos desarrollado un ejemplo que nos brinda el panorama sobre cómo consumir una REST API desde React utilizando Hooks. Para este caso, mostramos una lista de productos habilitados, ordenados por precio. Este patrón es fundamental para aplicaciones empresariales, especialmente en comercio electrónico, donde los datos cambian frecuentemente.

La integración de React con diferentes orígenes de datos permite desarrollar soluciones escalables y eficientes, manteniendo la experiencia del usuario rápida y fluida. Si estamos creando una tienda online o un sistema de gestión de productos, este enfoque te permitirá manejar los datos de manera óptima, integrando React y REST APIs con facilidad.

Si te interesa saber más sobre React déjame un comentario o escríbeme un mensaje.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.