Gunakan Kembali Komponen

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 13 dari 42.

Di sinilah komponen berguna: gunakan satu komponen sebanyak yang kamu mau. Setiap <Star /> di bawah adalah salinan baru:

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

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

Tiga bintang di layar, satu definisi dalam kode. Ubah definisinya sekali. Semua salinannya ikut diperbarui. Inilah kekuatan penggunaan ulang yang tidak pernah dimiliki HTML.

Tantangan

Mudah

Buat penilaian tiga bintang.

Definisikan komponen Star yang mengembalikan <span>★</span>.
Di dalam <div id="stars"> yang sudah ada, tampilkan bintang sebanyak tiga kali menggunakan komponen tersebut.

Coba sendiri

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