Components

Les briques fondamentales de l'UI

Le concept : Voyez les Composants comme des pièces de Lego intelligentes. Chaque composant encapsule sa propre logique, sa mémoire, et son apparence pour gérer une fraction isolée de l'interface (un bouton, une galerie, un menu). Assemblez-les et imbriquez-les, et vous obtiendrez une interface complète et évolutive.

💡 Qu'est-ce qu'un composant ?

Un composant React est une fonction JavaScript qui accepte des données en entrée (props) et retourne du JSX décrivant ce qui s'affiche à l'écran. C'est la brique fondamentale de toute application React.

L'idée clé : décomposer l'interface en petits morceaux indépendants, réutilisables et testables. Un bouton, une carte produit, une barre de navigation — chacun est un composant.

Règle obligatoire : Les noms de composants commencent toujours par une majuscule (UserCard, pas userCard). React distingue les composants (majuscule) des balises HTML natives (minuscule).

Function Component ✅ (modern)

// Déclaration classique
function WelcomeCard({ name, role }) {
    return (
        <div className="card">
            <h2>Bonjour, {name}</h2>
            <p>Rôle : {role}</p>
        </div>
    );
}

// Arrow function
const Badge = ({ label }) => (
    <span className="badge">{label}</span>
);

// Utilisation
<WelcomeCard name="Alice" role="Admin" />

Class Component ⚠️ (legacy)

// Syntaxe ancienne (avant les Hooks)
class WelcomeCard extends React.Component {
    render() {
        const { name, role } = this.props;
        return (
            <div>
                <h2>Bonjour, {name}</h2>
                <p>{role}</p>
            </div>
        );
    }
}

// Méthodes de cycle de vie (remplacées par useEffect)
// componentDidMount, componentDidUpdate...

🧩 Composition de composants

Architecture par composition

// Décomposer une page en composants réutilisables
function App() {
    return (
        <Layout>
            <Navbar user={currentUser} />
            <Sidebar>
                <NavMenu items={menuItems} />
            </Sidebar>
            <Main>
                <ProductList products={data} />
            </Main>
        </Layout>
    );
}

// Chaque composant ne connaît que ses propres responsabilités
// Navbar ne sait pas que Main existe, et vice-versa

Composant avec children (slots)

// {children} = le contenu entre les balises
function Card({ title, children }) {
    return (
        <div className="card">
            <h3>{title}</h3>
            <div className="card-body">
                {children}
            </div>
        </div>
    );
}

// Utilisation :
<Card title="Mon profil">
    <Avatar />
    <p>Alice, 28 ans</p>
</Card>

🧠 Modèle mental : Pureté

React est conçu autour des fonctions pures :

Mêmes props = même JSX rendu
Pas d'effets de bord pendant le rendu (pas de fetch, pas d'écriture dans le DOM)
Ne modifiez jamais les props reçues
Ne modifiez jamais les variables déclarées en dehors

→ Les effets de bord se gèrent dans useEffect

📂 Structure de fichiers recommandée

Par type (petits projets)

src/
├── components/    # Button, Card, Modal...
├── pages/         # Home, About, Dashboard
├── hooks/         # useFetch, useAuth
└── utils/         # formatDate, validators

Par fonctionnalité (grands projets)

src/features/
├── auth/           # Login, Register, authSlice
│   ├── LoginForm.jsx
│   ├── useAuth.js
│   └── auth.api.js
├── products/
└── cart/           # Plus scalable !

✅ Bonne pratique : Utilisez toujours les Function Components avec les Hooks. Les Class Components sont encore supportés mais plus recommandés depuis React 16.8.

← JSX Suivant : Props →