Mengenal Komponen & State di React: Fondasi Website Interaktif Modern

Setelah kita belajar tentang async/await di JavaScript, sekarang saatnya naik kelas ke dunia framework yaitu React! Di artikel ini, kita bakal kenalan sama dua konsep paling dasar tapi super penting di React: components dan state.

Apa Itu React Component?

Komponen di React itu seperti LEGO kecil yang bisa digabung buat bikin UI (User Interface). Setiap bagian dari website seperti tombol, header, hingga kartu produk bisa dibikin jadi satu komponen mandiri.

Komponen bisa dibagi dua:

Functional Component (zaman now, paling umum)
Class Component (versi lama, kita bahas sekilas aja)

Contoh Functional Component:

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

Komponen di atas bisa kamu gunakan berkali-kali di halaman web React-mu.

Props: Kirim Data Antar Komponen

Props adalah singkatan dari “properties”, alias data yang dikirim dari komponen parent ke child. Mirip kayak parameter di fungsi JavaScript.

function Salam(props) {
  return <h1>Halo, {props.nama}!</h1>;
}

// Pemakaian:
<Salam nama="Mafiatek" />

Props bersifat read-only, artinya nggak bisa diubah dari dalam komponen itu sendiri.

State: Data Dinamis di Komponen

Kalau props itu data dari luar, state adalah data internal yang bisa berubah seiring interaksi user (misalnya klik tombol).

React menyediakan useState() buat bikin state di functional component:

import { useState } from 'react';

function Counter() {
  const [angka, setAngka] = useState(0);

  return (
    <div>
      <p>Angka: {angka}</p>
      <button onClick={() => setAngka(angka + 1)}>Tambah</button>
    </div>
  );
}

Setiap kali kamu klik tombol, React bakal "re-render" bagian itu dan tampilkan angka terbaru.

Mini Project: Komponen Hitung Klik

Coba bikin 2 komponen sederhana:

Header → tampilkan judul (pakai props)
Counter → tampilkan dan update angka (pakai state)

Tantangan tambahan: tambahkan tombol reset ke angka 0!

Kenapa Ini Penting?

Komponen dan state adalah fondasi dari semua aplikasi React. Kalau kamu udah paham konsep ini, kamu bakal lebih mudah ngerti hal-hal lanjutan seperti useEffect, props drilling, hingga state management kayak Redux atau Context.

Gimana, udah mulai kebayang serunya ngoding pakai React? 😎 Di artikel berikutnya kita bakal bahas useEffect, hook penting buat ngatur efek samping seperti ambil data dari API.

Sampai jumpa di artikel selanjutnya dan ingat, jangan berhenti ngoding! 🚀