# ⚛️ Tuto — créer ton premier projet React (depuis zéro)

Salut ! 👋 On passe à une nouvelle étape : faire un vrai **petit projet React**, dans un **sous-dossier de ce repo**. Le thème est **libre** (carte blanche !). Ce tuto part **de tout début** : on installe les outils, on explique **à quoi chacun sert**, puis on construit un mini-projet **bien rangé** (c'est le point le plus important : on découpe en plusieurs fichiers, pas un gros fourre-tout).

⏱️ Compte ~30-45 min la première fois. Avance étape par étape, ne saute rien.

---

## 0. Les outils et à quoi ils servent (lis avant d'installer)

Avant de taper des commandes « magiques », comprends **qui fait quoi** :

| Outil | C'est quoi | À quoi ça sert |
|---|---|---|
| **Node.js** | un programme qui fait tourner du **JavaScript en dehors du navigateur** (directement sur ta machine) | tous les outils de dev modernes tournent dessus. Sans Node, rien ne s'installe |
| **npm** | le **gestionnaire de paquets** de Node (installé **avec** Node) | télécharger/installer des bibliothèques (comme React) et lancer des commandes du projet |
| **Vite** | un **outil de démarrage de projet** + un **serveur de dev** ultra-rapide | crée le squelette du projet et l'affiche dans le navigateur, avec **rechargement automatique** quand tu modifies un fichier |
| **React** | une **bibliothèque** pour construire l'interface avec des **composants** réutilisables | écrire l'UI comme un assemblage de petits blocs (un bouton, une carte, une barre de nav…) |

> 💡 **Bonne nouvelle :** React, c'est l'idée que tu as **déjà** pratiquée à la main — ton `creerNavbar()` (une fonction qui renvoie du HTML réutilisable), c'était **un composant** avant l'heure. React, c'est ça, en mieux organisé.

---

## 1. Installer Node.js

React a besoin de Node. On l'installe une fois pour toutes.

### Windows
1. Va sur **https://nodejs.org** et télécharge la version **« LTS »** (la stable).
2. Lance l'installateur, **Suivant → Suivant** (laisse les options par défaut, elles ajoutent Node au PATH).

### Mac
1. Même site **https://nodejs.org**, version **« LTS »**, télécharge le `.pkg`.
2. Ouvre-le et suis l'installation.

### Vérifier que c'est bon (les deux)
Ouvre un **terminal** (sur Zed : `` Ctrl + ` `` ; sinon le Terminal de ton OS) et tape :
```bash
node -v
npm -v
```
Tu dois voir deux numéros de version (ex. `v20.11.0` et `10.2.4`). Si oui → Node **et** npm sont là. 🎉
Si « commande introuvable » : **ferme et rouvre** le terminal (parfois il faut le relancer après l'install).

> 🔎 `npm` s'installe **automatiquement avec** Node — tu n'as rien à faire de plus.

---

## 2. Créer le projet React (dans un sous-dossier du repo)

Dans le terminal, place-toi à la **racine de ce repo** (le dossier `stagiaire`). Puis lance :

```bash
npm create vite@latest
```

Vite va te poser **3 questions** :
1. **Project name** → donne un nom de dossier, ex. `mon-projet` (ce sera le sous-dossier créé ici).
2. **Select a framework** → choisis **React**.
3. **Select a variant** → choisis **JavaScript** (on garde simple ; pas TypeScript pour l'instant).

> 🔎 `npm create vite@latest` = « télécharge l'outil Vite et crée un nouveau projet ». Le `@latest` veut dire « la dernière version ».

Ça crée un dossier `mon-projet/` avec tout le squelette dedans.

---

## 3. Installer les dépendances

Entre dans le dossier et installe les bibliothèques :

```bash
cd mon-projet
npm install
```

- `cd mon-projet` = « entre dans le dossier du projet ».
- `npm install` = lit le fichier **`package.json`** (la liste des bibliothèques nécessaires) et les **télécharge** dans un dossier **`node_modules/`**.

> ⚠️ **`node_modules/` est énorme et ne se commite JAMAIS sur Git.** Vite a déjà créé un fichier `.gitignore` dans le projet qui l'ignore — laisse-le. (Si un jour tu vois des milliers de fichiers à committer, c'est que `node_modules` n'est pas ignoré : stop, on regarde ensemble.)

> 💡 **À retenir :** `package.json` = la **recette** (quelles bibliothèques, quelles commandes). `node_modules/` = les **ingrédients téléchargés**. On partage la recette (commitée), pas les ingrédients (ré-installables avec `npm install`).

---

## 4. Lancer le projet

```bash
npm run dev
```

Vite démarre un **serveur de dev** et t'affiche une adresse, du genre :
```
http://localhost:5173/
```
Ouvre-la dans le navigateur → tu vois la page React de démarrage. 🎉

> 🔎 Ça te rappelle quelque chose ? C'est le **même principe** que `localhost` qu'on a vu pour `fetch` : un petit serveur qui sert ta page en `http://`. Ici en plus, **dès que tu enregistres un fichier, la page se met à jour toute seule** (« hot reload »).

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

---

## 5. Le tour du propriétaire (la structure des fichiers)

Voici l'essentiel de ce que Vite a créé :

```
mon-projet/
├── index.html          ← la page de base (tu n'y touches presque jamais)
├── package.json        ← la recette (bibliothèques + commandes)
├── .gitignore          ← liste ce que Git doit ignorer (dont node_modules)
├── node_modules/       ← les bibliothèques (ignoré par Git)
├── public/             ← images/fichiers statiques
└── src/                ← 👈 TON code vit ici
    ├── main.jsx        ← le point d'entrée : branche React sur la page
    ├── App.jsx         ← le composant principal (ton appli)
    └── App.css         ← les styles
```

> 💡 **À retenir :** tu travailles **presque uniquement dans `src/`**. Et le fichier le plus important pour toi, c'est **`App.jsx`**.

---

## 6. JSX : du HTML dans le JavaScript

Ouvre `src/App.jsx`. Tu vois une fonction qui **renvoie quelque chose qui ressemble à du HTML** :

```jsx
function App() {
  return (
    <div>
      <h1>Mon appli</h1>
    </div>
  );
}
```

Ce « HTML dans le JS » s'appelle du **JSX**. C'est exactement l'idée de ton `creerNavbar()` (une fonction qui renvoie du HTML), mais en plus naturel : ici React s'occupe de l'afficher.

**Essaie tout de suite :** remplace le `<h1>` par ton titre, **enregistre**, et regarde le navigateur changer **tout seul**. C'est ça, le hot reload.

> 🔎 Deux petites différences avec le HTML normal : en JSX on écrit `className` au lieu de `class`, et chaque composant doit renvoyer **un seul** élément parent (souvent un `<div>` qui enveloppe le reste).

---

## 7. ⭐ LE point clé : découper en composants (1 composant = 1 fichier)

C'est **la** chose à bien faire dès le départ : **ne pas tout entasser dans `App.jsx`**. On découpe l'interface en **petits composants**, **chacun dans son propre fichier**. `App.jsx` ne fait alors qu'**assembler** ces blocs.

### ❌ Le piège à éviter (le fourre-tout)
```jsx
// App.jsx qui grossit, grossit... tout dedans : header + cartes + formulaire + footer...
function App() {
  return (
    <div>
      {/* 200 lignes de tout et n'importe quoi */}
    </div>
  );
}
```
C'est exactement le « fourre-tout » qu'on veut **éviter** : illisible, impossible à réutiliser, et on s'y perd.

### ✅ La bonne organisation
Crée un dossier **`src/components/`**, et **un fichier par composant** :

```
src/
├── App.jsx                 ← assemble les composants
├── main.jsx
└── components/
    ├── Header.jsx          ← un composant = un fichier
    ├── Carte.jsx
    └── Footer.jsx
```

**Un composant** (`src/components/Header.jsx`) :
```jsx
function Header() {
  return (
    <header>
      <h1>FleetZen</h1>
    </header>
  );
}

export default Header;   // 👈 on l'EXPORTE pour pouvoir l'utiliser ailleurs
```

**App.jsx qui assemble** (et reste court et lisible) :
```jsx
import Header from "./components/Header";   // 👈 on IMPORTE le composant
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />
      {/* ... le reste ... */}
      <Footer />
    </div>
  );
}

export default App;
```

> 💡 **La règle d'or :** **1 composant = 1 fichier**, rangé dans `components/`. `App.jsx` ne fait qu'**assembler** les blocs (`<Header />`, `<Footer />`…). Un composant utilisé = `<MonComposant />` (avec une **majuscule** au début, c'est obligatoire en React).
>
> 🔎 Tu reconnais le `export` / `import` ? C'est exactement les **modules** — l'idée « j'écris un truc dans un fichier, je le réutilise dans un autre ». React s'appuie là-dessus en permanence.

### ⚠️ « J'ai bien créé mes composants, mais `App` n'affiche NI le Header NI le Footer ! »

C'est **le** piège n°1 du débutant en React, et il est sournois car **il n'y a aucune erreur** dans la console. La cause la plus fréquente : la **majuscule**.

En JSX, le navigateur distingue deux choses **uniquement par la première lettre** :

| Tu écris | React comprend | Résultat |
|---|---|---|
| `<header />` (minuscule) | la **balise HTML** native `<header>` | un `<header>` **vide** → rien de visible |
| `<Header />` (Majuscule) | **TON composant** `Header` | ton vrai contenu s'affiche ✅ |

Et là est le piège : `header` et `footer` **existent pour de vrai** en HTML ! Donc si tu écris :

```jsx
function App() {
  return (
    <div>
      <header />     {/* ❌ React rend une balise HTML <header> VIDE, pas ton composant */}
      <footer />     {/* ❌ pareil : balise vide */}
    </div>
  );
}
```

…React ne se plaint pas (ce sont des balises HTML valides), mais il affiche des éléments **vides** → tu ne vois ni ton Header ni ton Footer. **Aucune erreur**, juste du vide. C'est exactement ton symptôme.

### ✅ La correction : une **majuscule** au début
```jsx
import Header from "./components/Header";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />     {/* ✅ Majuscule → React utilise TON composant */}
      <Footer />
    </div>
  );
}
```

> 💡 **À retenir :** en React, **un composant s'écrit toujours avec une Majuscule** (`<Header />`), justement pour que React le distingue d'une balise HTML (`<header />`). Minuscule = balise HTML ; Majuscule = ton composant. C'est **obligatoire**, pas une convention de style.

### Les 2 autres causes possibles (si ce n'est pas la majuscule)
1. **Oubli de l'`import`** en haut de `App.jsx` → là, tu auras une **erreur** (`Header is not defined`). Vérifie que chaque composant utilisé est bien importé.
2. **Oubli de l'`export default`** dans le fichier du composant → l'import ramène « rien » → erreur React `Element type is invalid`. Vérifie que chaque fichier de composant finit par `export default MonComposant;`.

> 🔎 Réflexe de débogage : ouvre la **Console (F12)**. **Erreur rouge** → c'est l'import ou l'export (causes 1/2). **Aucune erreur mais du vide** → c'est presque toujours la **majuscule**.

---

## 8. Rendre un composant configurable : les **props**

Un composant devient vraiment utile quand on peut lui passer des **données** (comme un argument de fonction). Ça s'appelle les **props**.

`src/components/Carte.jsx` :
```jsx
function Carte(props) {
  return (
    <div className="carte">
      <h2>{props.titre}</h2>
      <p>{props.texte}</p>
    </div>
  );
}

export default Carte;
```

Et dans `App.jsx`, on **réutilise** le même composant avec des contenus différents :
```jsx
<Carte titre="Géolocalisation" texte="Suivi en temps réel" />
<Carte titre="Consommation"    texte="Carburant consommé" />
```

> 💡 **À retenir :** les **props**, ce sont les « réglages » qu'on passe à un composant (comme les paramètres d'une fonction — souviens-toi de `creerNavbar(pageActive)`). Un composant + des props = réutilisable à l'infini.

---

## 9. Un composant qui réagit : `useState` (l'interactivité)

Pour qu'un composant **change** quand on clique, React utilise un **état** (`state`). Exemple d'un compteur — tu vas reconnaître ton simulateur / ton compteur de caractères :

`src/components/Compteur.jsx` :
```jsx
import { useState } from "react";

function Compteur() {
  const [nombre, setNombre] = useState(0);   // valeur de départ : 0

  return (
    <div>
      <p>Véhicules : {nombre}</p>
      <button onClick={() => setNombre(nombre + 1)}>+</button>
    </div>
  );
}

export default Compteur;
```

> 💡 **L'idée :** `useState` crée une donnée **suivie par React**. Quand tu la changes avec `setNombre(...)`, React **réaffiche tout seul** le composant — plus besoin de `textContent` à la main comme avant ! C'est tout l'intérêt de React : tu décris **ce qu'on voit selon l'état**, et il s'occupe de l'affichage.

---

## 10. Et Git dans tout ça ?

- Tu peux travailler sur **ta branche habituelle** (`feature/...`), le projet React vit dans son sous-dossier.
- Tu commites **ton code** (`src/`, `package.json`, etc.) **mais pas `node_modules/`** (déjà ignoré).
- Si quelqu'un récupère ton projet, il fait juste `npm install` pour recréer `node_modules`.

---

## 🎯 À toi de jouer (carte blanche)

Thème **libre** : un mini-site sur ce que tu veux (jeux, films, recettes, sport, ta page FleetZen en React…). L'important n'est pas le sujet, mais que ce soit **bien découpé** :

- [ ] Node installé (`node -v` répond)
- [ ] Projet créé avec Vite + lancé (`npm run dev`)
- [ ] Au moins **3 composants**, **chacun dans son fichier**, dans `src/components/`
- [ ] `App.jsx` qui **assemble** (court et lisible, pas de fourre-tout)
- [ ] Un composant **réutilisé avec des props** différentes
- [ ] Un composant **interactif** avec `useState`

---

## 🧰 Récap des outils

| | Rôle | Commande clé |
|---|---|---|
| **Node.js** | faire tourner les outils JS | (installé une fois) |
| **npm** | installer les bibliothèques | `npm install` |
| **Vite** | créer + servir le projet | `npm create vite@latest`, `npm run dev` |
| **React** | construire l'UI en composants | `import` / `export`, `<Composant />` |

> 🧭 La phrase à garder : **un composant = un fichier ; `App.jsx` assemble.** Si un fichier commence à tout faire, c'est le signal de le **découper**. Mieux vaut 5 petits fichiers clairs qu'un gros illisible.

Bloqué ? Note **ce que tu as tapé**, **le message d'erreur exact** (terminal **ou** console F12), et on débloque.