Cómo Consumir Datos desde un JSON en React: Guía Paso a Paso

Consumir datos desde un archivo JSON en React es una habilidad clave para manejar y mostrar información dinámica en tus aplicaciones web. Aprender a integrar y procesar estos datos te permite crear experiencias interactivas y fluidas, optimizando la comunicación entre tu frontend y las fuentes de datos externas.

1. Crear un Nuevo Proyecto Vite

Abre tu terminal y ejecuta:

bash

npm create vite@latest consumir-data-desde-un-archivo-json
cd consumir-data-desde-un-archivo-json 
npm install

2. Estructura del Proyecto

Crea la siguiente estructura de archivos:

bash

consumir-data-desde-un-archivo-json/
│
├── src/
│   ├── datos.json
│   ├── components/
│   │   └── JsonDataLoader.jsx
│   └── App.jsx
└── package.json

3. Crear el Archivo JSON

En src/datos.json:

json

[
  {
      "nombre": "Elena Gómez",
      "edad": 28,
      "profesion": "Desarrolladora Web"
  },
  {
      "nombre": "Diego Martínez",
      "edad": 35,
      "profesion": "Diseñador UX"
  },
  {
      "nombre": "Ana Rodríguez",
      "edad": 42,
      "profesion": "Gerente de Proyectos"
  }
]

4. Creando el Componente para Cargar los Datos

En src/components/JsonDataLoader.jsx, crea el siguiente componente para cargar y mostrar los datos del archivo JSON:

jsx

import { useState, useEffect } from "react";
import data from "../datos.json";

const JsonDataLoader = () => {
const [usuarios, setUsuarios] = useState([]);

useEffect(() => {
  // Simula la carga de datos desde un archivo JSON
  setUsuarios(data);
}, []);

return (
  <div>
    <h2>Lista de Usuarios</h2>
    <ul>
      {usuarios.map((usuario, index) => (
        <li key={index}>
          <strong>{usuario.nombre}</strong>, {usuario.edad} años - {usuario.profesion}
        </li>
      ))}
    </ul>
  </div>
);
};

export default JsonDataLoader;

Este componente utiliza el hook useState para almacenar los datos y el hook useEffect para cargarlos cuando el componente se monta.

5. ctualizar el Componente App.jsx

jsx

import JsonDataLoader from './components/JsonDataLoader'

function App() {
return (
  <div className="App">
    <JsonDataLoader />
  </div>
)
}

export default App;

Métodos Alternativos de Carga de Datos en React

Existen varios métodos para cargar datos en React, dependiendo de tus necesidades y preferencias. A continuación, exploramos dos de las formas más comunes para consumir datos desde un archivo JSON en tus aplicaciones.

1Usando el método fetch (Recomendado para datos locales o externos):

El método fetch es una forma nativa de realizar solicitudes HTTP en JavaScript. Es especialmente útil para obtener datos de archivos JSON o APIs externas. A continuación te mostramos cómo cargar los datos desde un archivo JSON utilizando fetch.

jsx

useEffect(() => {
const fetchData = async () => {
  try {
    const response = await fetch('/datos.json');
    const jsonData = await response.json();
    setData(jsonData); // Almacenamos los datos en el estado
    setLoading(false);  // Desactivamos el estado de carga
  } catch (err) {
    setError('Error al cargar datos');  // Capturamos cualquier error
    setLoading(false);  // Desactivamos el estado de carga en caso de error
  }
};

fetchData();
}, []);

Estamos utilizando el hook useEffect para cargar los datos al montar el componente. Se realiza una solicitud a datos.json y se manejan tanto los datos como los errores.

2Usando Axios (Una alternativa más robusta):

Si prefieres usar una librería externa para realizar solicitudes HTTP, Axios es una opción popular. Ofrece más funcionalidades como interceptores y una sintaxis más limpia para manejar errores y respuestas.

Primero, instala Axios:

bash

npm install axios

Luego, utiliza el siguiente código para cargar los datos desde el archivo JSON usando Axios:

jsx

import axios from 'axios';

useEffect(() => {
const fetchData = async () => {
  try {
    const response = await axios.get('/datos.json');
    setData(response.data);  // Almacenamos los datos en el estado
    setLoading(false);  // Desactivamos el estado de carga
  } catch (err) {
    setError('Error al cargar datos');  // Capturamos cualquier error
    setLoading(false);  // Desactivamos el estado de carga en caso de error
  }
};

fetchData();
}, []);

Con Axios, la sintaxis es muy similar, pero tiene la ventaja de manejar automáticamente la conversión de la respuesta a JSON y permite un control más fino sobre las solicitudes HTTP.