Juli 15, 2026
Baik. Saya akan mengajarkan React dengan pendekatan yang disesuaikan dengan pengalaman Anda sebagai programmer PHP. Jadi kita tidak mulai dari teori yang rumit, tetapi dengan membandingkannya dengan yang sudah Anda kuasai.
Rencana Belajar React
- ✅ Apa itu React
- ✅ Struktur proyek React
- ➜ JSX (pelajaran hari ini)
- Komponen
- Props
- State
- Event
- Form
- Routing
- React + Supabase
Pelajaran 1: JSX
JSX adalah cara menulis HTML di dalam JavaScript.
Misalnya di PHP Anda biasa menulis:
<h1>Assalamu'alaikum</h1>
<p>Selamat datang di Bimbel.</p>
Di React:
function App() {
return (
<div>
<h1>Assalamu'alaikum</h1>
<p>Selamat datang di Bimbel.</p>
</div>
);
}
Yang penting diperhatikan adalah:
return (
...
)
Artinya fungsi App() mengembalikan tampilan.
Kenapa harus ada <div>?
Di React, satu komponen harus mengembalikan satu elemen induk.
❌ Salah
return (
<h1>Judul</h1>
<p>Isi</p>
)
Karena ada dua elemen sejajar.
✅ Benar
return (
<div>
<h1>Judul</h1>
<p>Isi</p>
</div>
)
Menampilkan variabel
PHP:
<?php
$nama = "Abu Unais";
?>
<p><?= $nama ?></p>
React:
function App() {
const nama = "Abu Unais";
return (
<p>{nama}</p>
);
}
Di React, variabel ditampilkan dengan kurung kurawal {}.
Menampilkan hasil perhitungan
function App() {
return (
<h1>{10 + 5}</h1>
);
}
Hasilnya:
15
Di dalam {} Anda bisa menulis ekspresi JavaScript.
Perbedaan dengan HTML
Ada beberapa perbedaan kecil.
HTML:
<label for="nama">Nama</label>
React:
<label htmlFor="nama">Nama</label>
Karena for adalah kata khusus di JavaScript.
Begitu juga:
HTML:
<input class="form-control">
React:
<input className="form-control" />
Menjadi className.
Tugas kecil
Buatlah komponen yang menampilkan:
Bismillah
Nama : Abu Unais
Usia : 40 Tahun
Pekerjaan : Programmer PHP
Gunakan:
constuntuk menyimpan data.{}untuk menampilkan variabel.
Tidak perlu khawatir jika salah. Justru dari latihan-latihan kecil seperti ini Anda akan cepat terbiasa membaca dan menulis kode React.
Besok atau setelah Anda selesai mencoba latihan ini, kita akan masuk ke komponen, yaitu konsep paling penting dalam React. Setelah memahami komponen, Anda akan mulai bisa membaca kode proyek Lovable yang sedang Anda kerjakan.
