Blok Penyusun

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

Sejauh ini, App melakukan semuanya. Aplikasi React sungguhan membagi halaman menjadi banyak komponen kecil, dan menggunakan salah satunya sama seperti menggunakan tag HTML:

function Header() {
    return <h1>My Blog</h1>;
}

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

Saat React melihat <Header />, React memanggil fungsimu dan merender apa pun yang dikembalikannya. Ada dua aturan:

Nama komponen diawali dengan Huruf Kapital: beginilah React membedakan <Header /> (komponenmu) dari <header> (tag HTML)
Gunakan seperti tag yang menutup dirinya sendiri: <Header />

Mengapa perlu repot-repot? Karena halaman yang tersusun dari blok-blok bernama (<Header />, <Menu />, <Footer />) mudah dipahami seperti daftar isi, dan setiap blok bisa digunakan kembali di mana saja.

Coba sendiri

Pelajaran ini tidak memiliki tantangan kode.