Komponen Pertamamu

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

Saatnya menulis komponen pertamamu. Lihat App.jsx. Itu adalah fungsi yang mengembalikan JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

Saat ini, komponen tersebut mengembalikan <div> kosong, jadi pratinjaunya kosong. Apa pun JSX yang kamu masukkan ke dalamnya akan dirender, seperti judul, paragraf, tombol, atau apa saja:

<h1 id="title">Hello, React!</h1>

Perhatikan atribut id: atribut ini bekerja seperti di HTML, dan pengujian kami menggunakan id untuk menemukan elemenmu. Dua file lainnya adalah bagian pendukung aplikasi: index.html menjadi tempat aplikasi, dan main.jsx memasang App ke halaman. Keduanya terkunci. App.jsx adalah tempat kamu bekerja.

Tantangan

Pemula

Buat aplikasimu menyapa dunia.

Di dalam <div> pada App.jsx, tambahkan <h1> dengan id="title".
Teksnya harus persis Hello, 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>