Creación de un Componente User List con Fetch en React

La capacidad de consumir datos de APIs externas es una habilidad fundamental para cualquier desarrollador web moderno. Mediante el uso de fetch, podemos conectar nuestras aplicaciones React con servicios externos y mostrar información dinámica a nuestros usuarios. Esta técnica nos permite crear interfaces más ricas y funcionales que se actualizan con datos reales.

¿Cómo realizar llamadas a APIs en React usando fetch?

Fetch es una API incorporada en la mayoría de los navegadores modernos que nos permite realizar peticiones HTTP. Su principal ventaja es que está basada en promesas, lo que facilita el manejo de operaciones asíncronas como la obtención de datos desde servidores externos.

Para implementar llamadas a APIs en React, seguiremos estos pasos:

1. Crear un componente para mostrar los datos.
2. Configurar un estado para almacenar la información recibida.
3. Utilizar useEffect para realizar la llamada a la API.
4. Procesar la respuesta y actualizar el estado.
5. Renderizar los datos en la interfaz de usuario.

Creación del componente UserList

Primero, necesitamos crear un nuevo componente que se encargará de mostrar la lista de usuarios:

// UserList.jsx
import { useState, useEffect } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);
  
  return (
    <div>
      <h1>Usuarios</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

En este componente:

• Creamos un estado con useState para almacenar los usuarios, inicializándolo como un array vacío.
• Utilizamos useEffect para realizar efectos secundarios, en este caso, la llamada a la API.
• Implementamos fetch para obtener datos de JSONPlaceholder, una API de prueba que proporciona datos de usuarios.
• Procesamos la respuesta convirtiéndola a formato JSON y actualizando el estado.
• Manejamos posibles errores con un bloque catch.
• Renderizamos los datos utilizando el método map para crear elementos de lista con los nombres de los usuarios.

Entendiendo el hook useEffect

El hook useEffect es fundamental para manejar operaciones asíncronas en React:

useEffect(() => {
  // Código para el efecto secundario
  
  // Opcional: función de limpieza
  return () => {
    // Código de limpieza
  };
}, []); // Array de dependencias

• La función dentro de useEffect contiene el código que queremos ejecutar.
• El array de dependencias (segundo parámetro) controla cuándo se ejecuta el efecto:
  • Array vacío []: el efecto se ejecuta solo una vez, después del primer renderizado.
  • Con dependencias [dep1, dep2]: el efecto se ejecuta cuando cambia alguna dependencia.
  • Sin segundo parámetro: el efecto se ejecuta en cada renderizado.

En nuestro caso, usamos un array vacío porque solo queremos hacer la llamada a la API una vez, cuando el componente se monta.

Procesando la respuesta de la API

Cuando trabajamos con fetch, es importante entender el flujo de la promesa:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json()) // Convertir respuesta a JSON
  .then(data => setUsers(data))      // Usar los datos
  .catch(error => console.error('Error fetching data:', error)); // Manejar errores

1. Primera promesa: fetch devuelve una promesa que se resuelve con un objeto Response.
2. Conversión a JSON: llamamos a response.json() que también devuelve una promesa.
3. Uso de datos: cuando la segunda promesa se resuelve, obtenemos los datos en formato JavaScript.
4. Manejo de errores: capturamos cualquier error que ocurra durante el proceso.

Renderizando datos dinámicos

Para mostrar los datos obtenidos de la API, utilizamos el método map para transformar cada objeto de usuario en un elemento de la interfaz:

<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>
  ))}
</ul>

Es importante proporcionar una prop key única para cada elemento de la lista. En este caso, utilizamos el id del usuario que viene directamente de la API, lo que es más eficiente que usar el índice del array.

¿Cómo integrar el componente en nuestra aplicación?

Una vez creado nuestro componente UserList, debemos importarlo y utilizarlo en nuestro componente principal:

import UserList from './UserList';
import StaticComponent from './StaticComponent';

function App() {
  return (
    <div className="App">
      <StaticComponent />
      <UserList />
    </div>
  );
}

export default App;

De esta manera, nuestra aplicación mostrará tanto los datos estáticos (del componente StaticComponent) como los datos dinámicos obtenidos de la API (a través del componente UserList).

¿Qué más podemos mostrar de los usuarios?

La API de JSONPlaceholder proporciona varios campos para cada usuario, no solo el nombre. Podríamos expandir nuestro componente para mostrar más información, como el email, la ciudad o el nombre de la empresa:

<ul>
  {users.map(user => (
    <li key={user.id}>
      <strong>{user.name}</strong> - {user.email}
      <p>Ciudad: {user.address.city}</p>
    </li>
  ))}
</ul>

Observa cómo accedemos a propiedades anidadas como user.address.city para obtener la ciudad del usuario. Esto es posible porque los datos que recibimos de la API tienen una estructura jerárquica.

Dominar el consumo de APIs con fetch en React te permitirá crear aplicaciones más dinámicas y conectadas con servicios externos. ¿Qué otros datos te gustaría mostrar de los usuarios? ¿Quizás su teléfono o el nombre de su empresa? Comparte en los comentarios cómo implementarías estas mejoras en el componente UserList.