Évaluation simple adaptée à des élèves débutants en React. Elle couvre les concepts de base comme les composants, les props, l’état (state) et le rendu.
L’évaluation peut se faire en une session d’environ une heure.

Barème

• Partie 1 : 10 points

• Partie 1 bis : 10 points

• Partie 2 : 10 points

• Partie 3 : 10 points

• Total : 40 points

EXERCICES

Partie 1 : Questions théoriques (10 points)

Répondez aux questions suivantes :

1. Comment voir les versions de l’environnement : nodeJS, NPM, React? (1 points)

2. Quelle est la différence entre les props et le state dans React ? (2 points)

3. Pourquoi utilise-t-on className au lieu de class dans React ? (1 point)

4. À quoi sert la fonction useState dans un composant fonctionnel ? Donnez un exemple. (3 points)

5. Qu’est-ce que le Virtual DOM et pourquoi est-il important en React ? (2 points)

Partie 1 bis : dans le projet des couleurs créer une page pour la partie 2 et une page pour la partie 3 de cette évaluation (10 points)

1. Ouvrer le projet des couleurs que l’on a fait ensemble

2. créer une nouvelle page pour exécuter le code de la partie 2 et une autre pour la partie 3. (5 points)

4. ajouter un item à la navigation (qui est dans le header) et écrire le routage pour accéder à ces pages. (5 points)

Partie 2 : Complétez le code (10 points)

Corrigez ou complétez le code ci-dessous pour qu’il affiche la liste des noms fournis dans le tableau names :

import React from "react";

const App = () => {
  const names = ["Alice", "Bob", "Charlie"];

  return (
    <div>
      <h1>Liste des noms</h1>
      <ul>
        {/* Afficher les noms ici */}
      </ul>
    </div>
  );
};

export default App;

1. Complétez le code pour que chaque nom apparaisse dans un <li> séparé. (5 points)
2. Ajoutez une clé unique pour chaque élément de la liste afin d’éviter les avertissements dans la console. (2 points)
3. Ajoutez une ligne indiquant combien de noms sont affichés dans la liste. (3 points)

Partie 3 : Choisir un exercice au choix

Créez un composant React simple (10 points)

Créez un composant nommé Counter qui fait ce qui suit :

1. Affiche un bouton avec le texte “Cliquez-moi”. (2 points)

2. Affiche un compteur qui commence à 0 et augmente de 1 à chaque clic sur le bouton. (5 points)

3. Ajoutez une logique qui change la couleur du compteur en rouge si le nombre est pair, et en bleu s’il est impair. (3 points)

Bonus : (1 point)

Ajouter un bouton pour réinitialiser le compteur à 0.

Création d’un formulaire interactif (10 points)

1. Affiche un formulaire avec : (4 points)

• Un champ texte pour entrer un nom.

• Un champ pour entrer une adresse e-mail.

• Un bouton “Soumettre”.

2. Lorsque l’utilisateur clique sur “Soumettre” :  (3 points)

• Le nom et l’adresse e-mail saisis doivent être affichés sous le formulaire dans une phrase comme :

“Bienvenue [Nom], votre adresse e-mail est [Email]”.

3. Si l’un des champs est vide, le formulaire ne doit pas être soumis et un message d’erreur doit s’afficher en rouge sous le formulaire : (3 points)

“Tous les champs doivent être remplis !”

Bonus : (1 point)

Ajoutez une logique pour réinitialiser les champs une fois le formulaire soumis avec succès.