Exploiter la puissance des appels d'API React

React est une bibliothèque JavaScript gratuite et open-source que de nombreux développeurs web utilisent pour créer des pages web sophistiquées et attrayantes. Elle fait également partie de la populaire pile de développement technologique MERN sur laquelle de nombreux développeurs s'appuient pour créer des applications web ou mobiles.

💡

Apidog est une plateforme de développement d'API tout-en-un avec tout ce qu'un développeur d'API recherche dans un outil d'API. Avec Apidog, vous pouvez facilement construire, tester, simuler, déboguer et simuler des API.

Si vous avez des fichiers API que vous souhaitez tester, vous pouvez les importer sur Apidog et commencer à les tester. Il vous suffit de cliquer sur le bouton ci-dessous pour commencer ! 👇 👇 👇

button

Pour que les applications React interagissent ou communiquent avec des systèmes tiers, elles doivent exécuter un appel d'API. Pour bien comprendre ce concept, cet article présentera les appels d'API React, des exemples concrets d'appels d'API React avec des extraits de code inclus, et des exemples concrets d'appels d'API React couramment utilisés.

Que sont les appels d'API [React] ?

Les appels d'API (Application Programming Interface) sont essentiels pour permettre la communication et les données entre différents programmes ou systèmes. Les appels d'API peuvent être considérés comme l'ensemble complet, agissant comme des requêtes et des réponses entre deux logiciels.

Pour comprendre comment fonctionnent les appels d'API React, une simple démonstration sera montrée.

Montrer comment faire un appel d'API React

Cela commence d'abord lorsqu'une application React doit accéder à une certaine donnée ou fonctionnalité d'un autre programme. C'est à ce moment-là qu'elle envoie un appel d'API, qui peut également être appelé une requête structurée. La requête d'appel d'API typique comprendra :

Un point de terminaison : Les points de terminaison sont les adresses spécifiques au sein de l'API qui définissent quelles informations sont demandées ou quelle action doit être entreprise.
Une méthode : Les méthodes sont les types d'opérations qui sont demandées. Elles se présentent sous des formes telles que GET pour récupérer des enregistrements de données, POST pour créer de nouveaux enregistrements de données, PUT pour mettre à jour des enregistrements de données existants et DELETE pour supprimer des enregistrements de données.
Toute donnée supplémentaire : Il existe de nombreuses informations supplémentaires facultatives que vous pouvez choisir d'inclure dans la requête pour que le programme récepteur les utilise. Ceux-ci peuvent inclure des paramètres de chemin ou de requête supplémentaires.

Une fois que le programme récepteur reçoit l'appel d'API React, il traitera votre requête et renverra une réponse. Une réponse d'appel d'API comprendra généralement :

Données demandées : La réponse peut inclure les données que vous avez demandées, ou peut-être le résultat de la réussite ou non de l'opération ou de l'action.
Code d'état : Un code d'état indique l'état de l'appel/ Il existe des codes d'état pour la réussite ( 200 ) et l'échec ( 400 et 404 ).

Aspects positifs des appels d'API React

En utilisant les appels d'API pour les applications React, vous serez encouragé à suivre une certaine structure, ce qui peut être assuré, vous sera bénéfique à long terme.

Développement modulaire : La création avec des API encourage la conception modulaire, permettant aux développeurs de créer des composants plus petits et autonomes qui peuvent facilement interagir les uns avec les autres.
Réutilisation du code : Avec les appels d'API, le code peut être réutilisé par plusieurs programmes, favorisant un développement et une maintenance efficaces du code.
Partage de données : Les API facilitent l'échange de données entre différents systèmes, permettant des fonctionnalités puissantes et intégrées.

Exemples concrets d'appels d'API React

1. Sites Web de commerce électronique :

ecommerce websites react api calls — Les sites Web de commerce électronique utilisent les appels d'API

Listes de produits : React peut récupérer des informations et des images de produits à partir d'une API pour renseigner les listes de produits sur le site Web. Les utilisateurs peuvent ensuite filtrer, trier et rechercher ces produits en fonction de divers critères.
Paniers d'achat : Lorsqu'un utilisateur ajoute un article à son panier, React peut envoyer un appel d'API pour mettre à jour les données du panier d'achat sur le serveur, garantissant la cohérence et permettant d'autres actions comme le paiement.

2. Plateformes de médias sociaux :

social media api calls — Certaines des plateformes de médias sociaux populaires utilisent les appels d'API

Flux et mises à jour : React peut récupérer des données à partir d'API de médias sociaux pour afficher les flux des utilisateurs, les mises à jour des actualités ou les sujets tendances. Cela permet des mises à jour de contenu dynamiques sans rechargements complets de la page.
J'aime, commentaires et partages : Lorsqu'un utilisateur interagit avec une publication (j'aime, commentaires, partages), React peut envoyer un appel d'API pour mettre à jour les informations correspondantes sur le serveur, reflétant l'action et mettant à jour l'interface utilisateur pour les autres utilisateurs en temps réel.

3. Applications météorologiques :

weather apps api call react — Les applications météorologiques s'appuient également sur les appels d'API pour les données

Récupération des données météorologiques : React peut utiliser les API météorologiques pour récupérer les données météorologiques actuelles et prévisionnelles pour un emplacement spécifique. Ces données peuvent ensuite être affichées dans un format convivial avec des visuels embellis.
Mises à jour de l'emplacement : En fonction de la saisie de l'utilisateur ou de la géolocalisation, React peut envoyer dynamiquement des appels d'API pour mettre à jour les informations météorologiques affichées en fonction de l'emplacement actuel de l'utilisateur.

Exemple de code d'appel d'API React : Récupération de données à partir d'une API publique à l'aide de l'API Fetch

Voici un exemple de la façon de récupérer des données à partir d'une API publique à l'aide de l'API Fetch pour mettre à jour l'état d'une application (ou d'un composant) React.

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Fetched data</h1>
      {data.length > 0 ? (
        <ul>
          {data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default App;

Exemple de code d'application React simple

Explication du code :

1. Importation des composants nécessaires :

useState est utilisé pour gérer l'état du composant (données).
useEffect est utilisé pour effectuer d'autres opérations comme la récupération de données.

2. Définir le composant App :

Le hook useState crée une variable d'état data pour stocker les données récupérées, initialisée comme un tableau vide.

3. Hook useEffect :

Ce hook s'exécute après le montage du composant (similaire aux méthodes du cycle de vie).
le hook useEffect définit une fonction async fetchData pour récupérer les données.
L'API Fetch est utilisée pour envoyer une requête GET au point de terminaison de l'API spécifié.
La réponse est analysée en tant que JSON à l'aide de response.json().
Les données récupérées sont ensuite utilisées pour mettre à jour l'état data à l'aide de setData.

4. Instruction de retour :

L'instruction de retour affiche un élément <h1> avec le titre "Fetched data".
L'instruction de retour affiche également conditionnellement les données : si data a des éléments, elle les parcourt et affiche le titre de chaque publication dans un élément <li>.
Si les données sont toujours en cours de chargement, elle affiche un message Loading data....

Apidog - Plateforme de développement d'API pour tester les appels d'API React

Apidog est un outil de développement d'API tout-en-un créé avec une orientation design-first. Avec une conception d'interface utilisateur simpliste et intuitive, Apidog encourage ses utilisateurs à concevoir et à créer visuellement des API.

create new project apidog — Création d'un nouveau projet sur Apidog

button

Si vous devez tester vos appels d'API React, vous pouvez utiliser Apidog pour le faire ! Cette section suivante montrera une simple démonstration.

Importer l'appel d'API React sur Apidog

Avant de pouvoir commencer à tester votre appel d'API React, nous devons d'abord importer le fichier.

import different file types onto Apidog — Importer différents types de fichiers sur Apidog

Appuyez d'abord sur la section Importer des données que vous trouverez après avoir appuyé sur le bouton Paramètres, comme indiqué sur l'image ci-dessus. Ici, vous pouvez faire glisser votre fichier d'API React vers la fenêtre Apidog.

Génération du code de l'API React Fetch à l'aide d'Apidog

Si vous avez besoin d'aide pour écrire du code React Fetch API, vous pouvez compter sur Apidog pour vous fournir un générateur de code client en un clic.

generating client code using apidog — Sélectionner Générer le code client

Tout d'abord, recherchez le bouton </> qui se trouve dans le coin supérieur droit de l'application de la fenêtre Apidog.

Vous pouvez ensuite sélectionner JavaScript. Le choix par défaut est le code Fetch que nous pouvons copier pour une utilisation ultérieure.

Conclusion

Les appels d'API React sont un composant important à comprendre, surtout si vous prévoyez de créer des applications basées sur React. Avec les appels d'API React, vous pouvez créer une variété d'applications - il vous suffit de trouver des API compatibles qui fournissent les fonctionnalités ou les données dont vous avez besoin.

Apidog est une plateforme d'API tout-en-un appropriée qui offre une interface confortable mais élégante pour que les utilisateurs puissent en profiter. Si vous avez besoin d'un endroit pour tester vos appels d'API React, essayez Apidog !