Office de la Formation Professionnelle et de la Promotion du Travail
Direction Régionale de l’Orientale
Examen régional de fin de module
Année de Formation 2024/2025
Code module : M 204 Type d’Epreuve :
Développer en front-end Théorie, Synthèse ou Pratique
Filière : Intitulé de la filière Durée : 2h30mn
Année 2°A Barème global : / 40
****************************************************************************
Théorie : (10 points)
QCM :
1. Quelles sont les deux façons dont les données sont traitées dans React? (1pt)
A. state & props
B. services & components
C. state & services
D. props & components
2. quel outil utilise React pour compiler JSX ? (1pt)
A. babel
B. JSX Compiler
C. React Router
D. ReactDOM
3. Dans ReactJS, les props peuvent être utilisés pour passer des (1pt)
A. propriétés au composant
B. gestionnaires d’événements au composant
C. Les deux A et B sont vrais.
D. Aucune de ces réponses n’est vraie.
4. La méthode componentDidMount est appelée lorsque (1pt)
A. Le composant est créé pour la première fois
B. L’état du composant est mis à jour
C. Les deux A et B sont vrais.
D. Aucune de ces réponses n’est vraie.
QUESTION DE COURS :
1. Expliquez utilité de useEffect (2pt)
2. Les différents comportements de useEffect selon le deuxième argument (2pt)
3. Expliquez les Cycles de vie de Composants créer via classe (2pt)
Office de la Formation Professionnelle et de la Promotion du Travail
Direction Régionale de l’Orientale
Pratique : (30 points )
EXERCICE 1 : React (16pts)
On souhaite créer un formulaire en utilisant React JS qui gère la liste des stagiaires dans un
établissement professionnel. Un stagiaire est caractérisé par un nom, prénom, ville, photo et filière,
les données des stagiaires seront stockées dans un tableau json suivant :
const listStagiaires =
[{nom:"CHAKIRI",prenom:"Laila",Ville:"Fes",Fil:"Web et full
stack",photo:"[Link]"},
{nom:"OUAFI",prenom:"Aanss",Ville:"Tanger",Fil:"Web
désigner",photo:"[Link]"},
{nom:"BADRAOUI",prenom:"ikram",Ville:"meknes",Fil
:"Dev Mobile",photo:"[Link]"},
{nom:"NACIRI",prenom:"Hassan",Ville:"CASABLANCA",Fi l:"Web et full
stack",photo:"[Link]"}];
1. Donner la commande qui permet de créer ce projet React JS nommé « gestion_stagaire »
(1pts)
2. Créer un composant nommé listeStagiaire qui permet afficher la liste des stagiaires (bouton
supprimer permet de supprimer un stagiaire) (3 pts)
3. Créer un composant nommé ajouterStagiaire qui permet ajouter un nouveau stagiaire à la
liste des stagiaires listStagiaires (3 pts)
Office de la Formation Professionnelle et de la Promotion du Travail
Direction Régionale de l’Orientale
4. Créer un composant nommé supStagiaire qui permet de supprimer un stagiaire dans la liste
des stagiaires listStagiaires (2 pts)
5. Créer un autre composant nommé RechercheStagiaire qui permet de faciliter la recherche
par nom d’un stagiaire(3 pts)
6. créer un autre composant qui permet de faciliter le déroulement de notre application En
utilisant un menu suivant :
Le composant <Route> définit une relation (mapping) entre une URL et un Component.
Cela signifie que lorsque l'utilisateur visite une URL sur le navigateur un Component
correspondant doit être rendu sur l'interface.
a) Donner la commande qui permet d’Ajouter la bibliothèque react-router(2 pts)
b) Compléter le code afin d’afficher les informations de composant correspond à chaque
option de menu (2 pts)
(Exemple : Le clic sur le lien liste Stagiaire affiche le composant < listeStagiaire /> de la
question 2 ….)
Office de la Formation Professionnelle et de la Promotion du Travail
Direction Régionale de l’Orientale
EXERCICE 2 : Redux et redux toolkit (14pts)
Dans cette application permet de gérer les inscriptions et notes des étudiants
Un étudiant est caractérisé par id, nom et filière, les données des étudiants seront stockées
dans un array
1. Donner la commande qui permet d’Ajoutez les packages redux et react-redux /
toolkit à votre application (2pts)
2. Créer un slice [Link] qui contient état initiale suivante
(2pts) const initStat = {
dbEtudiant : [
{Id : "Etudiant 1", Nom :"ELOUAFI ANASS", Filière :"DD WEB FULL STACK "},
{Id : "Etudiant 2", Nom :"ETARAFI OUFAE", Filière : "DD OPTION MOBILE "},
{Id : "Etudiant 3", Nom :"ELSABIR HAMZA", Filière : "DD WEB DESIGNER"}]
}
3. Ajouter au sliceEtudiants deux réducteurs permettant l’accès aux données de notre
état initial pour ajouter ou supprimer un Etudiant. (2pts)
4. Importer dans le store redux le slice sliceEtudiants. (2pts)
5. Créer un composant react qui permet d’afficher la liste des Etudiants (utiliser le
slice précèdent). (2pts)
6. Ajouter Un composant qui permet ajouter un étudiant (utiliser le slice précèdent). (2pts)
7. Ajouter Un composant qui permet de supprimer un Etudiant (utiliser le slice
précèdent). (2pts)
Office de la Formation Professionnelle et de la Promotion du Travail
Direction Régionale de l’Orientale
