Création d’une Application Web avec Python et React — Partie 2 (FrontEnd)
FRONTEND
OUTILS
CREATION DU PROJET
Nous allons créer notre projet React grâce à la commande ci-dessous;
mkdir react-demo
INITIALISATION DU PROJET
Les commandes ci-dessous nous permettrons d’initialiser notre projet REACT:
cd react-demo
npm init
INSTALLER LES DEPENDANCES
Ensuite nous allons installer les dépendances dont nous avons besoin :
react : ce package nous permettra d’utiliser REACT dans notre application.
react-dom : ce package va nous permettre d’utiliser le DOM VIRTUELLE de React.
react-router-dom: ce package va nous permettre de définir les routes dans notre application.
react-toastify: ce package sera utilisé pour les notifications.
prop-types: on utilisera ce package pour typer notre application.
npm install prop-types react react-dom react-router-dom react-toastify --save
react-scripts: ce package inclut des scripts et configuration utilisés par Create React App.
npm i react-scripts --save-dev
MISE A JOUR DE NOTRE FICHIER PACKAGE.JSON
package.json
De la ligne 6 à la ligne 11 du code ci-dessous. Nous allons configurer nos Scripts.
CREATION DE NOTRE FICHIER INDEX.HTML
Nous allons créer notre fichier index.html.
Au niveau de la balise <body>, nous créons une div ayant pour ID : app.
public/index.html
CREATION DE NOTRE MODULE RACINE — INDEX.JS
Dans le fichier ci-dessous, nous allons créer un module App que nous allons afficher dans notre <div> ayant pour id (app) de notre fichier index.html grâce au code de la ligne 19.
src/index.js
CREATION DE NOTRE FICHIER DE STYLE — INDEX.CSS
src/index.css
INSTALLATION DE BOOTSTRAP 4
npm install bootstrap --save
AJOUT DU STYLE BOOSTRAP 4 — index.js
À la ligne 5 , ajoutons le style de bootstrap dans notre projet.
src/index.js
MISE EN PLACE DU COMPOSANT HEADER
src/components/shared/Header/Header.js
Ajout du style Header.css
src/components/shared/Header/Header.css
AJOUT DU COMPOSANT HEADER — index.js
Ensuite nous allons ajouter le composant header dans notre projet.
src/index.js
LANCER LE PROJET
Grâce à la commande ci-dessous ;
npm start
RESULTAT
CREATION DU COMPOSANT LOADING
src/components/shared/Loading/Loading.js
Ajout du style Loading.css
src/components/shared/Loading/Loading.css
CREATION DE NOTRE HELPER handleResponse
Notre méthode handleResponse nous permettra de décoder les données JSON reçues du BACK.
src/helpers.js
CREATION D’UNE VARIABLE GLOBALE API_URL
src/config.js
CREATION DU COMPOSANT ETUDIANTS
Nous allons créer notre composant Etudiants.js:
src/components/Etudiants/Etudiants.js
La méthode fetchEtudiants nous permet de récupérer la liste des étudiants depuis le Back.
La méthode componentDidMount nous permet de récupérer la liste des étudiants au chargement de notre composant Etudiants.
Au niveau de notre constructeur nous déclarons notre variable state avec pour propriétés loading, etudiants et error.
loading: cette propriété nous permet de vérifier si nous n’avons pas d’appel de service web en cours.
etudiants: cette propriété nous permet de récupérer la liste des étudiants.
error: cette propriété nous permet d’afficher nos messages d’erreur lors de l’appel de nos services web.
À la ligne 23, nous mettons à jour la propriété loading de notre state, en la mettant à True. Cela va nous permet d’afficher notre composant loading à la ligne 43.
Ensuite avec la librairie fetch de React , à la ligne 24 on récupère la liste des étudiants à l’adresse `http://localhost:5000/api/v1.0/etudiant`.
À la ligne 25, nous utilisons notre Helper (handleResponse), pour décoder les données JSON reçues du BACK.
En cas de succès à la ligne 27, nous les passons à notre constante etudiants. Nous mettons aussi notre state à jour de la ligne 29 à la ligne 32.
En cas d’erreur, nous mettons à jour notre state à la ligne 35. Aussi à la ligne 46 nous affichons le message d’erreur.
Enfin , à la ligne 50 nous passons notre propriété etudiants au composant TableEtudiants. Ce composant qui va nous permettre d’afficher la liste des étudiants dans un tableau.
CREATION DU COMPOSANT TABLE ETUDIANTS
Nous allons créer notre composant TableEtudiants.js:
À la ligne 7, nous récupérons la propriété etudiants que nous avons envoyée depuis notre composant Etudiants grâce au paramètre props.
Ensuite, à la ligne 13 on ajoute un bouton Ajout Etudiant qui va nous permettre de rédiger l’utilisateur sur la page de création d’étudiant.
Nous allons afficher la liste des étudiants grâce à la méthode map: ligne 29 à 42.
Enfin à la ligne 49, nous allons utiliser propTypes pour vérifier que notre propriétés etudiants est bien ramenée et est un tableau.
src/components/Etudiants/TableEtudiants/TableEtudiants.js
Ajout du style TableEtudiants.css
src/components/Etudiants/TableEtudiants/TableEtudiants.css
MISE A JOUR DU MODULE RACINE App — INDEX.JS
src/index.js
Nous allons mettre à jour notre module racine App en enregistrant nos routes grâce à <Switch><Route></Route></Switch> à la ligne 17.
RESULTAT
INSTALLATION DE REACT CONFIRM ALERT
Avec la commande ci-dessous, Nous allons installer react confirm alert.
npm install react-confirm-alert --save
CREATION DU COMPOSANT AJOUT ETUDIANT
Nous allons créer notre composant AjoutEtudiant.js:
src/components/AjoutEtudiant/AjoutEtudiant.js
Dans notre composant AjoutEtudiant, nous allons créer la méthode createEtudiant qui va nous permettre d’envoyer nos données au BACK.
Nous allons mettre en place un formulaire qui va nous permettre d’ajouter un étudiant.
La propriété onSubmit à la ligne 93, va nous permet d’appeler la méthode handleCreateEtudiant lorsque l’utilisateur soumet le formulaire.
La méthode handleCreateEtudiant va nous permettre de demander une confirmation à l’utilisateur. Au cas où il clique sur Oui, à la ligne 64 on appelle la méthode createEtudiant.
Nous avons mis en place un binding grâce à nos méthodes handleChangeMatricule, handleChangeNom et handleChangePrenom.
Par exemple, la méthode handleChangeMatricule est appélé au cas où il ya un changement de valeur de l’input matricule (ligne 97). Ensuite cette méthode met à jour la propriété matricule de notre state avec la valeur de l’input matricule (ligne 75).
Au niveau de la méthode createEtudiant, nous allons déclarer une variable data qui est un objet et va contenir les données de nos inputs (ligne 33 à 37).
Ensuite avec la librairie fetch de React , de la ligne 39 à la ligne 43 on envoie les données pour créer l’étudiant à l’adresse `http://localhost:5000/api/v1.0/etudiant`.
En cas de succès, à la ligne 46 on affiche une notification avec le message `Succes ! ` et on redirige notre utilisateur sur la page qui listes les Etudiants.
Ajout du style AjoutEtudiant.css
MISE A JOUR DU MODULE RACINE App — INDEX.JS
src/index.js
Nous allons mettre à jour notre module racine App en enregistrant notre route ajout à la ligne 19.
AMELIORATION
Créer les composants UpdateEtudiant et DeleteEtudiant.
GITHUB
npm install
npm start
RESULTAT