Aller au contenu principal

Se connecter a une API sur React

Pour se connecter à une API avec React, vous pouvez utiliser la bibliothèque Fetch, qui est incluse dans React par défaut, ou une bibliothèque tierce telle que Axios. Voici un exemple de code qui montre comment utiliser Fetch pour se connecter à une API et récupérer des données :


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

const App = () => {
const [data, setData] = useState(null);

useEffect(() => {
// Appeler l'API lorsque le composant est monté
fetch('https://my-api.com/endpoint')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error(error));
}, []);

// Afficher les données de l'API une fois qu'elles sont disponibles
return data ? <p>{data}</p> : <p>Loading...</p>;
};

export default App;

Ce code utilise la fonction useEffect de React pour effectuer un appel à l'API lorsque le composant est monté.

  • La fonction fetch est utilisée pour envoyer une requête à l'API
  • puis la réponse est transformée en JSON et stockée dans l'état local du composant en utilisant la fonction setData.
  • Pour finir, les données sont affichées dans le rendu du composant lorsqu'elles sont disponibles.