React : un quiz Cyber pour le Web

Dans cette série, vous allez créer pas à pas une application Web avec React, Vite et TypeScript : un quiz sur la cybersécurité.

Le joueur saisit son pseudo, choisit un niveau, répond à des questions chargées depuis un fichier de données, voit son chronomètre tourner, puis découvre son score. À chaque étape, vous écrivez le code à la main, en comprenant chaque ligne.

Ce que vous allez apprendre

• créer un projet React + TypeScript avec Vite ;
• écrire des composants, des props, des listes et des conditions ;
• gérer l'état (useState, useReducer), les formulaires et les événements ;
• charger des données avec fetch et useEffect, sans bug (annulation, erreurs, validation) ;
• créer ses propres hooks ;
• naviguer entre plusieurs pages avec React Router et partager des données avec un contexte ;
• tester son code avec Vitest, puis le construire pour la production ;
• habiller l'application avec Tailwind CSS et shadcn/ui.

React sur le Web ou sur mobile ?

React est la même bibliothèque utilisée sur le Web ou pour une application mobile avec Expo : composants, props, état et effets fonctionnent de façon identique. Seuls les éléments de base changent.

	React (Web)	React Native avec Expo (mobile)
Briques	<div>, <p>, <button>, <input>	<View>, <Text>, <Pressable>
Texte	n'importe où	toujours dans un <Text>
Style	fichiers CSS, attribut className	objets StyleSheet, attribut style
Appui	onClick	onPress
Navigation	React Router (URL du navigateur)	Expo Router
Résultat	un site Web	une application Android, iOS et Web

Le fil conducteur : un quiz sur la cybersécurité

Tous les exemples du cours tournent autour d'un quiz de cybersécurité : des questions, des réponses, un score, un classement. C'est exactement le projet que vous réaliserez dans la série Expo. Les mots (enonce, reponses, estCorrecte, niveau...) seront donc déjà familiers le jour où vous créerez l'application.

Tutoriel	Contenu
1. Démarrer avec React	projet Vite, composants, JSX, props, listes
2. État et événements	useState, formulaires, remonter l'état, useReducer
3. Effets et données	useEffect, fetch robuste, hooks personnalisés
4. Navigation et contexte	React Router, paramètres validés, contexte
5. Qualité et production	tests Vitest, build, variables d'environnement
6. shadcn/ui	Tailwind CSS, boutons, cartes, fenêtre modale

Prérequis

• le cours JavaScript et TypeScript (au minimum les parties 1 à 6, la partie 7 étant un aperçu de ce qui est détaillé ici) ;
• un ordinateur avec Node.js 22.13 ou plus récent et VS Code ;
• quelques notions de HTML et de CSS.

remarque

Pour Next.js, le framework qui s'appuie sur React pour le rendu côté serveur, la série Next.js montre un exemple complet.