Files

T

matthieu ec4f14be33 Tuto React: expliquer pourquoi App n'affiche ni Header ni Footer (majuscule = composant vs balise HTML, pas d'erreur), + verifs import/export

2026-06-23 15:49:04 +02:00

14 KiB

Raw Blame History

⚛️ 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

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

Mac

Même site https://nodejs.org, version « LTS », télécharge le .pkg.
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 :

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 :

npm create vite@latest

Vite va te poser 3 questions :

Project name → donne un nom de dossier, ex. mon-projet (ce sera le sous-dossier créé ici).
Select a framework → choisis React.
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 :

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

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 :

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)

// 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) :

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) :

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 :

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

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)

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é.
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 :

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 :

<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 :

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.

14 KiB Raw Blame History