OFFICE DE LA FORMATION PROFESSIONNELLE
ET DE LA PROMOTION DE TRAVAIL
Direction Régionale Fès - Meknès
Module : M202 – Développement front-end
Filière : Développement digital – option web full stack
TP 2
Exercice 1 : Composant "Header"
Créez un composant appelé "Header" qui affiche un en-tête stylisé avec un titre par
défaut, tel que "Bienvenue dans l'application". Vous avez la liberté de choisir la mise en
forme qui vous convient le mieux pour cet en-tête.
Exercice 2 : Créez un composant "Header" avec un titre dynamique
Créez un composant nommé "Header" qui affiche un en-tête stylisé avec un titre
par défaut, tel que "Bienvenue dans l'application". Le nom de l'application et la
couleur doivent être passés en tant que props au composant.
Refaire le composant Header en utilisant déstructuration de l’objet props
Exercice 3 :
Soit la partie suivante d’une page web:
1. Créer un fichier Data.js contenant les spécialités et les informations des médecins:
Export const Employe=["ALAOUI Mohamed","MADANI ISMAIL","RAYAK HATIM"];
Export const types=["INFORMATIQUE","INDUSTRIE","ECONOMIE"];
Export const projets=["ProjetX","ProjetY","ProjetZ"];
Export const Taches=[
{Code:'T100 ',
Date: '01/10/2020',
Resumé:'Tests Unitaires',
Durée :10
},
{ Code:'T101 ',
Date: '04/10/2020',
Resumé:'Mise en exploitations',
Durée :5},..]
2. Ecrire le composant Info pour afficher le nom d’un responsable et son code (props :
nom,code)
3. Ecrire le composant ListDR (props : elements, texte) .
4. Ecrire le composant Tableau afin d’afficher sous forme d’un tableau les informations
de toutes les taches (props : listetaches)
5. Ecrire le code d’Index.js pour afficher la page en utilisant les composants
précédents.
6. Refaire les composants en utilisant classe composant
Exercice 4 :
On souhaite créer l'interface suivante:
Avec React, chacune des parties de site qu’on va pouvoir réutiliser correspond à un
composant:
1. Créer un composant <Product /> qui permet d’afficher un produit.
2. Créer un composant <Products /> qui permet d’afficher tous les produits.
(Utiliser Boostrap pour la mise en forme)
Soit la variable products qui contient les informations des produits:
const products = [
{
id: 1,
title: 'PC Portable Gamer HP VICTUS',
price: '7490 DH',
thumbnail : 'HP16D0195NF.jpg'
},
{
id: 2,
title: 'PC Portable Gamer HP VICTUS',
price: '2190 DH',
thumbnail : 'HP14424U3EA.jpg'
},
{
id: 3,
title: 'Pc Portable Chromebook Acer',
price: '3640 DH',
thumbnail: 'NXATHEF002.jpg'
},
{
id: 4,
title: 'PC Portable - HUAWEI',
price: '1270 DH',
thumbnail: 'HUA6901443442959.jpg'
}];
Formatrice : EL MAUDNI
