From 39d5e9f00b8911beb1c800b681ba954bdca82b39 Mon Sep 17 00:00:00 2001 From: matthieureynier Date: Tue, 23 Jun 2026 14:29:01 +0200 Subject: [PATCH] Tuto React depuis zero: install Node/npm, Vite, structure, JSX, decoupage en composants (1 composant = 1 fichier), props, useState --- TUTO_REACT.md | 300 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 300 insertions(+) create mode 100644 TUTO_REACT.md diff --git a/TUTO_REACT.md b/TUTO_REACT.md new file mode 100644 index 0000000..b8db86d --- /dev/null +++ b/TUTO_REACT.md @@ -0,0 +1,300 @@ +# ⚛️ 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 ( +
+

Mon appli

+
+ ); +} +``` + +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 `

` 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 `
` 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 ( +
+ {/* 200 lignes de tout et n'importe quoi */} +
+ ); +} +``` +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 ( +
+

FleetZen

+
+ ); +} + +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 ( +
+
+ {/* ... le reste ... */} +
+
+ ); +} + +export default App; +``` + +> 💡 **La règle d'or :** **1 composant = 1 fichier**, rangé dans `components/`. `App.jsx` ne fait qu'**assembler** les blocs (`
`, `