Exercices sur les formulaires

Exercice 0

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

Exercice 1 : utiliser onChange pour modifier un texte

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

Créer un composant Note dans un fichier Note.jsx dont le HTML doit être le suivant :

<p>
    Contenu du message
</p>
<form>
    <label for="message">
        Message :
    </label>
    <input type="text" id="message" name="message" />
    <button type="submit">Valider</button>
</form>

Lorsque le contenu de votre input change, vous devez en même temps modifier le contenu du <p>
Dans cet exercice : pas besoin de gérer le submit

Exercice 2 : utiliser on Submit pour simuler une connexion

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

Créer un composant Login dans un fichier Login.jsx dont le HTML doit être le suivant :

Si l'utilisateur est connecté :

<p>Vous êtes connecté</p>

Si l'utilisateur est déconnecté :

<form>
    <div>
        <label for="email">
            Email
        </label>
        <input type="email" name="email" id="email" />
    </div>
    <div>
        <label for="password">
            Password
        </label>
        <input type="password" name="password" id="password" /> 
    </div>
    <button type="submit">Connexion</button>
</form>

Lors de la soumission du formulaire s'il y a bien un email et un mot de passe, vous devez modifier le state pour indiquer que l'utilisateur est connecté.

Exercice 3 : Utiliser un formulaire pour alimenter une liste

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

Créer un composant ToDoList dans un fichier ToDoList.jsx dont le HTML doit être le suivant :

<ul>
    <li>Tache 1</li>
    <li>Tache 2</li>
    <li>Tache 3</li>
    <li>...</li>
</ul>
<form>
    <label for="task">
        Tâche :
    </label>
    <input type="text" id="task" name="task" />
    <button type="submit">Ajouter</button>
</form>

Lorsque le formulaire est soumis, vous devez ajouter une tâche à la liste contenue dans le state de votre composant

30 January 2026