Tuto React depuis zero: install Node/npm, Vite, structure, JSX, decoupage en composants (1 composant = 1 fichier), props, useState
This commit is contained in:
+300
@@ -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 (
|
||||
<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.
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user