Comment appeler l'API Web avec le crochet useEffect dans React TypeScript ?

17 février 2022

13 octobre 2022

Pooja Sharma

Comment appeler l'API Web avec le crochet useEffect dans React TypeScript ?

Dans cet article, nous aimerions vous présenter un Hooks recherché dans un monde React connu sous le nom de useEffect & useState crochet qui sont largement utilisés dans la programmation React, et pour vous aider à démarrer sur la voie de l'ajout de types supplémentaires pour vos normes de codage TypeScript. Alors, commençons. 

Dans le monde des développeurs React, les interfaces de programmation d'applications Web (API) sont des morceaux de code intérieurs sur une conception d'application d'une seule page (SPA). Les API sont la première étape permettant aux applications d'interagir par programmation avec les serveurs afin de fournir aux programmeurs des données en temps réel et d'enregistrer les modifications d'un programmeur. Dans une application React, vous pouvez utiliser des API pour charger les préférences du programmeur, afficher les informations de l'utilisateur pour récupérer les détails de configuration ou les informations de sécurité et enregistrer les mises à jour ou les modifications de l'état de l'application.

Alors, qu'est-ce qu'on va faire exactement :

Nous allons utiliser la useEffet et utiliserÉtat Crochet pour récupérer et afficher des informations dans notre application Web factice à l'aide de l'API JSON Placeholder à des fins d'apprentissage. Nous devrons charger des informations lors du premier montage d'un composant et enregistrer les entrées d'un client avec une API. Nous pouvons vous assurer qu'après la fin de ce blog, vous pourrez créer votre propre application React pour une variété d'API.

Ce qu'il faut savoir avant de passer à la mise en œuvre pratique :

Qu'est-ce que useEffect ?

La useEffet Hook est un crochet dans React qui vous permet d'exécuter des effets secondaires dans vos composants React.

Voici des exemples d'effets secondaires : 

1. Récupérer des données quelque part.

2. Mettre à jour directement quelque chose dans le DOM.

3. Réglage ou suppression de minuteries telles que setTimeout or définirIntervalle.

useEffet les crochets acceptent les deux arguments. Le premier argument est un fonction qui est obligatoire, et le deuxième argument est dépendance, ou certains l'appellent un tableau de dépendance par sa structure this [] bien que ce soit facultatif mais très utile et pratique.

Si le tableau No Dependency est passé, alors :

useEffect(() => {
  //It will Run or Execute on every render or every time.
});

Si, tableau vide est passé alors :

useEffect(() => {
  //It will Run or Execute only on the first render or for just one time.
}, []);

Mise en situation :

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

export const App = () => {
  const [result, setResult] = useState<number | undefined>();
  useEffect(() => {
    add();
  });

  function add() {
    const a: number = 5;
    const b: number = 10;
    setResult(a + b);
  }
  return (
    <div className="p-3">
      <h3>Added Sum is: {result}</h3>
    </div>
  );
};

Lien CodeSandbox :

https://stackblitz.com/edit/react-starter-typescript-xtuqtv?file=App.tsx

Sortie :

Aussi, lisez: Application Web Laravel en application mobile - Principaux scénarios de transformation

Qu'est-ce que useState ?

La utiliserÉtat Hook in React nous permet de suivre l'état d'un composant de fonction.

L'état fait essentiellement référence à des données importantes ou à une information spécifique dans une application. 

Exemple: Si l'interrupteur d'un Ventilateur est sur OFF, alors son état est sur Off et il ne tournera plus. 

De la même manière, si vous l'allumez, son état précédent de OFF passera maintenant à ON et le ventilateur continuera de tourner, n'est-ce pas ?

Encore une fois, utiliserÉtat Hook prend deux arguments :

D'abord, un Variable, où il stockera les données.

Deuxièmement, un Fonction pour définir la valeur de cette variable particulière.

Mise en situation :

import React, { useState } from 'react';

export const App = () => {
  const [name, setName] = useState<string>('Akshay Bisht');
  return (
    <div className="p-4">
      <h3>My Name is {name} 😎</h3>
    </div>
  );
};

Lien CodeSandbox :

https://stackblitz.com/edit/react-starter-typescript-yekrro?file=App.tsx

Sortie :

Qu'est-ce qu'une API RESTful ?

API RESTful, vous avez sûrement entendu ce terme à de nombreuses reprises lorsque vous avez rencontré quelqu'un qui a le titre de développeur backend. Vous vous seriez demandé (qu'est-ce que c'est que cette API ? Pourquoi devrions-nous l'utiliser ? Comment cela va-t-il m'aider ?)

Eh bien, laissez-nous maintenant vous expliquer en bref et dissiper vos doutes :

L'API est connue sous le nom d'interface de programmation d'application. De nos jours, c'est une technique très tendance et utile pour interagir avec les données d'un utilisateur. Auparavant, nous avions l'habitude de mettre à jour notre base de données en écrivant principalement des commandes SQL ennuyeuses, qui ne sont pas faciles à retenir pour tout le monde.

Ainsi, comme alternative, des bases de données NoSQL telles que MongoDB, Cassandra, Redis, CouchDB, Riak et bien d'autres ont été introduites. Donc, s'il y aura NoSQL, pourquoi en avez-vous besoin ? Comment allez-vous interagir avec lui ? Eh bien, si la base de données est NoSQL, il existe certainement un autre moyen d'accéder à ce type de base de données et cette façon est l'API RESTful.

Oui, vous avez bien entendu. C'est ainsi que le Reposant L'API a été présentée aux programmeurs et il s'agissait d'une approche beaucoup plus simple, robuste et conviviale pour le code.

Donc, à partir de là, c'est maintenant une tendance d'utiliser les API, la plupart des entreprises les utilisent de nos jours. Et la personne qui interagit avec l'API est connue sous le nom de développeur backend.

Dans l'API, la partie amusante est qu'elle vous donne un HTTP code d'état à partir duquel vous pouvez identifier où les données ont été récupérées ou non, quel type d'erreur vous obtenez.

Méthodes HTTP utilisées par n'importe quelle API :

ÉCONOMISEZ - C'est une méthode utilisée pour obtenir des données à partir d'une base de données.

POSTEZ - C'est une méthode utilisée pour créer ou insérer des données dans la base de données.

PUT - Il s'agit d'une méthode dans laquelle nous pouvons mettre à jour ou corriger un champ de données spécifique, puis envoyer ces données mises à jour à la base de données. 

EFFACER - C'est une méthode dans laquelle nous pouvons supprimer l'enregistrement ou les données d'un utilisateur de la base de données.

Voici ces codes d'état HTTP :

• 200 - D'accord
• 201 - Créé
• 302 - Trouvé
• 400 - Mauvaise demande
• 401 - Non autorisé
• 403 - Interdit
• 404 - Introuvable
• 500 - Erreur de serveur interne
• 502 Mauvaise passerelle

Aussi, lisez: Microservices vs API - sachez ce qui convient à votre entreprise

Qu'est-ce que DOM?

DOM est connu sous le nom de Document Object Model ; il est essentiellement créé par le navigateur lorsque nous chargeons une page Web. Il suit la structure arborescente d'un document HTML, afin qu'il puisse le compiler, et il peut être facile pour les développeurs front-end d'inspecter et de trouver très facilement le composant spécifique. React suit le DOM virtuel, et c'est une représentation très légère du DOM réel. Nous nous concentrerons donc moins sur ces sujets.

Voici à quoi ressemble DOM :

Voici donc la partie pratique :

Nous allons d'abord exécuter votre code en premier. Après cela, nous vous expliquerons chaque point afin que vous puissiez comprendre clairement ce que nous avons écrit dans le code.

Alors, sautons dans le code. Et puis la partie explication.

Étapes 1:

Créez une application React TypeScript sur votre système à l'aide de la commande suivante :

npx-create-react-app --template dactylographié

Étapes 2:

Accédez à votre Réagir Répertoire d'applications Typescript et installer un bootstrap package en suivant la commande :

démarrage de l'installation de npm

Étapes 3:

Dans votre App.tsx fichier, effacez tout le code et collez le code ci-dessous :

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

interface user {
  map(arg0: (item: any) => JSX.Element): import('react').ReactNode;
  name: string;
  email: string;
  phone: number;
}

export const App = (): React.FC<user[]> => {
  const [user, setUser] = useState<user | undefined>();
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((json) => setUser(json));
  }, []);

  return (
    <div className="p-2">
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">S.no</th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Phone</th>
          </tr>
        </thead>
        <tbody>
          {user?.map((item) => (
            <tr>
              <th scope="row">{item.id}</th>
              <td>{item?.name}</td>
              <td>{item?.email}</td>
              <td>{item?.phone}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

Étapes 4:

Maintenant, pour commencer et voir votre sortie finale à l'écran, tapez simplement la commande suivante :

npm début

Étapes 5:

Attendez maintenant la sortie et après un certain temps, vous verrez une sortie comme celle-ci : 

Lien CodeSandbox :

https://stackblitz.com/edit/react-starter-typescript-emeoep?file=App.tsx

Explication:

Alors, que se passe-t-il ici ? Nous venons de montrer notre tableau Bootstrap avec les données fictives de 10 utilisateurs avec un Espace réservé JSON l'API de l'utilisateur. 

Initialement, nous venons de créer une interface afin que nous puissions dire à la dactylographie que ce que nous obtiendrons, ce sont ces données dans une réponse comme le nom de la chaîne, l'e-mail d'une chaîne et le numéro de téléphone d'un numéro. 

Après cela, nous avons déclaré une variable et défini la fonction d'un utiliserÉtat hook pour stocker la réponse provenant de l'API et l'utiliser ultérieurement. Et dans le utiliserÉtat crochet, nous avons dit au tapuscrit qui suit notre interface nommée "utilisateur" et plus tard j'ai mis les données de réponse sur mon setFonction afin que nous puissions l'utiliser ci-dessous dans notre table d'amorçage. 

Ensuite, dans la table d'amorçage ci-dessous, nous parcourons simplement un objet et y accédons avec la variable que nous venons de définir ci-dessus dans mon useEffet méthode du crochet. Et nous accédons juste aux valeurs de l'objet. Et enfin, lorsque nous enregistrons le code, il est rendu.

Aussi, lisez: Laravel 8 - Tutoriel Excel et CSV Import Export vers la base de données

Conclusion

En fin de compte, nous aimerions simplement conclure les choses en disant que les appels d'API sont faciles jusqu'à et à moins que vous ne jouiez pas avec un useEffet et utiliserÉtat accrochez-vous à un texte dactylographié réactif et pratiquez-le dans votre routine quotidienne. Les deux crochets sont très essentiels pour que les appels d'API stockent ou interagissent avec. Nous espérons maintenant que vos concepts sont devenus beaucoup plus clairs et plus concis.

Merci beaucoup d'avoir lu ce blog si patiemment 😊, Bonne journée 👋.

[sc name="Web Development"] [add_newsletter] [add_related_page_diff_contents blog_cat = "web-application"]