Scribd
Importer
156 vues2 pages

CC2 React

Le document décrit un contrôle continu pour un cours de développement Front End, où les étudiants doivent créer une application web pour gérer les voyages d'un utilisateur. Les tâches incluent la réalisation de plusieurs composants React, tels que App.js, Layout.js, et Navigation.js, ainsi que des pages spécifiques pour ajouter et lister des voyages. Les exigences précisent des critères de validation pour les données d'entrée et la présentation des informations.

Transféré par

XSHARED
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
156 vues2 pages

CC2 React

Le document décrit un contrôle continu pour un cours de développement Front End, où les étudiants doivent créer une application web pour gérer les voyages d'un utilisateur. Les tâches incluent la réalisation de plusieurs composants React, tels que App.js, Layout.js, et Navigation.js, ainsi que des pages spécifiques pour ajouter et lister des voyages. Les exigences précisent des critères de validation pour les données d'entrée et la présentation des informations.

Transféré par

XSHARED
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Office de la Formation Professionnelle

et de la Promotion du Travail
Direction Régionale TTA
Année de Formation : 2024-2025

Contrôle continu n°2


M201 : Développement Front End

Filière : Développement Full Stack Fil Epreuve : TH


Année : 2ème Année Variante : 1
Niveau : TS Barème : 20 Pts
Date : 18/01/2025 Durée : 1h30

Contexte

Vous devez développer une application web pour gérer les informations liées aux voyages d’un
utilisateur. Cette application permettra d’ajouter, de visualiser et de gérer des voyages à travers
plusieurs pages interactives:
src/
├── components/
│ ├── FormulaireAjout.js
│ ├── Lyout.js
│ ├── ListeVoyages.js
│ ├── Navigation.js
├── pages/
│ ├── Accueil.js
│ ├── AjouterVoyage.js
│ ├── Liste.js
├── App.js
├── index.js

La barre de navigations propose les fonctionnalités principales suivantes :

Navigation

Page Layout
AjouterPreference

FormulaireAout
Office de la Formation Professionnelle
et de la Promotion du Travail
Direction Régionale TTA
Année de Formation : 2024-2025

Page Liste

ListeVoyages

Travail demandé

1. Réalisez le code du composant App.js : (6 points)


• Il structure la présentation de la page à l’aide du composant Layout.js.
• Il regroupe le menu de navigation et le contenu des pages.
• Il contient l’état partagé entre les composants de l’application.

2. Réalisez le code du composant stylé Layout.js (2 points)


• Utilisez styled-component pour appliquer une disposition globale de la page.
• Le composant est un élément qui encapsule ses fils

2. Réalisez le code du composant stylé Navigation.js (2 points)


• Chacune des commandes renvoie vers le composant associé
• Utilisez styled-component pour la présentation du composant.

3. Réalisez le code des pages Accueil.js, AjouterVoyage.js et Liste.js. (2 points)

4. Réalisez le code du formulaire FormulaireAjout.js en respectant les contraintes : (4 points)


• Un voyage est défini par : la description du voyage, le type choisi (Nature, Culturel ou
Loisirs) plus un planning représentant une planification sous forme « Jou1 : détails, Jour2 :
détails… » .
• La description est obligatoire d’au moins 10 caractères.
• Le planning doit avoir au moins 20 caractères
• Le bouton Ajouter permet l’ajout du voyage après validation.

5. Réalisez le code du composant ListeVoyages.js : (4 points)


• Il affichage la liste préférences enregistrées.
• Chaque élément de la liste dispose d’un bouton pour le supprimer.
• En bas de la liste, afficher le nombre total de préférences enregistrées
.

Vous aimerez peut-être aussi