JSX vs HTML Biasa

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

Apa Itu JSX?

JSX (JavaScript XML) adalah cara menulis struktur UI di React yang terlihat seperti HTML, tapi sebenarnya adalah sintaks khusus yang akan dikompilasi menjadi JavaScript. Singkatnya, JSX membuat kode React lebih rapi dan mudah dibaca.

Contoh JSX:

const element = <h1>Hello, dunia!</h1>;

JSX ini akan dikonversi menjadi JavaScript murni seperti ini:

const element = React.createElement('h1', null, 'Hello, dunia!');

HTML Biasa, Teman Lama Kita

HTML biasa adalah bahasa markup standar yang digunakan untuk membuat halaman web. HTML digunakan bersama dengan CSS dan JavaScript untuk menampilkan konten di browser.

Contoh HTML biasa:

<h1>Hello, dunia!</h1>

HTML ini langsung dikenali oleh browser tanpa perlu dikompilasi dulu.

Perbedaan JSX vs HTML Biasa

1. JSX Butuh JavaScript, HTML Tidak

JSX tidak bisa langsung ditulis di file HTML biasa. Ia perlu dikompilasi menggunakan Babel sebelum bisa berjalan di browser. Sementara itu, HTML biasa bisa langsung dibuka di browser tanpa proses tambahan.

2. JSX Pakai className, Bukan class

Di JSX, kita tidak bisa menggunakan class untuk CSS seperti di HTML biasa karena class adalah kata kunci di JavaScript. Jadi, kita pakai className.

<h1 className="judul">Hello!</h1>

Sedangkan di HTML biasa:

<h1 class="judul">Hello!</h1>

3. JSX Harus Ditulis dalam Satu Elemen Pembungkus

JSX tidak bisa mengembalikan lebih dari satu elemen tanpa pembungkus. Jika ingin menampilkan beberapa elemen, kita harus membungkusnya dalam satu elemen <div> atau menggunakan Fragment (<>...</>).

return (
  <>
    <h1>Judul</h1>
    <p>Ini paragraf.</p>
  </>
);

Sedangkan HTML biasa tidak ada aturan seperti ini:

<h1>Judul</h1>
<p>Ini paragraf.</p>

4. JSX Bisa Menyisipkan JavaScript

Salah satu keunggulan JSX adalah kemampuannya untuk menyisipkan ekspresi JavaScript di dalam kurung kurawal {}.

const nama = "Budi";
return <h1>Hello, {nama}!</h1>;

Sedangkan HTML biasa tidak bisa melakukan ini:

<h1>Hello, Budi!</h1>

Kapan Pakai JSX dan Kapan Pakai HTML?

• Gunakan JSX jika kamu sedang mengembangkan aplikasi dengan React.
• Gunakan HTML biasa jika kamu hanya membuat halaman statis tanpa React.

Kesimpulan

JSX adalah "HTML versi React" yang memungkinkan kita menyusun UI dengan cara yang lebih rapi dan terintegrasi dengan JavaScript. Meskipun mirip dengan HTML biasa, JSX memiliki aturan dan fitur tambahan yang membuatnya lebih fleksibel dalam pengembangan aplikasi modern.

Jadi, lebih suka JSX atau HTML biasa? Pilih sesuai kebutuhan proyekmu!