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 veras 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.