Children Prop'u

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

Bir prop özeldir. Açılış VE kapanış etiketi olan bir bileşen yazın ( Write ), aralarına yuvaladığınız her şey children prop'u olarak gelir:

function Card({ children }) {
    return <div className="card">{children}</div>;
}

<Card>
    <p>Any content!</p>
</Card>

Card içinde ne olduğunu bilmez veya önemsemez: sadece onu stillendirilmiş bir kutu içine sarar. Kartlar, modallar ve düzenler (layouts) gibi sarmalayıcıların hepsi children kullanır: ebeveyn içeriği sağlar, bileşen ise çerçeveyi sağlar.

Görev

Orta

Yeniden kullanılabilir bir kart çerçevesi oluşturun.

Card bileşeninin, children özelliğini görüntüleyen ve className="card" öğesine sahip bir <div> render etmesini sağlayın.
App içinde, id="card-text" ve Welcome aboard metnine sahip bir <p> öğesini sarmalamak için <Card>...</Card> kullanın.

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>