Belajar React Dasar: JSX, Props, & State (Edisi Santuy)

Halo, Sobat Koding! 👋

Lagi pengen belajar React tapi pusing baca dokumentasi resmi yang bahasanya kaku banget? Tenang, kamu di tempat yang tepat. Di sini kita bakal bahas React kayak lagi ngopi santai bareng temen. Gak pake istilah ribet yang bikin kerut dahi.

Hari ini menu kita adalah Konsep Dasar React. Kita bakal bedah tiga pilar utamanya: JSX, Props, dan State.

Siap? Yuk gaskeun! 🚀

React itu Apa sih?

Bayangin kamu lagi main LEGO. Kalau kamu mau bikin istana LEGO, kamu nggak nyetak satu istana gede langsung dari pabrik, kan? Kamu nyusunnya dari bata-bata kecil. Ada bata merah, bata biru, jendela, pintu, atap, dll.

Nah, React itu kayak main LEGO buat website. Kita nggak bikin satu halaman web index.html yang panjangnya minta ampun. Kita pecah-pecah jadi komponen kecil (bata LEGO-nya).

• Tombol itu komponen.
• Header itu komponen.
• Kartu profil itu komponen.

Nanti komponen-komponen ini disusun jadi satu halaman utuh. Rapi, bisa dipake ulang, dan gampang diatur. Asik kan? 😎

1. JSX: HTML yang Nyasar ke JavaScript

Pas pertama liat kodingan React, mungkin kamu bakal kaget: “Lho, kok ada HTML di dalem JavaScript? Error woy!”

Contoh:

const Kenalan = () => {
  return <h1>Halo, saya Jules!</h1>;
};

Tenang, itu bukan error. Itu namanya JSX (JavaScript XML). React ngebolehin kita nulis struktur UI (mirip HTML) langsung di dalem logika JavaScript.

Kenapa gitu? Biar gampang! Kamu nggak perlu loncat-loncat antara file HTML dan JS buat ngatur tampilan. Semuanya ada di satu tempat. Nanti si React (dibantu alat kayak Babel) bakal nerjemahin itu jadi JavaScript biasa yang dimengerti browser.

Ingat aturannya dikit aja:

• Karena ini JavaScript, kata kuncinya beda dikit. class di HTML jadi className di JSX (soalnya class udah dipake JS).
• Tutup semua tag! <br> harus jadi <br />. Jangan males ya! 😜

2. Props: Kirim-kiriman Data

Oke, kita udah punya komponen. Tapi komponen yang statis doang itu ngebosenin. Gimana kalau kita mau bikin komponen “Kartu Nama” yang isinya beda-beda tiap orang?

Di sinilah Props (singkatan dari Properties) masuk. Bayangin Props itu kayak argumen fungsi atau parameter. Atau lebih simpelnya: kayak kamu ngasih catetan ke temen.

// Komponen KartuNama nerima "catetan" (props)
const KartuNama = (props) => {
  return (
    <div className="kartu">
      <h3>Halo, nama saya {props.nama}</h3>
      <p>Pekerjaan: {props.job}</p>
    </div>
  );
};

// Cara pakenya:
<KartuNama nama="Budi" job="Tukang Kode" />
<KartuNama nama="Siti" job="Desainer Kece" />

Liat kan? Satu komponen KartuNama bisa dipake berkali-kali dengan data yang beda. Penting: Props itu sifatnya “dikasih”. Komponen yang nerima props nggak boleh ngubah isinya. Cuma boleh dibaca aja.

3. State: Ingatan si Komponen

Kalau Props itu data dari luar (dikasih orang), State itu data dari dalem (milik sendiri). State itu kayak ingatan si komponen. Dia bisa berubah seiring waktu.

Contoh paling klasik: Counter (penghitung). Angkanya mulai dari 0. Kalau tombol dipencet, angkanya nambah jadi 1, 2, 3, dst. Perubahan angka ini harus disimpen di State.

Di React modern (pake Hooks), kita pake mantra ajaib namanya useState.

import { useState } from "react";

const Penghitung = () => {
  // Kita bikin state 'angka', nilai awalnya 0
  // 'setAngka' itu tombol buat ngubah nilainya
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <p>Kamu udah klik {angka} kali</p>
      <button onClick={() => setAngka(angka + 1)}>Pencet Aku!</button>
    </div>
  );
};

Analogi Gampang:

• Props: Kayak tulisan di kaos kamu. Orang lain bisa liat, tapi kamu nggak bisa ubah tulisan itu (kecuali ganti kaos).
• State: Kayak mood kamu. Bisa seneng, sedih, laper. Itu ada di dalem diri kamu dan bisa berubah tergantung situasi (misal: dikasih makan -> jadi seneng).

Penutup

Gimana? Nggak serem kan React itu? 😉 Intinya cuma:

1. Bikin Komponen (susun LEGO).
2. Pake JSX (tulis HTML di JS).
3. Kirim Data pake Props.
4. Simpen Data Berubah pake State.

Di artikel selanjutnya, kita bakal bahas yang lebih seru lagi: Hooks dan gimana cara ngambil data dari internet (API Fetching). Stay tuned ya!

Jangan lupa ngoding hari ini! 💻☕