Komponen Keduamu

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

Mari kita ekstrak sebuah komponen. Kamu bisa mendefinisikan sebanyak mungkin komponen dalam satu file: komponen yang lebih kecil di atas, App di bagian bawah:

function Welcome() {
    return <p>Glad you're here!</p>;
}

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

Hanya App yang menggunakan export default: komponen ini adalah komponen utama yang dirender oleh main.jsx. Komponen lainnya adalah helper internal.

Tantangan

Pemula

Buat komponen mandiri pertamamu.

Definisikan komponen bernama Header (H kapital!) di atas App. Komponen ini mengembalikan <h1> dengan id="page-title" dan teks My Blog.
Render komponen ini di dalam <div> milik App dengan <Header />.

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>