Reutilizar componentes

Parte de la sección Fundamentos del Journey de React de Coddy — lección 13 de 42.

Aquí es donde los componentes valen la pena: usa uno tantas veces como quieras. Cada <Star /> a continuación es una copia nueva:

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

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

Tres estrellas en pantalla, una definición en código. Cambia la definición una vez. Cada copia se actualiza. Ese es el superpoder de reutilización que HTML nunca tuvo.

Desafío

Fácil

Crea una calificación de tres estrellas.

Define un componente Star que devuelva <span>★</span>.
Dentro del <div id="stars"> existente, renderiza tres estrellas utilizando el componente tres veces.

Pruébalo tú mismo

<!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>