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

TUTO_REACT.md

@@ -209,6 +209,55 @@ export default App;
 >
 > 🔎 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**