La integración con APIs es una parte esencial del desarrollo de aplicaciones modernas. React facilita este proceso, permitiéndote interactuar con APIs externas para obtener, enviar, o manipular datos en tiempo real.

¿Qué es una API?

Una API (Application Programming Interface) es un intermediario que permite la comunicación entre diferentes aplicaciones o servicios. En el contexto de React, las APIs se utilizan para:

• Obtener datos dinámicos de un servidor.
• Enviar información al backend.
• Integrar servicios externos como mapas, pagos o redes sociales.

Métodos comunes para trabajar con APIs

En React, los métodos más comunes para interactuar con APIs son:

1. fetch: Una API nativa de JavaScript para realizar solicitudes HTTP.
2. axios: Una librería popular que simplifica las solicitudes HTTP.

Uso de fetch

Ejemplo básico: Obtener datos

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

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('<https://jsonplaceholder.typicode.com/users>')
      .then((response) => response.json())
      .then((data) => setUsers(data))
      .catch((error) => console.error('Error:', error));
  }, []);

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

export default Users;

Manejo de errores

Es importante manejar los errores en caso de que la solicitud falle:

fetch('<https://jsonplaceholder.typicode.com/users>')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Error en la solicitud');
    }
    return response.json();
  })
  .catch((error) => console.error('Error:', error));