Aturan Satu Induk

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

Sebuah komponen dapat mengembalikan JSX sebanyak yang kamu inginkan, dengan satu aturan: semuanya harus berada di dalam satu elemen induk. Ini boleh:

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

Namun, mengembalikan dua elemen berdampingan tanpa pembungkus adalah error. Fungsi hanya dapat mengembalikan satu hal:

// BROKEN: dua elemen tingkat teratas
return (
    <h1>My Page</h1>
    <p>Welcome!</p>
);

Perbaikan yang biasanya dilakukan adalah membungkus semuanya dalam <div>. Perhatikan pratinjau: jika kamu melanggar aturan, error build akan memberi tahu lokasinya dengan tepat.

Tantangan

Pemula

Buat header halaman kecil: dua elemen di bawah satu induk.

Pertahankan <div> bagian luar.
Di dalamnya, tambahkan <h1> dengan id="heading" dan teks My First App.
Di bawah heading, tambahkan <p> dengan id="tagline" dan teks Built with React.

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>