Module : Développement multiplateforme Master 2IAD/2023-2024
Département Informatique
Faculté des Sciences El Jadida
**********************************************************************************
TP1 : React
Exercice 1: Lire les props à l'intérieur du composant enfant
Proposez les différentes solutions (en passant différents props) permettant de refléter le résultat suivant en se
basant sur deux composants imbriqués (Ex : Composant principale Test intégrant le composant CompTest):
Exercice 2:
En se basant sur Exercice1, proposez les différentes solutions permettant de refléter le résultat ci-dessous :
Exercice 3 :
Extraire un composant Card du balisage suivant et utiliser le prop children pour lui transmettre
différents JSX :
Pr. O.Boutkhoum
Module : Développement multiplateforme Master 2IAD/2023-2024
Département Informatique
Faculté des Sciences El Jadida
**********************************************************************************
export default function Profile() {
return (
<div>
<div className="card">
<div className="card-content">
<h1>Photo</h1>
<img
className="avatar"
src="https://i.imgur.com/OKS67lhm.jpg"
alt="Aklilu Lemma"
width={70}
height={70}
/>
</div>
</div>
<div className="card">
<div className="card-content">
<h1>About</h1>
<p>Aklilu Lemma was a distinguished Ethiopian scientist
who discovered a natural treatment to schistosomiasis.
</p>
</div>
</div>
</div>
);
Exercice 4 :
Créez une application React qui affiche une liste de tâches statiques comme illustré ci-dessous. L’application est
constitué du composant principale ‘App.js’ et de deux composant : ‘TaskItem.js’ et ‘TaskList.js’. Le composant
App transmet la liste de tâches à TaskList, qui à son tour rend chaque tâche à l'aide de TaskItem.
const tasks = [ App
{ id: 1, text: 'Faire les courses', completed: false },
{ id: 2, text: 'Apprendre React', completed: true },
{ id: 3, text: 'Faire de l\'exercice', completed: false },
];
<input type="checkbox" checked={task.completed} disabled />
TaskItem
<span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
</span>
Refaire l’exercice avec une liste de figures au lieu du texte.
Pr. O.Boutkhoum
