Belajar react 1

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

1. ✅ Apa itu React
2. ✅ Struktur proyek React
3. ➜ JSX (pelajaran hari ini)
4. Komponen
5. Props
6. State
7. Event
8. Form
9. Routing
10. 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:

• const untuk 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.