Bab 1: Pengenalan JSX

Memahami fondasi penulisan komponen di React.

Apa itu JSX?

JSX (JavaScript XML) adalah ekstensi sintaks untuk JavaScript yang memungkinkan Anda menulis struktur mirip HTML langsung di dalam kode JavaScript. Anggap saja ini adalah cara untuk (mencampur) logika dan tampilan dalam satu file dengan cara yang elegan.

Daripada memisahkan file HTML dan JavaScript, React menyatukannya dalam unit yang disebut komponen. JSX membantu kita mendefinisikan seperti apa tampilan komponen tersebut.

Aturan Dasar JSX

Meskipun terlihat seperti HTML, ada beberapa aturan penting:

1. Menggabungkan JavaScript dengan Kurung Kurawal {}

Anda bisa memasukkan variabel atau ekspresi JavaScript apa pun di dalam JSX dengan membungkusnya dalam { }.

Contoh Kode:

const userName = "Budi";

return <h1>Halo, {userName}!</h1>;

Hasil Tampilan:

Halo, Budi!

2. Atribut Mirip HTML

Atribut di JSX ditulis menggunakan camelCase. Contohnya, atribut `class` di HTML menjadi className di JSX, dan `onclick` menjadi onClick.

Contoh Kode:

<div className="profile">
    <img 
        src={"https://placehold.co/100x100/818cf8/ffffff?text=B"}
        alt="Foto Profil"
    />
</div>

Hasil Tampilan:

Foto Profil

3. Wajib Mengembalikan Satu Elemen Induk

Setiap komponen harus mengembalikan satu elemen (pembungkus) (root element). Jika Anda memiliki beberapa elemen, bungkus semuanya dalam satu `div` atau sebuah Fragment <>...</>.

Contoh Kode:

// Benar 👍
return (
    <>
        <h1>Judul</h1>
        <p>Paragraf.</p>
    </>
);

// Salah 👎
return (
    <h1>Judul</h1>
    <p>Paragraf.</p>
);