ReactJS #5: JSX – Menulis HTML di Dalam JavaScript

ReactJS #5: JSX

Menulis HTML di Dalam JavaScript? Gampang Banget, Kok!

Halo, kreator cilik! 🎨

Di artikel sebelumnya kita sudah belajar tentang komponen – balok Lego penyusun website. Nah, sekarang kita akan belajar bahasa khusus yang dipakai komponen untuk menggambar tampilan. Bahasa itu namanya JSX.

🔤 + 🧱 = JSX

🤔 Apa Itu JSX?

JSX singkatan dari JavaScript XML. Ini adalah cara React menulis kode yang mirip HTML, tapi berada di dalam file JavaScript. Biar gampang, bayangkan kita ingin menggambar rumah. Biasanya kita pakai kertas gambar (HTML). Dengan JSX, kita bisa menggambar rumah di dalam buku catatan yang penuh dengan angka dan rumus (JavaScript). Kelihatannya aneh, tapi React bisa membacanya dan mengubahnya menjadi gambar nyata di browser.

Contoh paling sederhana: kita ingin menampilkan tulisan "Halo Dunia". Di React, kita tulis seperti ini:

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

Kode <h1>Halo Dunia!</h1> itu adalah JSX. Kelihatan seperti HTML, kan? Padahal dia ada di dalam fungsi JavaScript.

📜 Aturan Main JSX (Supaya Tidak Error)

Seperti setiap permainan, JSX juga punya aturan. Tapi tenang, cuma sedikit dan mudah diingat.

1️⃣ Hanya Boleh Mengembalikan SATU Elemen Pembungkus

Bayangkan kita punya beberapa balok yang ingin ditempel jadi satu. Semua balok itu harus ditaruh di atas satu alas yang sama. Di JSX, kita harus membungkus beberapa elemen dengan satu tag, misalnya <div> atau <>...</> (ini namanya fragment – pembungkus kosong).

❌ Salah:
return <p>Satu</p> <p>Dua</p>;

✅ Benar:
return <div><p>Satu</p><p>Dua</p></div>;
atau
return <><p>Satu</p><p>Dua</p></>;

2️⃣ Pakai className, Bukan class

Di HTML biasa, kita memberi kelas dengan class="...". Tapi di JSX, karena class sudah dipakai JavaScript, kita ganti dengan className.

<h1 className="judul">Halo</h1>

3️⃣ Menyisipkan Kode JavaScript dengan Kurung Kurawal { }

Kita bisa memasukkan variabel, angka, atau operasi matematika ke dalam JSX. Caranya bungkus dengan { }.

function Sapaan() { const nama = "Budi"; const umur = 10; return <p>Halo, namaku {nama}, umurku {umur} tahun. {2 + 3} tahun lagi aku akan berusia {umur + 5}.</p>; }

Hasilnya di browser: Halo, namaku Budi, umurku 10 tahun. 5 tahun lagi aku akan berusia 15 tahun.

4️⃣ Semua Tag Harus Ditutup

Di HTML, ada tag yang tidak perlu ditutup seperti <br> atau <img>. Di JSX, semua tag harus ditutup, misalnya <br /> atau <img src="..." />.

5️⃣ Gaya (CSS) Bisa Ditulis dengan Objek

Kita bisa menambahkan gaya langsung di JSX dengan atribut style. Tapi nilai style harus berupa objek JavaScript, dan nama propertinya menggunakan camelCase (misalnya backgroundColor, bukan background-color).

<div style={{ backgroundColor: 'yellow', padding: '20px', borderRadius: '15px' }}> Kotak Kuning </div>

Perhatikan kurung kurawal ganda {{ }}: yang luar untuk JSX (menandakan kita masuk ke JavaScript), yang dalam untuk objek JavaScript.

🧪 Contoh Lengkap: Profil Sederhana dengan JSX

Ayo kita buat komponen yang menampilkan profil menggunakan JSX. Buka file App.js di proyek React-mu, lalu ganti dengan kode berikut:

function App() { const nama = "Susi"; const umur = 9; const hobi = "membaca komik"; const warnaFavorit = "ungu"; return ( <div style={{ border: '5px solid purple', borderRadius: '30px', padding: '30px', maxWidth: '400px', margin: 'auto', backgroundColor: '#f3e5f5' }}> <h1 style={{ color: 'purple', textAlign: 'center' }}>Profilku</h1> <p><strong>Nama:</strong> {nama}</p> <p><strong>Umur:</strong> {umur} tahun</p> <p><strong>Hobi:</strong> {hobi}</p> <p><strong>Warna favorit:</strong> {warnaFavorit}</p> <p>Tahun depan umurku {umur + 1} tahun!</p> </div> ); } export default App;

Simpan, lihat browser! Kamu akan melihat kartu profil berwarna ungu dengan data dari variabel. Coba ubah nilai variabelnya, maka tampilan akan ikut berubah.

💡 Kuis kecil: Di kode di atas, mana yang termasuk JSX? Mana yang JavaScript biasa? (Jawaban: semua yang mirip HTML adalah JSX, yang di dalam { } adalah JavaScript.)

🎨 Latihan: Buat Kartu Keluarga

Buat komponen bernama KartuKeluarga yang menerima (belum pakai props, nanti di artikel #6) atau cukup dengan variabel di dalamnya. Tampilkan nama, umur, dan peran (ayah, ibu, anak). Gunakan JSX dengan gaya-gaya sederhana. Tampilkan tiga kartu: untuk Ayah, Ibu, dan Kamu.

Jika bingung, ini contoh kerangka:

function KartuKeluarga() { const anggota = [ { nama: "Budi", umur: 40, peran: "Ayah" }, { nama: "Siti", umur: 35, peran: "Ibu" }, { nama: "Andi", umur: 8, peran: "Anak" } ]; return ( <div> {/* Di sini kita akan menampilkan kartu */} {/* Untuk sementara, kita tulis manual dulu per kartu */} <div style={cardStyle}> <h2>Budi</h2> <p>Umur: 40</p> <p>Peran: Ayah</p> </div> {/* ulangi untuk ibu dan anak... */} </div> ); }

Nanti di artikel selanjutnya kita akan belajar membuat lebih efisien dengan props dan looping.

📝 Catatan Penting

• JSX itu opsional, sebenarnya kita bisa menulis React tanpa JSX. Tapi dengan JSX, kode kita lebih mudah dibaca dan ditulis, seperti menulis HTML biasa.
• React akan mengubah JSX menjadi JavaScript biasa melalui alat yang namanya Babel. Tapi kita tidak perlu pusing, semua sudah diatur oleh Create React App.

🚀 Kesimpulan

• JSX adalah "HTML di dalam JavaScript" yang membuat React begitu ekspresif.
• Aturan utamanya: bungkus dengan satu elemen, pakai className, gunakan { } untuk menyisipkan JavaScript, dan tutup semua tag.
• Kita bisa menyisipkan variabel, operasi matematika, bahkan objek style ke dalam JSX.

Di artikel selanjutnya kita akan belajar tentang Props – cara memberi "oleh-oleh" ke komponen agar komponen kita bisa lebih bervariasi. Sampai jumpa!

Lanjut ke ReactJS #6: Props ▶

✨ JSX itu mudah, seperti menulis HTML sambil bermain JavaScript! ✨