Afficher une question

Comment afficher une question dans la page (et pas seulement dans la console) ?

Objectifs

Comprendre le fonctionnement du JSX dans React.
Utiliser useState pour afficher dynamiquement une question.
Apprendre à afficher une question et ses réponses dans une page Web.

Notions théoriques

1. Qu’est-ce que JSX ?

JSX est une extension de JavaScript qui permet d’écrire du HTML directement dans le code JavaScript. C’est ce que vous utilisez dans un composant React.

Exemple :

return <h1>Bienvenue sur le Quiz Cyber</h1>;

Ici, on retourne un élément HTML (<h1>) dans du JavaScript.

Avantages

JSX rend le code plus lisible et plus proche de ce qu’on voit à l’écran.

Pourquoi JSX est utile ?

Il permet de lier facilement les données et l’interface.
Il rend l’affichage dynamique : le contenu peut changer en fonction de l’état de l’application.

2. Qu’est-ce que `useState` ?

useState est un hook de React. Il permet de gérer une donnée qui peut changer dans le temps, comme :

une question actuelle,
un score,
une réponse sélectionnée.

Voici comment on l’utilise :

const [compteur, setCompteur] = useState(0);

compteur contient la valeur actuelle.
setCompteur est une fonction qui permet de modifier cette valeur.
useState(0) initialise la valeur à 0 (valeur de départ).

3. Afficher dynamiquement une question

On va utiliser useState pour stocker une question et ses réponses, puis les afficher dans la page.

Exemple :

const [question, setQuestion] = useState({
  texte: "Qu’est-ce qu’un mot de passe fort ?",
  reponses: ["123456", "azerty", "Une phrase longue avec des caractères spéciaux"]
});

astuce

Ici, question est un objet avec :

une propriété texte pour le texte de la question,
une propriété reponses qui est un tableau de réponses possibles.

Ensuite, dans le JSX :

<h2>{question.texte}</h2>
<ul>
  {question.reponses.map((reponse, index) => (
    <li key={index}>{reponse}</li>
  ))}
</ul>

info

{question.texte} affiche le texte de la question.
La méthode .map() permet de parcourir le tableau des réponses et d’afficher chaque réponse dans une liste.
key={index} est nécessaire pour que React puisse identifier chaque élément de la liste.

Quelques méthodes à connaître

Méthode	Description
`useState(valeurInitiale)`	Initialise une variable d’état
`setX(nouvelleValeur)`	Met à jour la valeur de l’état
`.map()`	Permet de transformer un tableau en une liste d’éléments
`{}` dans JSX	Permet d’insérer du JavaScript dans du HTML
`key={index}`	Permet à React d’identifier chaque élément de la liste

Test de mémorisation / compréhension

TP pour réfléchir et résoudre des problèmes

Contexte

Vous avez déjà une fonction fetchQuestion() dans le fichier app/page.tsx qui récupère une question depuis Supabase :

"use client"

import { useEffect } from 'react';
import { supabase } from '../lib/supabaseClient';

export default function Home() {
  useEffect(() => {
    async function fetchQuestion() {
      const { data, error } = await supabase
        .from('question')
        .select('*')
        .limit(1);

      if (error) console.error(error);
      else console.log(data);
    }

    fetchQuestion();
  }, []);

  return <h1>Bienvenue sur CyberQuiz</h1>;
}

Objectif

On va maintenant afficher la question du Quiz, dans la page au lieu de l’afficher dans la console.

Étape 1 : Créer une nouvelle branche Git

git checkout -b affichage-question

Étape 2 : Ouvrir la page d'accueil

Ouvrez votre projet dans Visual Studio Code.
Ouvrez le fichier app/page.tsx.

Étape 3 : Ajouter `useState`

Ajouter useState pour stocker la question

Dans le fichier app/page.tsx, commencez par ajouter useState à l’import de React :

import { useEffect, useState } from 'react';

Cela permet d'utiliser useState dans notre composant React. C’est une fonction spéciale (un hook) qui permet de stocker des données qui peuvent changer.

Voici à quoi doit ressembler le début du fichier app/page.tsx :

"use client"

import { useEffect, useState } from 'react';
import { supabase } from '../lib/supabaseClient';

...

Et dans le composant Home(), ajoute cette ligne juste avant useEffect :

const [question, setQuestion] = useState<any>(null);

Pour l’instant, on utilise any pour simplifier. Cela signifie "n’importe quel type de donnée". Voici à quoi doit ressembler le début du composant Home() :

export default function Home() {
  const [question, setQuestion] = useState<any>(null);  

  ...

Étape 4 : Enregistrer la question

Dans la fonction fetchQuestion(), on va enregistrer la question dans question au lieu de juste l’afficher dans la console.

Modifiez la fonction fetchQuestion() comme ceci :

    async function fetchQuestion() {
      const { data, error } = await supabase
        .from('question')
        .select('*');

      if (error) console.error(error);
      else setQuestion(data[0]); // On stocke la première question dans l’état
    }

info

On utilise setQuestion(data[0]) pour mettre à jour la variable question avec les données récupérées depuis Supabase.
On a retiré .limit(1) pour récupérer toutes les questions.
Notez que data est un tableau, donc pour avoir la première question, on utilise data[0].

Étape 5 : Afficher la question à l’écran

Dans le return, on va maintenant afficher dynamiquement la question si elle est chargée.

Modifiez le return comme ceci :

return (
  <div>
    <h1>Bienvenue sur CyberQuiz</h1>

    {question ? (
      <div>
        <h2>{question.texte}</h2>
      </div>
    ) : (
      <p>Chargement de la question...</p>
    )}

  </div>
);

astuce

Les accolades {} permettent d’écrire du JavaScript dans du HTML (JSX). On affiche ici le texte de la question.

Étape 6 : Testez votre travail

Lancez votre projet avec la commande :

npm run dev

Allez dans votre navigateur à l’adresse :
http://localhost:3000/
Vous devez voir le texte de la question s’afficher.

Nous allons maintenant améliorer l’interface avec les composants de ShadCN/UI https://ui.shadcn.com/.

Étape 7 : Installer les dépendances

Installer les dépendances de ShadCN

Dans le terminal, exécutez la commande suivante pour installer ShadCN :

npx shadcn@latest init

Ok to proceed? (y) → Répondez à la question par y
Which color would you like to use as the base color? → Appuyez sur Entrée pour garder la couleur par défaut.

Étape 8 : Installer un composant

Installer un composant ShadCN (Card)

Dans le terminal, tapez :

npx shadcn@latest add card

Cela va installer le composant Card, que nous allons utiliser pour afficher la question.

Étape 9 : Utiliser un composant

Utiliser le composant Card pour afficher la question

Dans le fichier app/page.tsx, importez les composants nécessaires :

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

Puis modifiez la partie du return qui affiche la question :

{question ? (
  <Card className="max-w-xl mx-auto mt-6">
    <CardHeader>
      <CardTitle>Question</CardTitle>
    </CardHeader>
    <CardContent>
      <p>{question.texte}</p>
    </CardContent>
  </Card>
) : (
  <p>Chargement de la question...</p>
)}

Étape 10 : Testez votre travail

Lancez votre projet avec la commande :

npm run dev

Allez dans votre navigateur à l’adresse :
http://localhost:3000/
Vous devez voir le texte de la question s’afficher.

Étape 11 : Mettre à jour le dépôt

Mettre à jour le dépôt sur GitHub

Une fois que votre modification est terminée, pensez à commiter votre travail.
```
git add .
git commit -m "Ajout de l'affichage de la question"
```
Puis, revenez sur main et fusionnez votre branche.

Voici la commande pour revenir sur la branche main :
```
git checkout main  
```
Voici la commande pour fusionner la branche affichage-question dans la branche main :
```
git merge affichage-question  
```
Et enfin, pensez à enregistrer votre travail sur GitHub.

Voici la commande pour "pousser" la branche main :
```
git push  
```

Pour plus de détails sur l'utilisation de Git, consultez le tutoriel Git.

Une solution complète

Code complet de app/page.tsx

Améliorer l'affichage (bonus)

Améliorer le titre avec un composant ShadCN/UI

Maintenant que vous avez installé la bibliothèque ShadCN/UI, vous pouvez explorer ses composants pour améliorer l’interface de votre application.

Objectif

Afficher le titre "Bienvenue sur CyberQuiz" de façon plus esthétique, en utilisant un composant ShadCN de votre choix.

Étape 1 : Créer une nouvelle branche Git

git checkout -b affichage-ameliore

Étape 2 : Visiter le site de ShadCN

Rendez-vous sur la documentation officielle de ShadCN :

https://ui.shadcn.com/docs/components

Vous y trouverez une galerie complète de composants : alert, badge, button, card, dialog, tooltip, typography, etc.

Étape 3 : Choisir un composant

Parmi les composants proposés, choisissez-en un qui pourrait servir à mettre en valeur le titre de votre page, par exemple :

Alert pour un encadré stylisé
Badge pour ajouter un petit label
Typography pour styliser le texte
Popover ou Tooltip pour ajouter une info-bulle
Sheet ou Dialog pour une introduction animée
Ou même Button, si vous voulez rendre le titre interactif

Étape 4 : Ajouter le composant

1. Installez le composant avec la commande :

npx shadcn@latest add nom-du-composant

Par exemple :

npx shadcn@latest add alert

2. Importez le composant dans `app/page.tsx` :

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

3. Remplacez le titre actuel par une version plus esthétique :

<Alert className="max-w-xl mx-auto mt-4">
  <AlertTitle>Bienvenue sur CyberQuiz</AlertTitle>
  <AlertDescription>
    Préparez-vous à tester vos connaissances !
  </AlertDescription>
</Alert>

Étape 5 : Personnalisez l'affichage

Vous pouvez :

Ajouter une icône
Changer les couleurs avec Tailwind CSS
Ajouter une animation ou un effet au chargement
Utiliser un composant différent pour un rendu original

Exemple de rendu

Voici un exemple de rendu avec le composant Alert :

<Alert className="bg-blue-50 border-blue-300 text-blue-800 max-w-xl mx-auto mt-6">
  <AlertTitle className="text-xl font-semibold">Bienvenue sur CyberQuiz</AlertTitle>
  <AlertDescription>
    Un quiz pour tester vos connaissances en cybersécurité.
  </AlertDescription>
</Alert>

Étape 6 : Mettre à jour le dépôt

Mettre à jour le dépôt sur GitHub

Une fois que votre modification est terminée, pensez à commiter votre travail.
```
git add .
git commit -m "Amélioration de l'affichage"
```
Puis, revenez sur main et fusionnez votre branche.

Voici la commande pour revenir sur la branche main :
```
git checkout main  
```
Voici la commande pour fusionner la branche affichage-ameliore dans la branche main :
```
git merge affichage-ameliore  
```
Et enfin, pensez à enregistrer votre travail sur GitHub.

Voici la commande pour "pousser" la branche main :
```
git push  
```

Pour plus de détails sur l'utilisation de Git, consultez le tutoriel Git.

Une solution complète bonus

Code complet de app/page.tsx

À vous de jouer

Explorez les composants, testez, combinez, amusez-vous avec l'interface !

L'objectif est de rendre votre application plus agréable à utiliser et plus professionnelle visuellement.

Vous pouvez choisir un autre composant, comme Tooltip, Badge ou Dialog, et l’adapter selon vos préférences.

N’hésitez pas à consulter la documentation https://ui.shadcn.com/docs/components pour découvrir toutes les possibilités offertes par ShadCN/UI !

Notions théoriques​

1. Qu’est-ce que JSX ?​

2. Qu’est-ce que useState ?​

3. Afficher dynamiquement une question​

Quelques méthodes à connaître​

Test de mémorisation / compréhension​

À quoi sert `useState` en React ?

Que signifie JSX ?

Quelle est la bonne syntaxe pour afficher une variable dans du JSX ?

Quelle méthode permet d’afficher chaque élément d’un tableau ?

Pourquoi faut-il ajouter une `key` dans une boucle `.map()` ?

TP pour réfléchir et résoudre des problèmes​

Contexte​

Objectif​

Étape 1 : Créer une nouvelle branche Git​

Étape 2 : Ouvrir la page d'accueil​

Étape 3 : Ajouter useState​

Étape 4 : Enregistrer la question​

Étape 5 : Afficher la question à l’écran​

Étape 6 : Testez votre travail​

Étape 7 : Installer les dépendances​

Étape 8 : Installer un composant​

Étape 9 : Utiliser un composant​

Étape 10 : Testez votre travail​

Étape 11 : Mettre à jour le dépôt​

Une solution complète​

Améliorer l'affichage (bonus)​

Objectif​

Étape 1 : Créer une nouvelle branche Git​

Étape 2 : Visiter le site de ShadCN​

Étape 3 : Choisir un composant​

Étape 4 : Ajouter le composant​

1. Installez le composant avec la commande :​

2. Importez le composant dans app/page.tsx :​

3. Remplacez le titre actuel par une version plus esthétique :​

Étape 5 : Personnalisez l'affichage​

Exemple de rendu​

Étape 6 : Mettre à jour le dépôt​

Une solution complète bonus​

À vous de jouer​

Notions théoriques

1. Qu’est-ce que JSX ?

2. Qu’est-ce que `useState` ?

3. Afficher dynamiquement une question

Quelques méthodes à connaître

Test de mémorisation / compréhension

TP pour réfléchir et résoudre des problèmes

Contexte

Objectif

Étape 1 : Créer une nouvelle branche Git

Étape 2 : Ouvrir la page d'accueil

Étape 3 : Ajouter `useState`

Étape 4 : Enregistrer la question

Étape 5 : Afficher la question à l’écran

Étape 6 : Testez votre travail

Étape 7 : Installer les dépendances

Étape 8 : Installer un composant

Étape 9 : Utiliser un composant

Étape 10 : Testez votre travail

Étape 11 : Mettre à jour le dépôt

Une solution complète

Améliorer l'affichage (bonus)

Objectif

Étape 1 : Créer une nouvelle branche Git

Étape 2 : Visiter le site de ShadCN

Étape 3 : Choisir un composant

Étape 4 : Ajouter le composant

1. Installez le composant avec la commande :

2. Importez le composant dans `app/page.tsx` :

3. Remplacez le titre actuel par une version plus esthétique :

Étape 5 : Personnalisez l'affichage

Exemple de rendu

Étape 6 : Mettre à jour le dépôt

Une solution complète bonus

À vous de jouer