Création d’une Application Web avec Python et React — Partie 2 (FrontEnd)

Daouda Diallo

Published in

Code d'Ivoire

5 min readJul 12, 2018

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

daoudaDiallo/NoteProjetReact

Contribute to NoteProjetReact development by creating an account on GitHub.

github.com

npm install
npm start

RESULTAT

Création d’une Application Web avec Python et React — Partie 2 (FrontEnd)

daoudaDiallo/NoteProjetReact

Contribute to NoteProjetReact development by creating an account on GitHub.

Written by Daouda Diallo