Exercices sur les props

Exercice 4

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

Vous allez devoir créer un composant Student que vous appelerez dans un boucle dans votre composant App, vous allez utiliser les props pour afficher pour chaque étudiant-e son nom et ses notes.

Rendu HTML attendu :

<section>
  <h2>Étudiant-e-s</h2>
  <ul>
    <li>
      <article>
        <h3>
          Alan
        </h3>
        <ul>
          <li>
            12
          </li>
          <li>
            11
          </li>
          <li>
            10
          </li>
        </ul>
      </article>
    </li>
    [...]
  </ul>
</section>

Les données :

const students = [
  { notes: [12, 11, 10], name: "Alan" },
  { notes: [18, 10, 19], name: "Alice" },
  { notes: [10, 9, 11], name: "Bernard" },
  { notes: [11, 17, 19], name: "Sophie" },
];

Exercice 5

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

Nous allons modifier un peu nore composant Student de l'exercice 4, maintenant au lieu de simplement afficher la liste des notes, il va également calculer la moyenne de ces notes et l'afficher :

Rendu HTML attendu :

<section>
  <h2>Étudiant-e-s</h2>
  <ul>
    <li>
      <article>
        <h3>
          Alan
        </h3>
        <ul>
          <li>
            12
          </li>
          <li>
            11
          </li>
          <li>
            10
          </li>
        </ul>
        <p>
        Moyenne : 11
        </p>
      </article>
    </li>
    [...]
  </ul>
</section>

Les données n'ont pas changé :

const students = [
  { notes: [12, 11, 10], name: "Alan" },
  { notes: [18, 10, 19], name: "Alice" },
  { notes: [10, 9, 11], name: "Bernard" },
  { notes: [11, 17, 19], name: "Sophie" },
];

26 January 2026