14-07-2025 | Admin User Dasar 33 x dilihat

Mengenal JSX: Pondasi Bangun Aplikasi React

1. Mengapa JSX Digunakan?

JSX adalah cara menulis kode di React yang mirip HTML, tapi sebenarnya adalah JavaScript. Mengapa digunakan?

Mudah Dibaca: JSX memungkinkan Anda menulis tampilan (UI) seperti menulis HTML, jadi lebih mudah dipahami.
Kombinasi JavaScript dan UI: JSX memadukan logika JavaScript dengan tampilan, sehingga Anda bisa membuat aplikasi interaktif dengan lebih sederhana.
Efisien: JSX membantu React memperbarui hanya bagian UI yang berubah, membuat aplikasi lebih cepat.

Contoh sederhana:

function App() {
  return <h1>Halo Dunia!</h1>;
}

Kode di atas terlihat seperti HTML, tapi sebenarnya JSX yang diubah menjadi JavaScript oleh React.

2. Perbedaan antara JSX dan HTML

Meski mirip, JSX bukan HTML. Berikut perbedaannya:

JSX adalah JavaScript: JSX diubah menjadi kode JavaScript, bukan langsung HTML. Anda tidak bisa menulis semua tag HTML begitu saja tanpa aturan React.
Atribut Berbeda: JSX menggunakan nama atribut dalam camelCase (contoh: className bukan class, htmlFor bukan for).
Ekspresi JavaScript: JSX memungkinkan Anda menyisipkan kode JavaScript di dalam tanda kurung kurawal {}.
Tidak Bisa Langsung Dijalankan di Browser: JSX memerlukan alat seperti Babel untuk diubah menjadi JavaScript yang bisa dipahami browser.

Contoh:

HTML: <div class="box">Halo</div>
JSX: <div className="box">Halo</div>

3. Atribut dalam JSX

Atribut di JSX mirip dengan HTML, tapi ada perbedaan penulisan:

className: Digunakan untuk menambahkan kelas CSS, bukan class.
```
<div className="container">Ini div</div>
```

htmlFor: Digunakan untuk menghubungkan label dengan input, bukan for.

<label htmlFor="nama">Nama:</label>
<input id="nama" type="text" />

Atribut camelCase Lain: Contohnya onClick, onChange untuk event, bukan onclick atau onchange.
Atribut Khusus: Beberapa atribut seperti data-* atau aria-* sama seperti HTML.

Catatan: Selalu gunakan camelCase untuk atribut yang biasanya lowercase di HTML.

4. Menampilkan Ekspresi JavaScript dalam JSX

JSX memungkinkan Anda menyisipkan kode JavaScript di dalam tanda kurung kurawal {} untuk menampilkan data dinamis.

Contoh:

import React from 'react';

function App() {
const name = "Budi";
const age = 25;

return (

    Halo : {name}!

   Umur: {age} tahun

   Penjumlahan: {2 + 3}
);
}


export default App;

Penjelasan:

{name}: Menampilkan nilai variabel name (Budi).
{age}: Menampilkan nilai variabel age (25).
{2 + 3}: Menjalankan ekspresi JavaScript dan menampilkan hasilnya (5).
Hanya Ekspresi: Anda hanya bisa memasukkan ekspresi (nilai, variabel, operasi) di dalam {}, bukan pernyataan seperti if atau for.

Langkah Praktis untuk Mencoba

Pastikan Anda sudah menginstal React (lihat tutorial instalasi sebelumnya).
Buat file src/App.js dengan kode di atas.
Jalankan aplikasi dengan npm start.
Buka http://localhost:3000 di browser untuk melihat hasilnya.

Kesimpulan

JSX membuat React lebih mudah digunakan karena mirip HTML, tapi lebih kuat karena bisa menggabungkan JavaScript. Dengan memahami perbedaan JSX dan HTML, aturan atribut seperti className, dan cara menyisipkan ekspresi JavaScript, Anda siap membuat UI dinamis. Selanjutnya, Anda bisa belajar tentang props, state, atau event handling untuk membuat aplikasi lebih interaktif.