Composants React : composants fonctions avec exemples

Un composant React est une fonction JavaScript qui renvoie du JSX : un morceau d'interface réutilisable comme un bouton, une carte ou une page entière. Vous l'utilisez comme une balise HTML, <Profile />, et React appelle la fonction pour savoir quoi mettre à l'écran. Les applications se construisent en plaçant des composants dans d'autres composants.

function Avatar() {
    return (
        <div
            style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: '#c7d2fe',
                display: 'grid',
                placeItems: 'center',
                fontWeight: 'bold',
            }}
        >
            AL
        </div>
    );
}

function Profile() {
    return (
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <Avatar />
            <div>
                <strong>Ada Lovelace</strong>
                <div>Wrote the first published program</div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <section>
            <h3>Team</h3>
            <Profile />
            <Profile />
        </section>
    );
}

App affiche Profile deux fois, et chaque Profile affiche un Avatar. Modifiez les initiales dans Avatar et les deux profils se mettent à jour, car ils partagent une seule définition. Pour l'instant, toutes les personnes de cette liste sont identiques ; la page suivante, props, montre comment donner à chaque copie ses propres données.

Écrire un composant

Un composant fonction a deux exigences :

Son nom commence par une majuscule : Profile, pas profile.
Il renvoie quelque chose que React peut afficher : du JSX, une chaîne, un nombre, null (ne rien afficher) ou un tableau de ces valeurs.

function Welcome() {
    return <h1>Welcome back</h1>;
}

// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;

Quand le JSX s'étend sur plusieurs lignes, entourez-le de parenthèses après return. Sans elles, un return suivi d'un saut de ligne renvoie undefined, et tout ce qui suit est ignoré.

Pourquoi le nom doit commencer par une majuscule

Le JSX regarde la première lettre d'une balise. Une minuscule désigne un élément HTML natif, donc <div> reste <div>. Une majuscule signifie « une variable accessible ici », donc <Profile /> appelle votre fonction Profile. Nommez un composant en minuscules et React crée à la place un élément HTML inconnu portant ce nom :

function Greeting() {
    console.log('Greeting ran');
    return <span>Hello from Greeting</span>;
}

function greeting() {
    console.log('greeting ran');
    return <span>Hello from greeting</span>;
}

export default function App() {
    return (
        <div>
            <p>Capitalized: <Greeting /></p>
            <p>Lowercase: <greeting /></p>
        </div>
    );
}

La seconde ligne n'affiche que son libellé, et la console n'affiche que Greeting ran. React a mis une balise <greeting> vide dans la page et n'a jamais appelé la fonction en minuscules. Un build de développement avertit aussi que The tag <greeting> is unrecognized in this browser ; l'aperçu fonctionne comme un build de production, vous voyez donc seulement le texte manquant. Renommez la fonction en Greetings et la balise en <Greetings /> pour corriger.

Composer des composants

Les composants sont faits pour être imbriqués. Une page est un arbre : App en haut, puis des éléments de mise en page, puis des parties plus petites jusqu'aux simples boutons. Chaque composant ne connaît que les éléments qu'il affiche directement, vous pouvez donc les étudier un par un.

import { useState } from 'react';

function LikeButton() {
    const [liked, setLiked] = useState(false);
    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? 'Liked' : 'Like'}
        </button>
    );
}

function Post({ title }) {
    return (
        <article style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h4 style={{ margin: '0 0 6px' }}>{title}</h4>
            <LikeButton />
        </article>
    );
}

export default function App() {
    return (
        <main>
            <Post title="Components are functions" />
            <Post title="JSX compiles to function calls" />
            <Post title="State lives in components" />
        </main>
    );
}

Chaque LikeButton a son propre état, donc aimer un article laisse les autres tranquilles. Pour ajouter un bouton de partage à chaque article, vous l'écrivez une fois et ajoutez <ShareButton /> dans Post.

Quand découper un composant

Il n'y a pas de règle fixe, mais quelques signes indiquent qu'un morceau mérite son propre composant : le même balisage apparaît à deux endroits, une partie du JSX a son propre état (comme le bouton « j'aime » ci-dessus), ou la fonction est devenue si longue qu'il faut défiler pour voir son return. Découper selon ces lignes garde chaque composant assez petit pour tenir sur un écran. Découper trop tôt coûte peu : un composant n'est qu'une fonction, en fusionner deux est donc facile.

Exporter et importer des composants

Les éditeurs de cette page ne contiennent qu'un fichier, mais un vrai projet place les composants dans leurs propres fichiers. Un fichier peut avoir un export par défaut et autant d'exports nommés que vous voulez :

// Avatar.jsx
export default function Avatar({ initials }) {
    return <div className="avatar">{initials}</div>;
}

// Badge.jsx
export function Badge({ label }) {
    return <span className="badge">{label}</span>;
}
export function NewBadge() {
    return <Badge label="new" />;
}

// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';

export default function Profile() {
    return (
        <div>
            <Avatar initials="AL" />
            <Badge label="admin" />
            <NewBadge />
        </div>
    );
}

Un export par défaut peut être importé sous n'importe quel nom ; un export nommé s'importe entre accolades avec son nom exact. Les équipes choisissent généralement un style et s'y tiennent. Le nom du fichier correspond souvent au composant : Avatar.jsx exporte Avatar.

Garder les composants purs

React attend d'un composant qu'il se comporte comme une fonction pure pendant le rendu : les mêmes props et le même état donnent le même JSX, et le rendu ne modifie rien qui existait avant son exécution. React peut faire le rendu d'un composant de nombreuses fois, à des moments que vous ne contrôlez pas, donc un composant qui modifie des variables extérieures pendant le rendu produit un résultat différent à chaque fois.

import { useState } from 'react';

let guest = 0;

function ImpureCup() {
    guest = guest + 1;
    return <li>Impure cup for guest #{guest}</li>;
}

function PureCup({ number }) {
    return <li>Pure cup for guest #{number}</li>;
}

export default function App() {
    const [renders, setRenders] = useState(1);

    return (
        <div>
            <ul>
                <ImpureCup />
                <ImpureCup />
                <ImpureCup />
            </ul>
            <ul>
                <PureCup number={1} />
                <PureCup number={2} />
                <PureCup number={3} />
            </ul>
            <button onClick={() => setRenders(renders + 1)}>Render again ({renders})</button>
        </div>
    );
}

Les tasses impures commencent à 1, 2, 3. Cliquez sur le bouton : rien n'a changé pour les invités, pourtant la liste impure affiche maintenant 4, 5, 6, car chaque rendu a incrémenté la variable partagée guest. Les tasses pures reçoivent leur numéro par les props et restent correctes. En développement, Strict Mode fait le rendu de chaque composant deux fois pour révéler exactement ce genre de bug ; l'aperçu fonctionne comme un build de production, la dérive n'apparaît donc ici que quand vous refaites un rendu.

Modifier des choses est permis, mais pas pendant le rendu. Mettez à jour l'état dans les gestionnaires d'événements, et communiquez avec le monde extérieur (minuteurs, abonnements, titre du document) dans des effets.

Composants et éléments

Le composant est la fonction, Profile. Un élément est ce que le JSX crée quand vous écrivez <Profile /> : un petit objet qui dit « affiche Profile avec ces props ». React crée les éléments, appelle les composants qu'ils désignent et transforme le résultat en DOM. Vous n'appelez jamais vous-même un composant sous la forme Profile() ; vous écrivez <Profile /> et laissez React l'appeler, afin qu'il puisse suivre son état et sa place dans l'arbre.

Cette place compte. Cet exemple définit un composant à l'intérieur d'un autre, une erreur courante :

import { useState } from 'react';

export default function App() {
    const [clicks, setClicks] = useState(0);

    function NameField() {
        const [text, setText] = useState('');
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
    }

    return (
        <div>
            <NameField />
            <button onClick={() => setClicks(clicks + 1)}>Re-render App ({clicks})</button>
        </div>
    );
}

Tapez quelque chose, puis cliquez sur le bouton : votre texte disparaît. Chaque rendu de App crée une toute nouvelle fonction NameField, donc React voit un type de composant différent à cet endroit et jette l'ancien avec son état. Déplacez NameField au-dessus de App, au niveau supérieur du fichier, et le texte survit à chaque clic. La page sur le rendu explique comment React décide de ce qu'il conserve.

Composants fonctions et composants classes

Avant l'arrivée des hooks dans React 16.8, les composants qui avaient besoin d'un état s'écrivaient sous forme de classes :

import { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

Les composants classes fonctionnent toujours dans React 19, et vous les croiserez dans d'anciennes bases de code et dans les error boundaries, qui exigent encore une classe. Le code récent utilise des composants fonctions avec des hooks comme useState et useEffect, qui font le même travail avec moins de code. La page sur les composants classes associe chaque fonctionnalité de classe à son hook.

Questions fréquentes

Qu'est-ce qu'un composant dans React ?

Un composant est un morceau d'interface réutilisable, écrit comme une fonction JavaScript qui renvoie du JSX. Vous l'utilisez comme une balise HTML, <Profile />, et React appelle la fonction pour savoir quoi dessiner.

Pourquoi le nom d'un composant React doit-il commencer par une majuscule ?

Le JSX se sert de la première lettre pour savoir ce qu'est une balise. Une balise en minuscules comme <profile /> est traitée comme un élément HTML nommé profile, et votre fonction n'est jamais appelée. Une balise avec majuscule comme <Profile /> désigne votre composant.

Quelle est la différence entre composants fonctions et composants classes ?

Les deux décrivent de l'interface. Les composants fonctions sont de simples fonctions et utilisent les hooks pour l'état et les effets ; les composants classes étendent React.Component et utilisent des méthodes comme render et componentDidMount. Le code récent utilise des composants fonctions.

Qu'est-ce qu'un composant pur dans React ?

Un composant pur renvoie le même JSX pour les mêmes props et le même état, et ne modifie rien en dehors de lui pendant son rendu. React s'appuie sur cela pour faire le rendu des composants aussi souvent que nécessaire sans surprise.

Peut-on définir un composant à l'intérieur d'un autre composant ?

Évitez-le. Un composant défini dans un autre est une nouvelle fonction à chaque rendu, donc React le traite à chaque fois comme un composant différent et réinitialise son état. Définissez les composants au niveau supérieur du fichier.

Concepts liés