Bileşenleri Yeniden Kullanma

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 13 / 42.

Bileşenlerin karşılığını tam olarak burada alırsınız: bir bileşeni istediğiniz kadar kullanın. Aşağıdaki her <Star /> yeni bir kopyadır:

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

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

Ekranda üç yıldız, kodda ise tek bir tanım. Tanımı bir kez değiştirin. Her kopya güncellenir. İşte bu, HTML'in hiçbir zaman sahip olmadığı yeniden kullanım süper gücüdür.

Görev

Kolay

Üç yıldızlı bir derecelendirme oluşturun.

<span>★</span> döndüren bir Star bileşeni tanımlayın.
Mevcut <div id="stars"> içinde, bileşeni üç kez kullanarak üç yıldız render edin.

Kendin dene

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