Reuse Components

Part of the Fundamentals section of Coddy's React journey — lesson 13 of 42.

Here's where components pay off: use one as many times as you want. Each <Star /> below is a fresh copy:

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

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

Three stars on screen, one definition in code. Change the definition once. Every copy updates. That's the reuse superpower HTML never had.

Challenge

Easy

Build a three-star rating.

Define a Star component that returns <span>★</span>.
Inside the existing <div id="stars">, render three stars using the component three times.

Try it yourself

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