Exercices sur la syntaxe JSX

Exercice 0

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

Exercice 1

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éez un composant Article qui affichera le html suivant :

<article>
    <h2>Titre de l'article</h2>
    <p>Contenu de l'article</p>
</article>

Importez votre composant Article et affichez-le dans votre App

Exercice 2

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

Vous allez devoir créer un composant simple, que vous appelerez Recipe et qui affichera le HTML suivant :

<article>
  <h2>La recette de la pâte à crèpes</h2>
  <h3>Ingrédients</h3>
  <ul>
    <li>Oeufs</li>
    <li>Lait</li>
    <li>Farine</li>
    <li>Beurre</li>
  </ul>
</article>

Utilisez le tableau suivant pour représenter la liste de vos ingrédients :

const ingredients = ["Oeufs", "Lait", "Farine", "Beurre"];

Exercice 3

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

Vous allez réutiliser votre composant Recipe de l'exercice 2 et lui ajouter un composant imbriqué appelé Steps, le rendu HTML final doit être le suivant :

<article>
  <h2>La recette de la pâte à crèpes</h2>
  <h3>Ingrédients</h3>
  <ul>
    <li>Oeufs</li>
    <li>Lait</li>
    <li>Farine</li>
    <li>Beurre</li>
  </ul>
  <h3>Étapes</h3>
  <ol>
    <li>Faire un puits avec la farine et y verser les oeufs</li>
    <li>Battre les oeufs et la farine et y incorporer doucement le lait</li>
    <li>Faire fondre le beurre et l'ajouter au mélange</li>
  </ol>
</article>

Utilisez le tableau suivant pour représenter la liste de vos étapes :

const steps = [
"Faire un puits avec la farine et y verser les oeufs", 
"Battre les oeufs et la farine et y incorporer doucement le lait", 
"Faire fondre le beurre et l'ajouter au mélange"
];

26 January 2026