Consulta de Datos de Productos desde una API

Aquí tienes un ejemplo completo para tu blog post que muestra cómo representar datos de productos desde una API, incluyendo primero una simulación con datos JSON.

Simulación de Datos de la API

Antes de conectar con una API real, podemos simular los datos que recibiríamos. Esto es útil para desarrollo y pruebas:

javascript

Copy

Download

// datosSimulados.js
export const productosSimulados = [
  {
    id: 1,
    nombre: "Laptop Pro",
    descripcion: "Laptop de última generación con 16GB RAM y SSD 512GB",
    precio: 1299.99
  },
  {
    id: 2,
    nombre: "Smartphone Elite",
    descripcion: "Teléfono inteligente con cámara de 48MP y pantalla AMOLED",
    precio: 799.99
  },
  {
    id: 3,
    nombre: "Tablet Lite",
    descripcion: "Tablet de 10 pulgadas con 128GB de almacenamiento",
    precio: 349.99
  },
  {
    id: 4,
    nombre: "Auriculares Bluetooth",
    descripcion: "Auriculares inalámbricos con cancelación de ruido",
    precio: 199.99
  }
];

Componente para Mostrar Productos

Ahora creemos un componente React que muestre estos productos, primero con datos simulados y luego con una petición real a una API:

jsx

Copy

Download

import React, { useState, useEffect } from 'react';
import { productosSimulados } from './datosSimulados';

const ListaProductos = () => {
  const [productos, setProductos] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [error, setError] = useState(null);
  const [modoSimulado, setModoSimulado] = useState(true);

  // Función para cargar productos simulados
  const cargarProductosSimulados = () => {
    setCargando(true);
    try {
      // Simulamos un retraso de red como si fuera una API real
      setTimeout(() => {
        setProductos(productosSimulados);
        setCargando(false);
      }, 1000);
    } catch (err) {
      setError("Error al cargar datos simulados");
      setCargando(false);
    }
  };

  // Función para cargar productos desde API real
  const cargarProductosDesdeAPI = async () => {
    setCargando(true);
    try {
      const response = await fetch('https://api.ejemplo.com/productos');
      if (!response.ok) {
        throw new Error('Error al obtener productos');
      }
      const data = await response.json();
      setProductos(data);
    } catch (err) {
      setError(err.message);
      console.error('Error:', err);
    } finally {
      setCargando(false);
    }
  };

  useEffect(() => {
    if (modoSimulado) {
      cargarProductosSimulados();
    } else {
      cargarProductosDesdeAPI();
    }
  }, [modoSimulado]);

  if (cargando) {
    return <div>Cargando productos...</div>;
  }

  if (error) {
    return <div className="error">Error: {error}</div>;
  }

  return (
    <div>
      <h2>Lista de Productos</h2>
      
      <button onClick={() => setModoSimulado(!modoSimulado)}>
        {modoSimulado ? 'Usar API Real' : 'Usar Datos Simulados'}
      </button>
      
      <div className="productos-container">
        {productos.map((producto) => (
          <div key={producto.id} className="producto-card">
            <h3>{producto.nombre}</h3>
            <p>{producto.descripcion}</p>
            <p className="precio">${producto.precio.toFixed(2)}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ListaProductos;

Explicación del Código

1. Datos Simulados: Creamos un array de objetos que simulan la respuesta de una API real, cada uno con id, nombre, descripción y precio.

2. Estados del Componente:

   • productos: Almacena la lista de productos

   • cargando: Indica si la petición está en curso

   • error: Almacena mensajes de error

   • modoSimulado: Alterna entre datos simulados y API real

3. Funciones de Carga:

   • cargarProductosSimulados: Simula una petición a API con setTimeout

   • cargarProductosDesdeAPI: Realiza una petición fetch a una API real

4. useEffect: Se ejecuta cuando cambia modoSimulado para cargar los datos correspondientes

5. Renderizado Condicional: Muestra estados de carga, error o la lista de productos según corresponda

Estilos Básicos (opcional para tu post)

Puedes añadir estos estilos CSS para mejorar la presentación:

css

Copy

Download

.productos-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.producto-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  transition: transform 0.2s;
}

.producto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.precio {
  font-weight: bold;
  color: #2e7d32;
}

.error {
  color: #c62828;
  font-weight: bold;
}

button {
  padding: 8px 16px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

button:hover {
  background-color: #1565c0;
}

Conclusión

Este ejemplo muestra cómo:

1. Simular datos de API para desarrollo

2. Hacer peticiones reales con fetch

3. Manejar estados de carga y error

4. Alternar entre modos de desarrollo y producción

Puedes extender este ejemplo añadiendo más funcionalidades como búsqueda, filtrado o paginación.