Belajar React dari Nol: Komponen, State, dan Hooks

React adalah library JavaScript paling populer untuk membangun user interface. Dibuat oleh Facebook (Meta), React digunakan oleh perusahaan besar seperti Netflix, Airbnb, Discord, dan ratusan ribu website lainnya.

Kenapa React?

Komponen reusable — Bangun UI dari potongan kecil yang bisa dipakai ulang
Virtual DOM — Update halaman dengan efisien, hanya bagian yang berubah
Ekosistem besar — React Router, Redux, TanStack Query, Next.js, dan ribuan library lainnya
Permintaan kerja tinggi — React konsisten menjadi skill paling dicari di lowongan frontend

Konsep Dasar: Komponen

Di React, semuanya adalah komponen. Komponen adalah fungsi JavaScript yang mengembalikan JSX (HTML-like syntax):

function Greeting() {
  return <h1>Halo, Dunia!</h1>
}

JSX terlihat seperti HTML, tapi sebenarnya JavaScript. Perbedaan utamanya:

class → className
for → htmlFor
Semua tag harus ditutup (<img />, <br />)
Expression JavaScript ditulis dalam {curly braces}

Props: Mengirim Data ke Komponen

Props (properties) adalah cara mengirim data dari komponen induk ke anak:

function UserCard({ name, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  )
}

// Penggunaan
<UserCard name="Budi" role="Frontend Developer" />
<UserCard name="Ani" role="Backend Developer" />

Props bersifat read-only — komponen anak tidak boleh mengubah props yang diterima.

State: Data yang Berubah

State adalah data internal komponen yang bisa berubah seiring waktu. Gunakan useState hook:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Klik: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Tambah
      </button>
    </div>
  )
}

Setiap kali setCount dipanggil, React akan re-render komponen dengan nilai baru. Ini inti dari cara React bekerja.

Coba State Langsung

Interaksi dengan counter dan todo list di bawah — semuanya menggunakan useState:

const [count, setCount] = useState(0)

Props vs State

	Props	State
Siapa yang mengatur?	Komponen induk	Komponen itu sendiri
Bisa diubah?	Tidak (read-only)	Ya (via setter function)
Kapan berubah?	Saat induk re-render	Saat setState dipanggil

Hooks: Fitur Paling Penting di React Modern

Hooks adalah fungsi khusus yang dimulai dengan use. Tiga hooks yang paling sering dipakai:

useState

Untuk menyimpan dan mengubah data:

const [items, setItems] = useState([])
const [isOpen, setIsOpen] = useState(false)
const [form, setForm] = useState({ name: '', email: '' })

useEffect

Untuk menjalankan side effect — seperti fetch data, subscribe event, atau manipulasi DOM:

import { useState, useEffect } from 'react'

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data))
  }, [userId])  // Re-run saat userId berubah

  if (!user) return <p>Loading...</p>
  return <h1>{user.name}</h1>
}

Dependency array [userId] mengontrol kapan effect dijalankan:

[] — hanya sekali saat mount
[userId] — saat userId berubah
Tanpa array — setiap render (jarang dibutuhkan)

useRef

Untuk mengakses elemen DOM langsung atau menyimpan nilai yang tidak trigger re-render:

import { useRef } from 'react'

function SearchInput() {
  const inputRef = useRef(null)

  function focusInput() {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} placeholder="Cari..." />
      <button onClick={focusInput}>Focus</button>
    </div>
  )
}

Event Handling

React menggunakan camelCase untuk event dan menerima fungsi (bukan string):

function Form() {
  const [name, setName] = useState('')

  function handleSubmit(e) {
    e.preventDefault()
    console.log('Submitted:', name)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Nama"
      />
      <button type="submit">Kirim</button>
    </form>
  )
}

Conditional Rendering

Tampilkan UI berbeda berdasarkan kondisi:

function Dashboard({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Selamat datang!</h1>
      ) : (
        <h1>Silakan login</h1>
      )}
    </div>
  )
}

List Rendering

Render daftar data menggunakan .map():

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}

Selalu berikan key yang unik pada setiap item — ini membantu React melacak perubahan.

Cara Berpikir dalam React

React punya pola pikir yang berbeda dari jQuery atau vanilla JS:

Deklaratif, bukan imperatif — Deskripsikan apa yang ingin ditampilkan, bukan bagaimana mengubah DOM
Data mengalir ke bawah — Props dikirim dari parent ke child, bukan sebaliknya
State adalah sumber kebenaran — UI selalu merepresentasikan state saat ini
Komponen kecil lebih baik — Pecah UI jadi komponen-komponen kecil yang fokus pada satu hal

Langkah Selanjutnya

Setelah menguasai dasar React:

React Router — Navigasi antar halaman
TanStack Query — Data fetching dan caching yang efisien
State management — Context API, Zustand, atau Redux
TypeScript — Type safety untuk React yang lebih robust
Next.js / Remix — Framework full-stack di atas React

React punya kurva belajar, tapi konsep-konsep dasarnya (komponen, props, state, hooks) akan selalu relevan. Kuasai fundamentalnya, dan framework-framework di atasnya akan terasa jauh lebih mudah.