Memahami Component, Props, dan State dalam React untuk Pemula

Banyak pemula merasa React sulit bukan karena sintaksnya, melainkan karena tiga konsep dasarnya terasa saling tumpang tindih: component React, props, dan state. Begitu ketiganya dipahami, sebagian besar kode React yang kamu temui akan terasa masuk akal. Memahami component, props, dan state dalam React untuk pemula sebenarnya cukup dengan satu kerangka berpikir: component adalah potongan tampilan, props adalah data yang diterima dari luar, dan state adalah data yang bisa berubah di dalam.

Panduan ini menjelaskan ketiganya dari nol, lengkap dengan contoh kode yang sudah dicek, perbedaan props dan state, contoh aplikasi daftar tugas, kesalahan yang sering dilakukan pemula, serta latihan mandiri.

Ringkasan cepat

• Component: fungsi yang mengembalikan tampilan (JSX), dan bisa dipakai berulang.
• Props: data yang dikirim dari component induk ke anak. Bersifat hanya-baca.
• State: data milik component yang bisa berubah dan memicu tampilan diperbarui.
• Data mengalir satu arah, dari atas (induk) ke bawah (anak).

Daftar Isi

• Apa itu React dan mengapa dipakai
• Apa itu component React
• Menyiapkan proyek React
• Aturan dasar JSX
• Props: mengirim data ke component
• State: data yang bisa berubah
• Perbedaan props dan state
• Contoh lengkap: aplikasi daftar tugas
• Cara kerja alur data
• Kesalahan umum pemula
• Latihan mandiri
• Sumber belajar tepercaya
• Pertanyaan yang sering diajukan

Apa Itu React dan Mengapa Dipakai?

React adalah pustaka JavaScript untuk membangun antarmuka pengguna. Alih-alih memanipulasi halaman secara langsung, kamu mendeskripsikan seperti apa tampilan yang diinginkan berdasarkan data, lalu React memperbarui halaman saat data berubah. Pendekatan ini membuat tampilan lebih mudah diprediksi dan dirawat.

Ide utamanya adalah memecah tampilan menjadi bagian-bagian kecil yang bisa dipakai ulang. Bagian kecil itulah yang disebut component. Sebuah halaman bisa terdiri dari component navigasi, kartu produk, formulir, dan footer yang masing-masing mengurus dirinya sendiri.

Apa Itu Component React?

Component React pada dasarnya adalah fungsi JavaScript yang mengembalikan tampilan dalam bentuk JSX, yaitu sintaks mirip HTML yang ditulis di dalam JavaScript. React modern memakai function component, sehingga kamu tidak perlu mempelajari class untuk mulai belajar.

function Salam() {
  return <h1>Halo, React!</h1>;
}

export default function App() {
  return (
    <div>
      <Salam />
      <Salam />
    </div>
  );
}

Dua hal penting dari contoh di atas. Pertama, nama component wajib diawali huruf kapital, supaya React membedakannya dari elemen HTML biasa. Kedua, component bisa dipakai berkali-kali seperti tag HTML, dan setiap pemakaian menghasilkan tampilan sendiri.

Mengapa memecah menjadi component?

• Dipakai ulang. Tulis sekali, pakai di banyak tempat.
• Lebih mudah dibaca. Setiap component mengurus satu tugas kecil.
• Lebih mudah diperbaiki. Bug biasanya terlokalisasi di satu component.
• Mudah dikerjakan tim. Orang berbeda bisa mengerjakan component berbeda.

Menyiapkan Proyek React untuk Belajar

Cara termudah untuk mulai adalah memakai Vite. Pastikan Node.js versi LTS terbaru sudah terpasang, lalu jalankan perintah berikut di terminal:

npm create vite@latest belajar-react -- --template react
cd belajar-react
npm install
npm run dev

Setelah itu, buka alamat yang muncul di terminal (biasanya http://localhost:5173) di peramban. File src/App.jsx adalah component pertama yang bisa kamu ubah. Untuk panduan resmi dan opsi lain, periksa dokumentasi belajar React di react.dev, karena cara memulai proyek bisa berubah dari waktu ke waktu.

Aturan Dasar JSX yang Harus Dipahami

JSX mirip HTML tetapi punya beberapa aturan berbeda. Berikut yang paling sering membuat pemula tersandung:

• Satu elemen induk. Component harus mengembalikan satu elemen pembungkus, atau fragmen <> ... </>.
• className, bukan class. Atribut kelas CSS ditulis className.
• Kurung kurawal untuk JavaScript. Nilai dan ekspresi ditulis di dalam { }.
• Tag wajib ditutup. Elemen kosong seperti gambar ditulis <img />.
• Atribut memakai camelCase. Misalnya onClick, bukan onclick.

const harga = 15000;
const jumlah = 3;

function Ringkasan() {
  return (
    <div className="kotak">
      <p>Total: {harga * jumlah}</p>
    </div>
  );
}

Props: Mengirim Data ke Component React

Props (singkatan dari properties) adalah cara component induk mengirim data ke component anak. Kamu menuliskannya seperti atribut HTML. Dengan props, satu component bisa menampilkan data berbeda tanpa menulis ulang kodenya.

function KartuProfil({ nama, peran }) {
  return (
    <div className="kartu">
      <h2>{nama}</h2>
      <p>{peran}</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <KartuProfil nama="Budi" peran="Frontend Developer" />
      <KartuProfil nama="Sari" peran="UI Designer" />
    </div>
  );
}

Pada contoh di atas, KartuProfil menerima objek props, lalu kita ambil nama dan peran langsung lewat destructuring pada parameter. Satu component, dua tampilan berbeda.

Props bersifat hanya-baca

Aturan terpenting: component tidak boleh mengubah props yang diterimanya. Props adalah milik induk. Jika data perlu berubah, itu pertanda kamu membutuhkan state di component yang tepat.

Props children

Selain props biasa, ada children yang berisi apa pun yang kamu letakkan di antara tag pembuka dan penutup component. Ini berguna untuk membuat pembungkus yang fleksibel.

function Kotak({ judul, children }) {
  return (
    <section>
      <h3>{judul}</h3>
      {children}
    </section>
  );
}

// pemakaian
<Kotak judul="Tips">
  <p>Latihan sedikit setiap hari.</p>
</Kotak>

Props bisa berupa fungsi

Props tidak hanya berisi teks atau angka. Kamu juga bisa mengirim fungsi agar component anak dapat memberi tahu induk bahwa sesuatu terjadi, misalnya tombol diklik. Pola ini dipakai pada contoh aplikasi di bawah.

State: Data yang Bisa Berubah

State adalah data milik sebuah component yang bisa berubah seiring waktu, misalnya jumlah klik, isi kolom input, atau daftar tugas. Ketika state berubah, React merender ulang component sehingga tampilan ikut diperbarui. Untuk membuat state, kita memakai Hook bernama useState.

import { useState } from "react";

export default function Penghitung() {
  const [jumlah, setJumlah] = useState(0);

  return (
    <div>
      <p>Jumlah klik: {jumlah}</p>
      <button onClick={() => setJumlah(jumlah + 1)}>Tambah</button>
    </div>
  );
}

useState(0) mengembalikan dua hal: nilai saat ini (jumlah) dan fungsi untuk mengubahnya (setJumlah). Nilai awalnya 0. Setiap kali tombol diklik, setJumlah dipanggil dengan nilai baru, lalu React merender ulang component dan menampilkan angka terbaru. Dokumentasi lengkapnya ada di referensi useState di react.dev.

Aturan penting tentang state

• Jangan ubah state secara langsung. Selalu pakai fungsi pengubah seperti setJumlah.
• Untuk array dan objek, buat salinan baru. React membandingkan nilai lama dan baru untuk tahu apakah perlu merender ulang.
• Pembaruan tidak langsung terlihat. Setelah memanggil fungsi pengubah, nilai state pada render yang sama belum berubah. Nilai baru muncul di render berikutnya.
• Gunakan bentuk fungsi jika nilai baru bergantung pada nilai lama.

setJumlah((sebelumnya) => sebelumnya + 1);

Bentuk fungsi ini memastikan kamu selalu memakai nilai terbaru, terutama saat beberapa pembaruan terjadi berurutan.

Perbedaan Props dan State

Ini bagian yang paling sering ditanyakan pemula. Berikut perbandingannya:

Aspek	Props	State
Asal data	Dikirim dari component induk	Dimiliki oleh component itu sendiri
Bisa diubah?	Tidak oleh penerima (hanya-baca)	Ya, lewat fungsi pengubah state
Fungsi	Mengatur tampilan berdasarkan data dari luar	Menyimpan data yang berubah seiring interaksi
Memicu render ulang	Ya, saat induk mengirim nilai baru	Ya, saat state diubah
Contoh	Nama dan peran pada kartu profil	Jumlah klik atau isi kolom input

Pegangan mudahnya: jika data dikirim dari luar, itu props. Jika data dimiliki dan bisa berubah di dalam component, itu state. Sebuah state di component induk sering menjadi props bagi component anaknya.

Contoh Lengkap: Aplikasi Daftar Tugas

Mari satukan component, props, dan state dalam aplikasi daftar tugas sederhana. Aplikasi ini bisa menambah tugas dan menandai tugas selesai dengan mengklik teksnya.

import { useState } from "react";

function TugasItem({ teks, selesai, onUbah }) {
  return (
    <li
      onClick={onUbah}
      style={{
        textDecoration: selesai ? "line-through" : "none",
        cursor: "pointer",
      }}
    >
      {teks}
    </li>
  );
}

export default function App() {
  const [tugas, setTugas] = useState([
    { id: 1, teks: "Belajar component", selesai: false },
    { id: 2, teks: "Pahami props dan state", selesai: false },
  ]);
  const [input, setInput] = useState("");

  function tambahTugas() {
    const teksBersih = input.trim();
    if (teksBersih === "") return;
    setTugas([...tugas, { id: Date.now(), teks: teksBersih, selesai: false }]);
    setInput("");
  }

  function ubahStatus(id) {
    setTugas(
      tugas.map((t) => (t.id === id ? { ...t, selesai: !t.selesai } : t))
    );
  }

  return (
    <div>
      <h1>Daftar Tugas</h1>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Tulis tugas baru"
      />
      <button onClick={tambahTugas}>Tambah</button>
      <ul>
        {tugas.map((t) => (
          <TugasItem
            key={t.id}
            teks={t.teks}
            selesai={t.selesai}
            onUbah={() => ubahStatus(t.id)}
          />
        ))}
      </ul>
    </div>
  );
}

Membedah kodenya

• Dua state di App. tugas menyimpan daftar tugas, dan input menyimpan isi kolom teks.
• Satu component anak. TugasItem hanya menampilkan satu tugas dan tidak punya state sendiri.
• Props ke anak. TugasItem menerima teks, selesai, dan fungsi onUbah.
• Salinan baru, bukan mengubah langsung. tambahTugas membuat array baru dengan operator sebar, dan ubahStatus memakai map untuk menghasilkan array baru.
• Atribut key. Setiap item pada daftar diberi key unik agar React bisa melacak item dengan benar.
• Input terkendali. Nilai kolom teks diambil dari state, dan setiap ketikan memperbarui state lewat onChange.

Cara Kerja Alur Data di React

Data di React mengalir satu arah: dari component induk ke anak lewat props. Anak tidak bisa langsung mengubah data milik induk. Jika anak perlu memengaruhi data, induk mengirim fungsi sebagai props, dan anak memanggil fungsi itu.

App (menyimpan state: tugas)
 |
 |-- kirim props: teks, selesai, onUbah
 v
TugasItem (menampilkan tugas)
 |
 |-- saat diklik, memanggil onUbah
 v
App memperbarui state, lalu React merender ulang

Pola ini sering disebut mengangkat state ke atas (lifting state up): state ditempatkan di component induk terdekat yang dibutuhkan oleh beberapa component anak. Dengan begitu, sumber kebenaran data cuma ada satu tempat, sehingga lebih mudah dilacak dan tidak saling bertentangan.

Kapan component dirender ulang?

• Saat state di component tersebut berubah.
• Saat component induknya dirender ulang dan mengirim props.

Merender ulang bukan berarti React membangun ulang seluruh halaman. React membandingkan hasil baru dengan yang lama, lalu hanya memperbarui bagian halaman yang benar-benar berubah.

Kesalahan Umum Pemula pada Component, Props, dan State

1. Mengubah state secara langsung

// Salah
tugas.push(tugasBaru);
setTugas(tugas);// Benar
setTugas([...tugas, tugasBaru]);

Mengubah array yang sama membuat React sulit mendeteksi perubahan. Selalu buat array atau objek baru.

2. Memanggil fungsi saat render, bukan saat klik

// Salah: fungsi langsung dijalankan saat render
<button onClick={tambahTugas()}>Tambah</button>// Benar: berikan referensi fungsi
<button onClick={tambahTugas}>Tambah</button>

3. Lupa memberi key pada daftar

Tanpa key yang unik dan stabil, React bisa salah memperbarui item saat daftar berubah urutan. Hindari memakai indeks array sebagai key jika urutan item bisa berubah.

4. Mencoba mengubah props

Props bersifat hanya-baca. Jika kamu perlu mengubah nilai, simpan di state pada component yang tepat, atau minta induk mengubahnya lewat fungsi yang dikirim sebagai props.

5. Nama component diawali huruf kecil

Component bernama kartuProfil akan dianggap elemen HTML biasa. Awali dengan huruf kapital, misalnya KartuProfil.

6. Menyimpan data turunan sebagai state

Jika sebuah nilai bisa dihitung dari state atau props yang sudah ada, misalnya jumlah tugas selesai, hitung saja saat render. Menyimpannya di state terpisah membuat data mudah tidak sinkron.

7. Melanggar aturan Hooks

Hooks seperti useState hanya boleh dipanggil di bagian paling atas component atau Hook lain, bukan di dalam kondisi, perulangan, atau fungsi biasa. Aturan ini menjaga urutan Hooks tetap konsisten di setiap render.

8. Terlalu banyak state

Mulai dengan state seminimal mungkin. Jika dua nilai selalu berubah bersamaan, pertimbangkan menyimpannya dalam satu objek.

Latihan Mandiri untuk Menguasai Component React

Membaca saja tidak cukup. Coba lima latihan berikut secara berurutan:

1. Kartu produk. Buat component KartuProduk yang menerima nama, harga, dan gambar lewat props, lalu tampilkan tiga produk berbeda.
2. Penghitung dengan batas. Tambahkan tombol kurang, dan cegah angka turun di bawah nol.
3. Saklar tema. Buat tombol yang mengubah tema terang dan gelap memakai satu state.
4. Hapus tugas. Tambahkan tombol hapus pada aplikasi daftar tugas, dengan menyaring array memakai filter.
5. Pencarian sederhana. Tambahkan kolom pencarian yang menyaring daftar tugas berdasarkan teks yang diketik.

Setelah menyelesaikan satu latihan, coba tulis ulang dari awal tanpa melihat solusi lama. Jika bisa, berarti kamu benar-benar paham. Jika kamu butuh dasar yang lebih kuat sebelum lanjut, baca juga tips memahami logika pemrograman bagi pemula.

Sumber Belajar Tepercaya

• Dokumentasi belajar React (react.dev): sumber resmi dengan contoh interaktif.
• Panduan JavaScript di MDN: referensi untuk memperkuat dasar JavaScript yang dipakai React.
• NgodingDaily: artikel ngoding lainnya untuk pemula.

Karena React terus berkembang, selalu cek dokumentasi resmi untuk panduan terbaru, terutama soal cara memulai proyek dan fitur baru.

Pertanyaan yang Sering Diajukan

Apa itu component React?

Component React adalah fungsi JavaScript yang mengembalikan tampilan dalam bentuk JSX dan bisa dipakai berulang. Component adalah blok penyusun utama aplikasi React.

Apa perbedaan props dan state di React?

Props adalah data yang dikirim dari component induk dan bersifat hanya-baca. State adalah data milik component itu sendiri yang bisa berubah dan memicu render ulang.

Apakah harus belajar JavaScript dulu sebelum React?

Ya, sebaiknya. React dibangun di atas JavaScript, jadi pemahaman dasar seperti variabel, fungsi, array, dan objek akan sangat membantu.

Apa itu JSX?

JSX adalah sintaks yang mirip HTML tetapi ditulis di dalam JavaScript untuk mendeskripsikan tampilan. Proses build akan mengubahnya menjadi kode JavaScript biasa.

Mengapa perubahan state tidak langsung terlihat?

Karena React menjadwalkan pembaruan dan menampilkan nilai baru pada render berikutnya. Pada render yang sama, nilai state tetap yang lama.

Kapan sebaiknya memakai state, kapan props?

Pakai props untuk data yang datang dari luar component. Pakai state untuk data yang dimiliki component dan bisa berubah karena interaksi pengguna.

Apakah function component lebih baik daripada class component?

Untuk proyek baru dan pemula, function component dengan Hooks adalah pendekatan yang umum dipakai dan lebih ringkas, sehingga itulah yang dianjurkan untuk dipelajari lebih dulu.

Apakah Create React App masih dipakai?

Create React App sudah tidak direkomendasikan untuk proyek baru. Gunakan alat modern seperti Vite, atau framework berbasis React, sesuai kebutuhan proyekmu.

Kesimpulan

Menguasai component React berarti memahami cara memecah tampilan menjadi bagian-bagian yang bisa dipakai ulang, sementara props dan state mengatur data yang mengalir di dalamnya. Props membawa data dari luar dan bersifat hanya-baca, sedangkan state menyimpan data yang berubah dan memicu tampilan diperbarui. Mulailah dari component kecil, berlatih lewat aplikasi sederhana seperti daftar tugas, dan biasakan menghindari kesalahan umum seperti mengubah state langsung. Dengan latihan yang konsisten, konsep yang awalnya membingungkan akan menjadi kebiasaan berpikir yang alami.