Exercices sur les events

Exercice 0

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

Exercice 1 : Modifier un state simple

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>Mari Doucet</h2>
    <p>Statut de l'utilisateur</p>
    <button>Connecter</button>
</article>

Votre User va avoir un state qui contient son status pour dire s'il est connecté ou non
Par défaut, le status est false
Le bouton doit permettre de passer le statut de connecté à déconnecté et inversement
S'il est connecté, le contenu du <p> doit être En Ligne
S'il est déconnecté, le contenu du <p> doit être Hors Ligne

Exercice 2 : Même chose, mais deux composants

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>Mari Doucet</h2>
    <p>Statut de l'utilisateur</p>
    <button>Connecter</button>
</article>

Votre User va avoir un state qui contient son status pour dire s'il est connecté ou non
Dans votre App vous allez appeler deux fois votre composant User
Par défaut, le status est false
Le bouton doit permettre de passer le status de connecté à déconnecté et inversement
S'il est connecté, le contenu du <p> doit être En Ligne
S'il est déconnecté, le contenu du <p> doit être Hors Ligne

Exercice 3 : Modifier un state sous forme de tableau

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/List.jsx créez et exportez un composant List dont le HTML est le suivant :

<>
    <ul>
        <li>
            Nom du fruit 1
        </li>
        <li>
            Nom du fruit 2
        </li>
        <li>
            Nom du fruit 3
        </li>
        {/*...*/}
    </ul>
    <button>Supprimer le dernier fruit</button>
</>

Votre List va avoir un state qui contient un tableau avec la liste des fruits
Par défaut, le tableau est ["banane", "orange", "pomme", "citron", "mangue"]
Le bouton doit permettre de supprimer le dernier fruit du tableau
Vous devez avoir un li pour chacun des fruits du tableau (utilisez une boucle)

Exercice 4 : Modifier un state sous forme d'objet

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</h2>
    <p>Statut de l'utilisateur</p>
    <button>Connexion / Déconnexion</button>
</article>

Votre User va avoir un state qui contient ses informations : prénom, nom et s'il est connecté ou non
Par défaut, il est déconnecté
S'il est connecté, le contenu du <p> doit être En Ligne
S'il est déconnecté, le contenu du <p> doit être Hors Ligne
Le bouton doit permettre de modifier le statut de connexion
Dans le <h2> son prénom et son nom doivent venir du state

Exercice 5 : state et composants imbriqués

Utilisez npm create vite pour créer un projet React avec Vite appelé exercice-5.
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 :

<li>
    <article>
        <h2>Prénom et Nom</h2>
        <p>Statut de l'utilisateur</p>
        <button>Connexion / Déconnexion</button>
    </article>
</li>

Votre User va avoir un state qui contient ses informations : prénom, nom et s'il est connecté ou non
Par défaut, il est déconnecté
S'il est connecté, le contenu du <p> doit être En Ligne
S'il est déconnecté, le contenu du <p> doit être Hors Ligne
Le bouton doit permettre de modifier le statut de connexion
Dans le <h2> son prénom et son nom doivent venir du state
Dans un fichier src/UserList.jsx créez et exportez un composant UserList dont le HTML est le suivant :

<>
    <h1>Liste des utilisateurs</h1>
    <ul>
        {/* Ceci correspond à un composant User */}
        <li>
            <article>
                <h2>Prénom et Nom</h2>
                <p>Statut de l'utilisateur</p>
                <button>Connexion / Déconnexion</button>
            </article>
        </li>
        {/* Fin du composant User */}
    </ul>
</>

La liste des utilisateurs provient du tableau suivant :

let users = [
    {
        firstName: "Mari",
        lastName: "Doucet",
        loggedIn : true
    },
    {
        firstName: "Hugues",
        lastName: "Froger",
        loggedIn : false
    },
    {
        firstName: "Alain",
        lastName: "Terieur",
        loggedIn : true
    },
    {
        firstName: "Alex",
        lastName: "Terieur",
        loggedIn : false
    }
];

29 January 2026