Susun Halaman

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

Halaman yang umum adalah komposisi: App hanya menyusun blok-blok bernama:

export default function App() {
    return (
        <div>
            <Title />
            <Content />
            <Footer />
        </div>
    );
}

Bacakan pernyataan return itu. Pernyataan tersebut benar-benar menggambarkan halaman dari atas ke bawah. Setiap blok menyembunyikan markup-nya sendiri, jadi mengubah footer tidak akan berisiko merusak judul. Dengan struktur ini, kamu akan membangun setiap aplikasi nyata mulai sekarang.

Tantangan

Mudah

Susun halaman dari dua komponen.

Definisikan Title: sebuah <h1> dengan id="page-title", teks Coddy Cooking.
Definisikan Footer: sebuah <p> dengan id="page-footer", teks Made with React.
App merender <Title /> terlebih dahulu, lalu <Footer />.

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>