API Rest avec React 17

A l’instar de l’article sur l’utilisation d’une API Rest avec Angular, nous allons voir le même concept c’est à dire consommer une API Rest mais en utilisant le Framework React JS en version 17. Pour cela, j’ai conçu une petite application, qui une fois lancée ressemble à ceci :

C’est une application plutôt simple qui nous permet de nous concentrer sur les notions élémentaires. La page d’accueil affiche une liste de contacts récupérés grâce à l’appel d’une API REST. On dispose d’un header contenant le nom de l’application ainsi que le Framework et la version utilisée, ici React 17.0.2. Sur la partie gauche, on a un bouton qui permet d’ajouter un contact et qui nous dirige vers une autre page. Cette page « ajouter contact » sera étudiée dans un prochain article. Sur chaque « card » contenant un contact, on a 2 icônes, une pour supprimer le contact et l’autre pour éditer ce même contact.

L’Api REST

L’API REST utilisée est une API que j’ai développé en Java avec le Framework Spring, le code de l’application est disponible ici. Pour que notre application Angular affiche des données, il faudra lancer cette API en local. Par défaut, elle se lance sur le port 8080. Une fois lancée, on peut consulter les données en GET en utilisant postman par exemple

En appelant l’url http://localhost:8080 avec la méthode GET, l’API nous renvoie un tableau de contacts avec les champs suivants : id, firstName, lastName, age.

Créer une application « from scratch »

Revenons à l’application Front, avant de s’intéresser au code, nous allons voir comment l’application a été créée. Et justement pour démarrer simplement une application « from scratch », il existe l’outil Create React App. C’est un outil en ligne de commande à lancer via NPM, qui nécessite donc dans un premier temps l’installation de NodeJS. Pour créer une nouvelle application, il faut lancer la commande suivante npx create-react-app contacts-front-react. La nouvelle application sera ainsi disponible à l’url http://localhost:3000 après avoir lancé la commande npm start. Pour cet article on utilisera l’application disponible sur mon github à l’adresse suivante https://github.com/rpalvair/contacts-front-react en prenant soin de bien sélectionner la branche 01-starting-project.

Structure du dossier src

Le dossier src qui contient les composants de l’application possède cette structure:

Dans le dossier components, on retrouve les composants liés au layout de l’application. On a qu’un seul élément le header. Dans le dossier pages, on retrouve comme son l’indique les pages de l’application. Celle qui nous intéresse est la page contacts-list qui est en fait la page d’accueil :

Dépendances

Notre application a besoin de dépendances supplémentaires notamment pour la partie « design ». Nous avons besoin du Framework Bootstrap (version 4.6.0) et FontAwesome pour les icônes. Il existe un package pour chacune des librairies afin de faciliter l’intégration avec une application React : https://react-bootstrap.github.io/ et https://fontawesome.com/how-to-use/on-the-web/using-with/react.

Il faut installer les dépendances afin de pouvoir les utiliser :

npm install react-bootstrap bootstrap
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Le Header

Le header est géré par le composant TheHeader décrit par le fichier TheHeader.js. Ce composant affiche le nom de l’application ainsi que le nom et la version du Framework utilisé. Le nom de l’application et le nom du Framework sont « en dur » dans le template. Par contre la version est récupérée à partir du fichier package.json :

Il faut donc importer le fichier package.json dans le composant :

Affichage des contacts

L’affichage sur la page d’accueil est géré dans le composant ContactsList.js. Le chargement des contacts se fait dans la méthode componentDidMount() qui est appelée une fois que les éléments de la page sont bien rendus dans le DOM (cf. cycle de vie des composants React):

Dans la méthode loadContacts, on va donc faire appel à notre API pour récupérer les contacts et renseigner le tableau de contacts qui est initialisé avec un tableau vide. Pour cela, on va utiliser l’API Fetch et la méthode fetch() qui prend en paramètre une url et qui retourne une Promesse (Promise). On va utiliser la méthode .then() sur la promesse afin de récupérer le résultat une fois que l’API a répondue et stocker les données dans le state du composant au niveau du tableau de contacts :

J’ai créé en plus un fichier config.js qui est importé dans le composant et qui contient les urls des endpoints de l’API de contacts:

Au démarrage de l’application , les contacts sont chargés et seront affichés dans le template. Dans ce template, on a une liste de « card » qui sont des composants de Bootstrap (https://getbootstrap.com/docs/4.6/components/card/). On parcourt le tableau de contacts et pour chaque contact on affiche une « card » avec les infos du contact. Grâce au JSX, on va pouvoir parcourir la liste des contacts et renvoyer une « card » pour chacun d’eux :

Lorsque l’on est dans une boucle, chaque élément doit avoir son attribut key renseigné avec une valeur unique. Ici la clé est l’attribut id du contact.

Pour afficher les informations du contact, étant donné qu’on utilise du JSX on a juste à encadrer la valeur avec des accolades. Par exemple, pour afficher le prénom suivi du nom, on utilise cette syntaxe {contact.firstName} {contact.lastName} .

On remarque la présence des icônes qui possèdent chacune un listener sur l’évènement « click » afin de déclencher l’appel de méthodes définies dans le composant. L’élément FontAwesomeIcon est fournit par le package @fortawesome/react-fontawesome et permet d’utiliser les icônes dans un composant React

Chaque icône que l’on souhaite utiliser doit être importé, dans notre cas on importe les icônes faTrash et faEdit

Un petit mot sur la navigation

En créant notre application, Create React App a installé le package react-router-dom qui permet de gérer la navigation dans notre application. Dans le fichier App.js on retrouve les éléments qui servent à configurer la navigation. L’élément principal est le BrowserRouter qui active les fonctionnalités de navigation. On rencontre ensuite le Switch qui permet de choisir une Route parmi plusieurs. Une Route va d’instancier le composant adéquat selon le path configuré. La route principale dont l’url pointe vers la racine de notre site, instancie le composant ContactsList. Toutes les autres routes non configurées sont redirigées vers le composant NotFound. C’est aussi à cet endroit que l’on spécifie que le header (TheHeader) doit être présent sur toutes les pages

En conclusion

Nous avons vu dans cet article comment consommer une API Rest et afficher le résultat dans une application React. L’application permet également de supprimer un contact, de le modifier ou de créer un nouveau contact. Nous verrons ces différentes fonctionnalités dans de futurs articles. Nous mettrons également en place la gestion des erreurs, un système d’authentification et pleins d’autres améliorations.

Voici le lien vers l’application : https://github.com/rpalvair/contacts-front-react/tree/01-starting-project

A très vite !