Dans ce chapitre, vous allez construire un client React.js qui envoie des requêtes au serveur, et qui traite les données reçues.

Construction de l’application cliente

1. Créez une application React.js vide.
2. Installez le package axios qui permet de gérer aisément les échanges entre le client et le serveur.
3. Ajoutez la ligne import axios from 'axios'; dans App.js.

Extraire des données du serveur

1. Pour extraire la liste des personnes, utilisez axios comme suit :

   function App() {
       const [persons, setPersons] = useState([]);
   
       async function getPersons() { 
           const persons = (await axios.get('http://localhost:8000/persons')).data; 
           setPersons(persons);
       }
   
       useEffect(() => {
               getPersons()
       },[]);

2. Remarques :

   • Au lancement de l’application, la variable persons définie dans la fonction App est un tableau vide. Pour plus d’informations concernant la gestion des états avec React.js, consultez la documentation React.js sur useState.
   • La fonction getPersons est déclarée async à cause du délai de réponse du serveur. Dans notre cas, ce délai est imperceptible car le client est le serveur sont sur le même poste. Dans un cas réel, des temps de réponse plus longs peuvent être observés.
   • Pour que votre application React.js fonctionne, il vous faut compléter le code ci-dessus de sorte que la liste des personnes apparaisse dans le navigateur. Utilisez pour cela la méthode map définie sur les tableaux.
   • La fonction useEffect est appelée juste avant l’affichage dans le navigateur. Remarquez le deuxième argument qui est ici un tableau vide. Pour plus de détails, vous pouvez vous référer à la documentation React.js sur useEffect

3. Sur le serveur, passez en commentaire la ligne faisant appel au package CORS et observez le résultat sur le client. Reportez-vous à la documentation de ce package pour comprendre son fonctionnement.

Insérer de nouvelles données

Pour insérer une nouvelle personne, vous allez avoir besoin de créer un formulaire, puis d’envoyer son contenu au serveur à l’aide de la méthode POST.

1. Dans la fonction App, générez un formulaire comprenant

   • un champ input dont l’id est name.
   • un bouton de type submit et faites en sorte que la validation du formulaire déclenche la fonction insertPerson décrire ci-dessous

2. Ajoutez la fonction insertPerson dont le code est donné ci-dessous :

   async function insertPerson(e) {
       e.preventDefault();
       const p = (await axios.post('http://localhost:8000/persons', {name: e.target.name.value})).data;
       setPersons([...persons, p]);
   }

3. Remarques

   • e.preventDefault est une méthode qui annule le fonctionnement par défaut lié à cet évènement. e est un objet représentant l’évènement déclencheur (ici la validation du formulaire).
   • axios.post permet d’envoyer le fomulaire au serveur.
   • setPersons([…persons, p]) permet de mettre à jour la variable d’état persons. L’ajout d’une nouvelle valeur au tableau persons se fait à l’aide de l’opérateur spread

4. Questions :

   • Que vaut le champ e.target?
   • Que vaut le champ e.target.name?
   • Que vaut le champ e.target.name.value?
   • Pourquoi utiliser l’opérateur spread plutôt que la méthode push pour ajouter un élément au tableau persons?
   • Comment améliorer le code précédent pour que le champ input du formulaire soit nettoyé à chaque validation?

Réorganiser le code

Votre code devient maintenant trop complexe, il faut le réorganiser pour qu’il reste lisible.

1. Dans votre fichier App.js, créez une fonction Formulaire qui permet d’afficher un formulaire, et utilisez-là dans la fonction App.

   • Votre fonction doit englober la fonction insertPerson créée précédemment.
   • La fonction insertPerson doit pouvoir accéder au tableau persons et à la fonction setPersons définis dans la fonction App.

2. Créez une fonction ListePersonnes qui affiche l’ensemble des personnes dans une liste à puces.

   • Chaque personne doit être précédée de son id, et doit être suivie d’une croix.
   • La croix doit être une icône (png) que vous devez trouver sur le web.
   • Un évènement click sur la croix doit afficher l’id de la personne dans la console.

3. Créez maintenant un fichier Formulaire.js dans lequel vous placez le code de la fonction Formulaire. Faites de même avec la fonction ListePersonne. Vos fonction doivent maintenant être importées dans le fichier App.js pour que votre application continue de fonctionner.

Supprimer une personne

Pour supprimer une personne, il faut envoyer une requête DELETE au serveur à l’aide du package axios. Modifiez la fonction ListePersonnes de sorte qu’un évènement click sur une croix :

• Supprime la personne du serveur.
• Raffraichisse l’écran en supprimant cette personne sans relire les données du serveur. Vous aurez besoin de la méthode filter.

Modifier une personne

Pour modifier une personne, il faut envoyer une requête PATCH au serveur à l’aide du package axios. S’il vous reste un peu de temps, vous pouvez adapter votre code pour gérer cette dernière fonctionnalité.