Struktur dan Aturan Penulisan JSX yang Benar

•  Pengertian JSX

JSX (JavaScript XML) adalah ekstensi sintaks JavaScript yang memungkinkan kita menulis kode yang mirip HTML di dalam file JavaScript, terutama digunakan dalam React. JSX memudahkan kita membangun antarmuka pengguna (UI) dengan sintaks yang lebih deklaratif dan intuitif.

• Struktur Dasar JSX

berikut contoh sederhana dari struktur JSX

bagian bagian pada JSX Tag Pembuka dan Penutup Seperti <div>....</div> sedangkan Isi atau anak element bisa berupa text, element JSX lainnya atau ekpresi javascript dalam {}

• Aturan JSX yang perlu kita ketahui

1. Harus Punya Satu Root Element

JSX hanya bisa mengembalikan satu elemen utama. Gunakan <div> atau React.Fragment (<> ... </>) jika ingin menulis lebih dari satu elemen:

    

       2. Gunakan ClassName Untuk CSS

Karena class adalah keyword di dalam javascript, maka kita gunakan ClassName di JSX 

// HTML

<div class="kotakForm"></div>

// JSX

<div className="kotakForm"></div>

         3. Atribut Menggunakan camleCase

JSX menggunakan penulisan atribut seperti onClick, htmlFor, tabIndex, bukan lowercase seperti HTML biasa.

<button onClick={handleClick}>Klik Saya</button>

<label htmlFor="email">Email</label>

         4. Gunakan {} untuk ekpresi JavaScript

Kita bisa menyisipkan JavaScript (bukan statement) dengan {}

const nama = "Andi";

<p>Halo, Saya {nama}</p>

         5. Komentar JSX

Untuk memberikan komentar pada JavaScript kita bisa mengisi seperti berikut :

{/* Ini Komentar dalam JavaScript */}

         6. Tag harus di tutup

Semua element di JSX harus di tutup, termasuk element kosong harus di tutup juga berikut contoh

// Benar

<img src="logo.png" alt="Logo" />

<br />

Contoh Lengkap:

         7. Tabel Ringkasan Aturan JSX

Berikut contoh sederhana yang menampilkan dua variabel nama dan umur

Tambahkan Materi Berikut : 

• Penanganan Atribut dan Event

• Fragment dan Elemen Pembungkus