SERIE de Revsion - C12-Développer en front end -
EXERCICE 1 :
On veut réaliser un composant « React » permettant de construire et d’afficher les trajets des trains. Un
train a un « id » , un « nom » et une liste des villes de passage Chaque ville a un « nom » .
Chaque trajet des trains a un « nomV » et une « ordreP » enregistré dans le tableau villes :
Exemple :
villes:[ { nomV :'fes', ordreP : 10}, {codeP:'meknes', ordreP : 20},{codeP:Kmisset, ordreP : 30}] .
Le composant utilise le tableau trains suivant :
const trains=[
{id:'t1',nom:'Buraq',villes:[]},
{id:'t2',nom:'Gazel', villes:[]},
{id:'t3',nom:'Eagle-Wins', villes:[]},
{id:'t4',nom:'Fennec', villes:[]},
]
On veut réaliser un Composant retournant le rendu suivant :
Questions :
1. En utilisant le tableau « trains » 4 Points / Question
a. Écrire le code du composant retournant le rendu ci-dessus.
b. Déclarer les variables d’état nécessaires.
c. Traiter le click du bouton « Rechercher »: la ville de départ est la première du tableau villes, la ville
d’arrivée est la dernière.
d. Le bouton « Ajouter la ville » permet d’ajouter la ville saisie au tableau « villes » du train en cours.
e. Le bouton « Supprimer » supprime la ville du tableau « villes ».
EXERCICE2 :
On veut créer un composant « React » permettant de construire et d’afficher les trajets des lignes de bus.
Une ligne de bus a un « id » , un « nom » et une liste des arrêts Chaque arrêt a un « nomL » et une
« ordreL » enregistré dans le tableau Lignes :
Exemple :
Arret :[{ codeA:'Adarissa', ordreA : 1}, {codeA: 'Saada', ordreA : 2},{codeA:
'Atlas', ordreA : 3}] .
Le composant utilise le tableau suivant :
const lignes=[
{id:'l1', nom:Ligne1’, arrets:[]},
{id:'l2', nom:'Ligne2', arrets:[]},
{id:'l3', nom:'Ligne3', arrets:[]},
{id:'l4', nom:'Ligne4', arrets:[]},
]
On veut réaliser un Composant retournant le rendu suivant :
Questions :
En utilisant le tableau « lignes » 4 Points/Question
a. Écrire le code du composant retournant le rendu ci-dessus.
b. Déclarer les variables d’état nécessaires.
c. Traiter le click du bouton « Rechercher » : L’Arrêt de départ est la première du tableau Arrêt,
l’Arrêt du Terminus est la dernière du tableau Arrêt.
d. Le bouton « Ajouter arrêt » permet d’ajouter le nom de l’arrêt saisi dans le tableau Arrêt du bus
en cours d’affichage.
e. Le bouton « Supprimer » supprime l’arrêt du tableau Arrêts du bus en cours.
EXERCICE 3 :
Une Voiture électrique est une voiture qui possède un « code voiture », une « marque », une
« autonomie » exprimée en nombre de kilomètres et un « kilométrage » représentant le nombre de
kilomètres parcourus. Pour chaque Voiture électrique on enregistre l’historique de ses parcours. Chaque
parcours a un « codeP » et une « distance » enregistré dans le tableau parcours_v :
Exemple : parcours_v:[ {codeP:'1',distance: 20},{codeP:'2',distance: 30}] .
Pour manipuler ces voiture on utilise le tableau suivant :
const Voiture=[
{codeVoiture:'v1',marque:'Voiture1',autonomie:0,kilometrage:0, parcours_v:[]},
{codeVoiture:'v2',marque: 'Voiture2',autonomie:0,kilometrage:0, parcours_v:[]},
{codeVoiture:'v3',marque: 'Voiture3',autonomie:0,kilometrage:0, parcours_v:[]},
{codeVoiture:'v4',marque: 'Voiture4',autonomie:0,kilometrage:0, parcours_v:[]},
]
(Au départ le tableau parcours_v est vide car il y a pas de parcours )
On veut réaliser un Composant retournant le rendu suivant :
Chargement du vélo :
On suppose que chaque
heure donne 50 Km
d’autonomie. Et que
l’autonomie maximale est
de 500Km
Questions :
1. En utilisant le tableau « Voiture »
a. Écrire le code du composant retournant le rendu ci-dessus.
b. Déclarer les variables d’état nécessaires.
c. Traiter le click du bouton « Rechercher » qui cherche les voitures par le « code Voiture »
d. Le bouton « Charger » permet de convertir le nombre de minutes saisies en kilomètres et de
l’ajouter au « kilometrage » de la voiture en cours d’affichage.
e. Le bouton « Ajouter parcours » crée un nouveau parcours et l’ajoute au tableau parcours du
Voiture en cours d’affichage (vérifier que l’autonomie est suffisante), lorsqu’on fait un parcours la
distance est retranchée du « kilometrage
EXERCICE 4 :
EXERCICE 5 :
Question :
EXERCICE 6 :
Question :
EXERCICE 7 :
On souhaite afficher le même composant plusieurs fois mais avec des informations différentes, en Utilisant l’Object props :
[Link] , [Link] , [Link]
ListeVoitures est un tableau de voitures ex :
[ " Citroen c4 ", " Citroen berlingo ", " Renault R11 " ]
Ce composant AfficheGar va nous permettre de passer les informations nécessaires au composant qui va afficher les
informations suivantes :
a) Creer ce composant nommé : (AfficheGar)
b) Creer le composant nommé : (App) qui va consommer le composant nommé : (AfficheGar) 3 fois.
EXERCICE 8 :
Soit le tableau suivant :
const list = [
"Banana",
"Apple",
"Orange",
"Mango",
"Pineapple",
"Watermelon"
];
Ecrire un composant fonctionnel de filtre et de recherche simple pour afficher une liste filtrée en fonction de la requête de
recherche saisie par l'utilisateur.
Voici les étapes pour créer un filtre de recherche à l'aide de React JS :
1) Déclarez les états de réaction pour les valeurs d'entrée de recherche.
2) Créez un texte d'entrée HTML pour entrer le terme de recherche et mettre à jour l'état dans la fonction onChange .
3) Ajoutez [Link]() sur la liste des éléments avec la valeur du terme de recherche.
EXERCICE 9 :
EXERCICE 10 :
EXERCICE 11 :
EXERCICE 12 :