03 — Composants fonctionnels

🔍 C'est quoi un composant ?

Un composant est un bloc d'UI réutilisable. C'est simplement une fonction JavaScript qui retourne du JSX.

Pense à des briques LEGO : on construit une page en assemblant des composants.

// Un composant = une fonction qui commence par une Majuscule
function Bonjour() {
    return <h2>Bonjour le monde !</h2>;
}

// On l'utilise comme une balise HTML
root.render(<Bonjour />);

📐 Règles des composants

1. Le nom commence par une Majuscule

// ✅ Correct
function MonComposant() { ... }
function CarteUtilisateur() { ... }

// ❌ Incorrect — React le traitera comme une balise HTML
function monComposant() { ... }

2. Retourne toujours du JSX (ou null)

function Visible() {
    return <p>Je suis visible</p>;
}

function Invisible() {
    return null; // Ne rend rien dans le DOM
}

3. Composants réutilisables

function Bouton() {
    return <button>Cliquez-moi</button>;
}

// On peut l'utiliser autant de fois qu'on veut
function App() {
    return (
        <div>
            <Bouton />
            <Bouton />
            <Bouton />
        </div>
    );
}

🏗️ La composition

Les composants peuvent contenir d'autres composants. C'est le principe de composition.

function Header() {
    return (
        <header>
            <h1>Mon Site</h1>
            <Navigation />
        </header>
    );
}

function Navigation() {
    return (
        <nav>
            <a href="#">Accueil</a> | 
            <a href="#">À propos</a> | 
            <a href="#">Contact</a>
        </nav>
    );
}

function Footer() {
    return <footer><p>© 2026 Mon Site</p></footer>;
}

function App() {
    return (
        <>
            <Header />
            <main><p>Contenu de la page</p></main>
            <Footer />
        </>
    );
}

🌳 L'arbre de composants

App
├── Header
│   └── Navigation
├── Main
│   ├── CarteUtilisateur
│   └── ListeArticles
│       ├── Article
│       └── Article
└── Footer

🏭 Fonction fléchée vs déclaration

Les deux syntaxes sont valides :

// Déclaration de fonction (hoistée)
function Bonjour() {
    return <p>Hello</p>;
}

// Fonction fléchée (const — non hoistée)
const Bonjour = () => {
    return <p>Hello</p>;
};

// Fonction fléchée avec retour implicite (pas de {})
const Bonjour = () => <p>Hello</p>;

🧩 Découper intelligemment

Quand créer un nouveau composant ?

• Quand un morceau d'UI est réutilisé plusieurs fois.
• Quand un composant devient trop long (> 50-80 lignes).
• Quand une partie a sa propre logique indépendante.
• Quand on veut isoler la complexité.

🚀 Démo interactive

▼ Page construite avec des composants imbriqués

📝 Résumé