Exercices sur les props

Exercice 0

Créez un repository public avec un README sur GitHub, appelez-le bre05-react-j2
Clonez-le dans le dossier sites/react de votre IDE.
Dans le dossier bre05-react-j2, créez un dossier props

Exercice 1 : envoyer un prop simple

Dans le dossier props
Utilisez npm create vite pour créer un projet React avec Vite appelé exercice-1.
Remplacez le contenu du fichier src/App.jsx par celui-ci :

import './App.css'

function App() {
    
  return (
    <>
      
    </>
  )
}

export default App

Dans un fichier src/User.jsx créez et exportez un composant User dont le HTML est le suivant :

<article>
    <h2>Email de l'utilisateur</h2>
</article>

Faites en sorte d'utiliser les props pour afficher l'email de l'utilisateur dans le <h2>
Dans votre fichier src/App.jsx, importez le composant User et envoyez lui une prop email

Exercice 2 : envoyer deux props simples

Dans le dossier props
Utilisez npm create vite pour créer un projet React avec Vite appelé exercice-2.
Remplacez le contenu du fichier src/App.jsx par celui-ci :

import './App.css'

function App() {
    
  return (
    <>
      
    </>
  )
}

export default App

Dans un fichier src/User.jsx créez et exportez un composant User dont le HTML est le suivant :

<article>
    <h2>Nom d'utilisateur</h2>
    <a href="">Email de l'utilisateur</a>
</article>

Faites en sorte d'utiliser les props pour afficher le username de l'utilisateur dans le <h2>
Faites en sorte d'utiliser les props pour afficher l'email de l'utilisateur dans le <a>
Dans votre fichier src/App.jsx, importez le composant User et envoyez lui une prop email et une prop username

Exercice 3 : envoyer les props dans un objet

Dans le dossier props
Utilisez npm create vite pour créer un projet React avec Vite appelé exercice-3.
Remplacez le contenu du fichier src/App.jsx par celui-ci :

import './App.css'

function App() {
    
  return (
    <>
      
    </>
  )
}

export default App

Dans un fichier src/User.jsx créez et exportez un composant User dont le HTML est le suivant :

<article>
    <h2>Prénom et Nom de l'utilisateur</h2>
    <a href="">Email de l'utilisateur</a>
</article>

Faites en sorte d'utiliser les props pour afficher le prénom et le nom de l'utilisateur dans le <h2>
Faites en sorte d'utiliser les props pour afficher l'email de l'utilisateur dans le <a>
Dans votre fichier src/App.jsx, importez le composant User et envoyez-lui une prop user qui est un objet avec la structure suivante :

let user = {
    firstName : "Alain",
    lastName: "Terieur",
    email : "alain.terieur@inlook.com"
};

Exercice 4 : props et boucle

Dans le dossier props
Utilisez npm create vite pour créer un projet React avec Vite appelé exercice-4.
Remplacez le contenu du fichier src/App.jsx par celui-ci :

import './App.css'

function App() {
    
  return (
    <>
      
    </>
  )
}

export default App

Dans un fichier src/User.jsx créez et exportez un composant User dont le HTML est le suivant :

<article>
    <h2>Prénom et Nom de l'utilisateur</h2>
    <a href="">Email de l'utilisateur</a>
</article>

Faites en sorte d'utiliser les props pour afficher le prénom et le nom de l'utilisateur dans le <h2>
Faites en sorte d'utiliser les props pour afficher l'email de l'utilisateur dans le <a>
Dans votre fichier src/App.jsx, importez le composant User vous allez créer une boucle sur le tableau suivant :

let user = [
    {
        firstName : "Alain",
        lastName: "Terieur",
        email : "alain.terieur@inlook.com"
    },
    {
        firstName : "Alex",
        lastName: "Terieur",
        email : "alex.terieur@outlook.com"
    },
];

Pour chaque objet de ce tableau : appelez un composant User et envoyez-lui dans une prop user l'objet du tableau

28 January 2026