Exercices sur le state

Exercice 0

Dans le dossier bre05-react-j2, créez un dossier state

Exercice 1 : state simple

Dans le dossier state
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>
</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
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 : state avec plusieurs informations

Dans le dossier state
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>
    <h3>Rôle de l'utilisateur</h3>
    <p>Statut de l'utilisateur</p>
</article>

Votre User va avoir un state qui contient son status pour dire s'il est connecté ou non et son role (Admin, Membre ou Anonyme)
Par défaut, le status est false
Par défaut, le role est Anonyme
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 <h3> doit afficher son rôle

Exercice 3 : state depuis les props

Dans le dossier state
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>Mari Doucet</h2>
    <h3>Rôle de l'utilisateur</h3>
    <p>Statut de l'utilisateur</p>
</article>

Votre User va avoir un state qui contient son status pour dire s'il est connecté ou non et son role (Admin, Membre ou Anonyme)
Par défaut, le status est false
Par défaut, il récupère son rôle depuis les props
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 <h3> doit afficher son rôle

28 January 2026