Formation Développement web Full Stack : MERN

Période : Les 15, 16 et 17 aout 2022 (Formation en ligne)

Formateur : Anis ASSAS

Atelier 3 : Création d'un ensemble structuré de composants React

On se propose, à ce niveau d’avancer au niveau de développement de notre application

web en ayant la possibilité d’ajouter de nouveaux départements mais aussi de pouvoir en
supprimer.

Pour ce faire :

- Partie 1 : Opérations CRUD

• Au niveau du composant "presentation", créer un formulaire d’ajout afin

de pouvoir insérer un nouveau département et l’afficher par conséquent au
niveau de la liste des départements.

• Ajouter devant chaque département le bouton (X) : en cliquant dessus, on

pourrait supprimer le département concerné.

Dév. Web FullStack- MERN (A.ASSAS) Page 1|3

 • Pour pouvoir modifier les noms des départements de la liste, ajouter au
niveau de chaque ligne le bouton (Editer) : en cliquant dessus, le nom du
département sélectionné s’affichera au niveau de la zone de texte et le
bouton "Ajouter département" se transformera en "Modifier département".

- Partie 2 : Restructuration et interactivité entre composants

• Restructurer maintenant votre code en subdivisant le composant principal

(app.js) en plusieurs sous composants indépendants comme suit :

 app.js : le composant parent incluant les composants suivants :

 accueil.js : afficher le message de bienvenue
 apropos.js : afficher les informations contact de la société
 listDeparts :
o formAjout : formulaire d’ajout du nouveau
département
o Affichage des différents départements avec possibilité
de modification et suppression.

Dév. Web FullStack- MERN (A.ASSAS) Page 2|3

 - Partie 3 : Routage

• Installer la librairie react-router-dom :

> npm install --save react-router-dom

• Créer le composant "navigation/menu.js" afin d’ajouter un menu (barre de

navigation) incluant trois liens afin de pouvoir naviguer entre les différents
composants comme suit :

• Accueil  le composant "accueil.js"

• A propos  le composant "apropos.js"
• Départements  le composant "listDeparts.js"

Dév. Web FullStack- MERN (A.ASSAS) Page 3|3