Exercices bonus

Exercice ReadMore

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

import './App.css'

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

export default App

Pour cet exercice, vous allez créer un nouveau composant ReadMore, qui sera un article qui peut être ouvert ou fermé.

S'il est ouvert son HTML sera :

<article>
    <header>
        <h2>
            Le titre de l'article
        </h2>
    </header>
    <section>
        Le corps de l'article
    </section>
    <footer>
        <button onClick={toggleOpen}>Voir moins</button>
	</footer>
</article>

Si il est fermé :

<article>
    <header>
        <h2>
            Le titre de l'article
        </h2>
    </header>
    <footer>
		<button onClick={toggleOpen}>Voir plus</button>
	</footer>
</article>

Exercice ToastMessage

ToastMessage

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

import './App.css'

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

export default App

Pour cet exercice, vous allez créer un nouveau composant ToastMessage. Il contient un message d'information et un bouton pour effacer ce message une fois qu'il a été lu.

Vous allez également devoir lui créer un fichier CSS pour gérer son style, n'oubliez pas d'importer le fichier CSS dans votre composant.

Le HTML attendu s'il est visible :

<article className="toastMessage">
    <p>
        Ceci est le texte de mon message
    </p>
    <button onClick={dismiss}>X</button>
</article>

S'il est invisible :

<article className="dismissed">
    <p>
        Ceci est le texte de mon message
    </p>
    <button onClick={dismiss}>X</button>
</article>

Lorsqu'il est visible, le message doit ressembler à ceci :

29 January 2026