Composants Fonctionnels

Les composants sont les blocs de construction fondamentaux de toute application React. Un composant est une fonction JavaScript qui retourne du JSX et représente une partie réutilisable de votre interface utilisateur.

Qu'est-ce qu'un composant ?

Un composant est une fonction JavaScript qui retourne du JSX.

jsx

function Welcome() {
  return <h1>Bienvenue sur React !</h1>;
}

C'est tout ! Un composant React est simplement une fonction qui retourne ce qu'on veut afficher.

Composants = Pièces de LEGO

Pensez aux composants comme des briques LEGO :

Chaque brique est un composant
Vous les assemblez pour construire quelque chose de plus grand
Vous pouvez réutiliser les mêmes briques plusieurs fois
Plus les briques sont petites et simples, plus elles sont réutilisables

Votre premier composant

Structure de base

jsx

// 1. Définir le composant
function Greeting() {
  return <h1>Bonjour !</h1>;
}

// 2. L'exporter
export default Greeting;

Utiliser le composant

jsx

// Dans un autre fichier
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

Résultat :

Bonjour !
Bonjour !
Bonjour !

Règles de nommage

Convention obligatoire

Les noms de composants doivent commencer par une majuscule.

jsx

// ❌ Incorrect (minuscule)
function greeting() {
  return <h1>Bonjour</h1>;
}

// ✅ Correct (PascalCase)
function Greeting() {
  return <h1>Bonjour</h1>;
}

Pourquoi ? React utilise cette convention pour distinguer les composants des balises HTML.

jsx

// Balise HTML (minuscule)
<div>Contenu</div>

// Composant React (majuscule)
<Greeting />

Lequel de ces noms de composants suit correctement les conventions React ?

Composants fonctionnels vs composants de classe

React propose deux façons de créer des composants. Utilisez toujours les fonctions.

jsx

// ✅ Composant fonctionnel (recommandé)
function Welcome() {
  return <h1>Bonjour !</h1>;
}

// ❌ Composant de classe (ancien, déprécié)
class Welcome extends React.Component {
  render() {
    return <h1>Bonjour !</h1>;
  }
}

Pourquoi les fonctions ?

Les composants fonctionnels sont la norme depuis React 16.8 (2019) :

Plus simple et concis
Moins de code à écrire
Compatible avec les Hooks React
Meilleures performances
Support complet de TypeScript

Vous ne devriez utiliser que des composants fonctionnels dans vos projets.

Depuis quelle version de React les composants fonctionnels sont-ils devenus la norme ?

Export et Import

Pour utiliser un composant dans un autre fichier, il faut d'abord l'exporter puis l'importer.

Export par défaut

L'export par défaut permet d'exporter un seul composant principal par fichier.

jsx

// UserCard.jsx
function UserCard() {
  return <div>Carte utilisateur</div>;
}

export default UserCard;

// Ou en une ligne
export default function UserCard() {
  return <div>Carte utilisateur</div>;
}

Import :

jsx

import UserCard from './UserCard';

Techniquement, vous pouvez renommer un export par défaut lors de l'import, mais gardez toujours le même nom par convention pour maintenir la cohérence.

Export nommé

L'export nommé permet d'exporter plusieurs composants depuis le même fichier.

jsx

// components.jsx
export function Header() {
  return <header>En-tête</header>;
}

export function Footer() {
  return <footer>Pied de page</footer>;
}

Import :

jsx

import { Header, Footer } from './components';

Avec les exports nommés, vous devez utiliser exactement le même nom lors de l'import (entre accolades).

Quelle approche choisir ?

Export par défaut :

Un composant principal par fichier
Convention la plus courante
Plus simple pour les gros composants

Export nommé :

Plusieurs petits composants liés dans un fichier
Facilite l'auto-complétion
Utile pour les variantes (Button, IconButton)

Composition de composants

Le vrai pouvoir de React vient de la composition : assembler des petits composants pour en créer de plus grands.

Exemple simple

jsx

// Header.jsx
function Header() {
  return (
    <header>
      <h1>Mon Application</h1>
      <nav>
        <a href="/">Accueil</a>
        <a href="/about">À propos</a>
      </nav>
    </header>
  );
}

// Content.jsx
function Content() {
  return (
    <main>
      <h2>Contenu principal</h2>
      <p>Bienvenue sur mon site !</p>
    </main>
  );
}

// Footer.jsx
function Footer() {
  return (
    <footer>
      <p>© 2024 Mon App</p>
    </footer>
  );
}

// App.jsx
import Header from './Header';
import Content from './Content';
import Footer from './Footer';

function App() {
  return (
    <div className="app">
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

Avantages de la composition

Réutilisabilité :

Chaque composant peut être utilisé ailleurs

Maintenabilité :

Chaque composant a une seule responsabilité
Facile à tester et déboguer

Lisibilité :

Le code est auto-documenté
La structure est claire

La prop children

children est une prop spéciale qui représente tout le contenu placé entre les balises ouvrante et fermante d'un composant.

Exemple de base

jsx

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

// Utilisation
function App() {
  return (
    <Card>
      <h2>Titre de la carte</h2>
      <p>Contenu de la carte</p>
    </Card>
  );
}

Exemple : Layout avec children

jsx

function Layout({ children }) {
  return (
    <div className="layout">
      <Header />
      <main className="content">
        {children}
      </main>
      <Footer />
    </div>
  );
}

// Utilisation
function HomePage() {
  return (
    <Layout>
      <h1>Page d'accueil</h1>
      <p>Bienvenue sur notre site !</p>
    </Layout>
  );
}

function AboutPage() {
  return (
    <Layout>
      <h1>À propos</h1>
      <p>Nous sommes une équipe de passionnés.</p>
    </Layout>
  );
}

Quand utiliser children ?

children est parfait pour :

Layouts : Header, Footer, Sidebar
Wrappers : Card, Modal, Container
UI components : Button, Alert, Badge

Exemple :

jsx

function Button({ children }) {
  return <button className="btn">{children}</button>;
}

// Utilisation flexible
<Button>Cliquez-moi</Button>
<Button>Envoyer</Button>

À quoi sert la prop 'children' dans un composant ?

Organisation des fichiers

Structure recommandée

src/
├── components/           # Composants réutilisables
│   ├── Button.jsx
│   ├── Card.jsx
│   └── Avatar.jsx
├── pages/               # Pages/vues
│   ├── HomePage.jsx
│   └── AboutPage.jsx
├── layouts/             # Layouts
│   └── MainLayout.jsx
├── App.jsx              # Composant racine
└── main.jsx            # Point d'entrée

Un composant par fichier

jsx

// ✅ Bon : Un fichier = Un composant principal
// UserCard.jsx
function UserCard() {
  return <div>Carte utilisateur</div>;
}
export default UserCard;

// ⚠️ Acceptable : Plusieurs petits composants liés
// Button.jsx
export function Button() { /* ... */ }
export function IconButton() { /* ... */ }
export function LinkButton() { /* ... */ }

Bonnes pratiques

Conseils pour créer de bons composants

Un composant = Une responsabilité

Chaque composant doit faire une seule chose
Si un composant devient trop complexe, divisez-le

Nommez clairement

UserProfileCard plutôt que Card1
PrimaryButton plutôt que BlueButton
Le nom doit décrire ce que fait le composant

Gardez-les petits

Idéalement moins de 200 lignes de code
Si c'est plus long, décomposez

Pensez réutilisabilité

Évitez le code spécifique à un seul usage
La prochaine section sur les props vous montrera comment rendre vos composants flexibles

Résumé

À retenir

Composants fonctionnels

Fonction JavaScript qui retourne du JSX
Nommage en PascalCase obligatoire
Export par défaut (un composant par fichier) ou export nommé (plusieurs composants liés)

Composition

Assemblez des petits composants pour en créer de plus grands
Chaque composant doit avoir une seule responsabilité
Réutilisez les composants partout où c'est nécessaire

Prop children

Représente le contenu placé entre les balises d'un composant
Idéale pour les layouts, wrappers et composants UI génériques

Organisation

Un fichier par composant (nom du fichier = nom du composant)
Dossiers séparés : components, pages, layouts

Vous maîtrisez maintenant les bases des composants React. La composition et la réutilisabilité sont les clés pour construire des applications maintenables.

Ressources

Your First Component

Guide officiel React sur la création de composants

Documentation

Importing and Exporting Components

Comment organiser et partager vos composants

Documentation

Passing Props to a Component

Introduction aux props (prochaine section)

Documentation