Créer le projet avec Vite

En dix minutes, un vrai projet React + TypeScript tourne dans votre navigateur, et se met à jour à chaque sauvegarde.

Objectifs de la séance

• comprendre ce que sont React et Vite ;
• créer le projet quiz-cyber-web et le lancer ;
• reconnaître les fichiers importants et le rôle de main.tsx ;
• nettoyer le gabarit pour partir d'une base simple ;
• lancer la vérification TypeScript avec npm run build ;
• faire le premier commit Git.

---

Notions théoriques

React et Vite : qui fait quoi ?

• React est une bibliothèque JavaScript créée par Meta pour construire des interfaces. Vous décrivez ce qui doit s'afficher, React met l'écran à jour.
• Vite (prononcez « vit ») est l'outil de développement : il lance un serveur local, recharge la page à chaque sauvegarde et fabrique la version de production.
• TypeScript vérifie votre code avant de l'exécuter (voir la partie 6 du cours JavaScript).

On les associe grâce à un gabarit (template) : un projet de départ prêt à l'emploi.

Créer le projet

Dans un terminal, placez-vous dans le dossier qui contiendra votre projet, puis tapez :

npm create vite@latest quiz-cyber-web -- --template react-ts
cd quiz-cyber-web
npm install
npm run dev

• npm create vite@latest télécharge l'outil de création de projet ;
• --template react-ts choisit le gabarit React + TypeScript ;
• npm install télécharge les bibliothèques listées dans package.json ;
• npm run dev lance le serveur de développement.

Si l'outil pose des questions

Selon la version de l'outil, il peut proposer des options (par exemple installer et lancer immédiatement). Gardez les choix par défaut : vous tapez de toute façon vous-même npm install puis npm run dev.

Le terminal affiche une adresse, en général http://localhost:5173. Ouvrez-la dans votre navigateur : la page de démonstration de Vite et React s'affiche. Ouvrez ensuite le dossier dans VS Code (code .).

Pour arrêter le serveur : Ctrl + C dans le terminal.

Les fichiers du projet

quiz-cyber-web/
├── index.html          ← l'unique page HTML de l'application
├── package.json        ← dépendances et commandes (scripts)
├── vite.config.ts      ← configuration de Vite
├── tsconfig.json       ← configuration de TypeScript
├── public/             ← fichiers servis tels quels (icône, données...)
└── src/
    ├── main.tsx        ← point d'entrée : démarre React
    ├── App.tsx         ← le composant racine de l'application
    └── index.css       ← styles globaux

Les commandes disponibles se trouvent dans la section scripts de package.json :

Commande	Rôle
npm run dev	serveur de développement avec rechargement automatique
npm run build	vérifie les types (tsc) puis fabrique la version de production dans dist/
npm run preview	teste localement la version de production
npm run lint	analyse le code à la recherche de mauvaises pratiques

Le point d'entrée : main.tsx

src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Lisez-le ligne à ligne :

1. index.html contient une balise vide <div id="root"></div> ;
2. document.getElementById('root') la récupère. Le ! final dit à TypeScript : « je garantis qu'elle existe » (c'est l'un des rares endroits où cette écriture est acceptable) ;
3. createRoot(...).render(...) demande à React de dessiner l'application dans cette balise ;
4. <App /> est le composant racine ;
5. <StrictMode> est un outil de développement qui exécute volontairement certains codes deux fois pour détecter les erreurs de conception (les effets mal nettoyés, par exemple). Il n'a aucun effet en production.

Les conventions de style

Le gabarit de Vite utilise des guillemets simples et pas de point-virgule. Dans ce cours, vous écrirez avec des guillemets doubles et des points-virgules, comme dans le cours JavaScript. Les deux styles fonctionnent : l'important est de rester cohérent dans un même projet.

TypeScript est déjà configuré

Le gabarit est en mode strict : TypeScript vérifie rigoureusement les types. Il ne bloque pas npm run dev (la page s'affiche même s'il y a une erreur de type), mais il bloque npm run build. Votre éditeur souligne aussi les erreurs en rouge.

src/App.tsx(2,7): error TS2322: Type 'string' is not assignable to type 'number'.

Prenez l'habitude de lancer npm run build régulièrement : c'est le filet de sécurité du projet.

Nettoyer le gabarit

Le gabarit contient des images et des styles de démonstration. Vous allez les retirer pour partir d'un projet vide : supprimez src/App.css et le dossier src/assets/, puis remplacez le contenu de App.tsx et de index.css.

---

Test de mémorisation/compréhension

Quel est le rôle de Vite dans le projet ?

Remplacer React pour dessiner l'interface dans le navigateur

Vérifier uniquement l'orthographe du code

Lancer le serveur local et construire la version finale

Stocker les données du quiz dans une base

Fabriquer des images pour l'application

Quelle commande lance le serveur de développement ?

npm run dev

npm run build

npm run preview

npm install dev

npm start vite --dev-server

Que fait createRoot(document.getElementById("root")).render(<App />) ?

Il crée un nouveau fichier App.tsx dans le projet

Il télécharge les dépendances depuis npm

Il envoie l'application sur un serveur distant

Il lance les tests unitaires de l'application

Il dessine App dans la balise root

Que fait npm run build avec ce gabarit ?

Lance uniquement le serveur local de développement

Vérifie les types puis construit dist/

Supprime les fichiers inutilisés du projet

Installe les bibliothèques manquantes

Convertit le projet en application mobile

À quoi sert StrictMode en développement ?

À interdire l'utilisation de JavaScript sans types dans le projet

À ralentir volontairement l'application en production

À chiffrer les données échangées avec le serveur

À repérer des erreurs en exécutant du code deux fois

À empêcher l'utilisation de composants imbriqués

Un fichier est placé dans le dossier public/. Que devient-il ?

Il est compilé par TypeScript avant d'être servi

Il est supprimé lors du build

Il est automatiquement converti en composant React

Il est envoyé sur GitHub sans passer par Git

Il est servi tel quel par le serveur

---

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

Votre mission : créer le projet quiz-cyber-web, le nettoyer, puis vérifier qu'il compile.

Étape 1 — Créer et lancer le projet

Dans un terminal, créez le projet avec le gabarit React + TypeScript.

Bonne pratique - Un terminal pour le serveur

Laissez le serveur tourner dans un terminal et utilisez un second terminal (VS Code permet d'en ouvrir plusieurs) pour les autres commandes.

Étape 2 — Nettoyer le gabarit

Supprimez src/App.css et le dossier src/assets/. Remplacez ensuite le contenu de src/App.tsx pour afficher un simple titre.

Bonne pratique - Un composant, une fonction

Un composant est une fonction dont le nom commence par une majuscule et qui renvoie du JSX. App n'est rien d'autre que cela.

Étape 3 — Adapter la page et les styles

Dans index.html, passez la langue à fr et le titre à Quiz Cyber. Remplacez ensuite le contenu de src/index.css par les styles de départ du quiz (à copier tels quels, ils serviront pour toute la série).

src/index.css

:root {
  font-family: system-ui, Arial, sans-serif;
  color: #1f2937;
  background-color: #f4f6fb;
}

body {
  margin: 0;
}

#root {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
}

.entete {
  margin-bottom: 24px;
}

.entete h1 {
  margin: 0;
}

.carte {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.indice {
  color: #8a5a00;
}

.reponses {
  list-style: none;
  padding: 0;
}

button {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #9aa5c4;
  background: #dde4f5;
  font-size: 1rem;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.reponse-correcte {
  background: #c8e6c9;
}

.reponse-fausse {
  background: #ffcdd2;
}

.erreur {
  color: #b00020;
}

Bonne pratique - lang sur la balise html

L'attribut lang="fr" aide les lecteurs d'écran à prononcer correctement le texte : c'est un geste d'accessibilité qui ne coûte rien.

Étape 4 — Provoquer et lire une erreur de type

Ajoutez volontairement une erreur de type dans App.tsx, puis lancez npm run build.

Bonne pratique - Le build comme garde-fou

npm run dev laisse passer certaines erreurs de type. npm run build ne laisse rien passer : lancez-le avant chaque commit.

Étape 5 — Le premier commit

Le gabarit crée déjà un fichier .gitignore qui exclut node_modules/ et dist/. Initialisez Git et faites le premier commit.

Bonne pratique - Ne jamais commiter node_modules

Le dossier node_modules/ pèse des centaines de mégaoctets et se reconstruit avec npm install. Le .gitignore du gabarit l'exclut déjà : vérifiez que la ligne y figure.

📌 Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Ce qu'il faut retenir

Notion	Résumé
React / Vite / TypeScript	La bibliothèque d'interface, l'outil de développement et le vérificateur de types.
npm run dev	Serveur local avec rechargement automatique (http://localhost:5173).
npm run build	Vérifie les types puis fabrique la version de production dans dist/.
main.tsx	Démarre React dans la balise #root et affiche le composant App.
public/	Fichiers servis tels quels (nous y mettrons les questions).
.gitignore	Exclut node_modules/ et dist/ de Git.

Aperçu de la prochaine séance

Votre projet tourne. Dans la prochaine séance, vous allez créer vos premiers composants (EnTete, Carte), comprendre la syntaxe JSX et ses différences avec le HTML, et appliquer des styles avec className.