Tek Ebeveyn Kuralı

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

Bir bileşen, tek bir kurala uymak kaydıyla istediğiniz kadar JSX döndürebilir: her şey tek bir ebeveyn öğe (parent element) içinde yer almalıdır. Bu kullanım uygundur:

return (
    <div>
        <h1>My Page</h1>
        <p>Welcome!</p>
    </div>
);

Ancak bir sarıcı (wrapper) olmadan iki elemanı yan yana döndürmek bir hatadır. Bir fonksiyon yalnızca tek bir şey döndürebilir:

// BROKEN: iki üst düzey öğe
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

Yaygın çözüm her şeyi bir <div> içine sarmaktır. Önizlemeyi izleyin: kuralı ihlal ederseniz, derleme hatası size tam olarak nerede olduğunu söyler.

Görev

Başlangıç

Küçük bir sayfa üst bilgisi (header) oluşturun: tek bir kapsayıcı altında iki eleman.

Dıştaki <div> elemanını koruyun.
İçine id="heading" niteliğine ve My First App metnine sahip bir <h1> ekleyin.
Başlığın altına id="tagline" niteliğine ve Built with React metnine sahip bir <p> ekleyin.

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>