Réutiliser des composants

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 13 sur 42.

C'est là que les composants deviennent vraiment intéressants : utilisez-en un autant de fois que vous le souhaitez. Chaque <Star /> ci-dessous est une nouvelle copie :

function Star() {
    return <span>★</span>;
}

export default function App() {
    return (
        <div>
            <Star />
            <Star />
            <Star />
        </div>
    );
}

Trois étoiles à l'écran, une seule définition dans le code. Modifiez la définition une fois. Chaque copie se met à jour. C'est le superpouvoir de réutilisation que l'HTML n'a jamais eu.

Défi

Facile

Créez une évaluation à trois étoiles.

Définissez un composant Star qui retourne <span>★</span>.
À l'intérieur du <div id="stars"> existant, affichez (render) trois étoiles en utilisant le composant trois fois.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>