React adalah salah satu library JavaScript paling populer untuk membangun antarmuka pengguna (UI) modern. Digunakan oleh Facebook, Instagram, Netflix, hingga ribuan startup di seluruh dunia, React memungkinkan kamu membangun aplikasi web yang cepat, interaktif, dan mudah dipelihara. Di tutorial ini, kita akan membangun aplikasi todo sederhana dari nol sambil mempelajari tiga konsep inti React: komponen, props, dan state.

Apa Itu React dan Mengapa Kamu Harus Mempelajarinya?

React adalah library untuk membangun UI berbasis komponen. Alih-alih menulis satu halaman HTML raksasa, kamu memecah antarmuka menjadi potongan-potongan kecil yang dapat dipakai ulang. Pendekatan ini membuat kode lebih rapi, mudah diuji, dan mudah dikembangkan seiring aplikasi tumbuh. React juga menggunakan Virtual DOM yang membuat pembaruan tampilan menjadi sangat efisien.

Sebelum lanjut, pastikan kamu sudah memahami dasar-dasar JavaScript — seperti variabel, fungsi, dan cara kerja DOM. Jika belum, sebaiknya baca dulu panduan Memahami Dasar JavaScript: Variabel, Fungsi, dan DOM agar materi React di sini lebih mudah diikuti.

Prasyarat

Untuk mengikuti tutorial ini, kamu hanya memerlukan Node.js (versi 18 atau lebih baru) beserta npm yang otomatis terpasang bersamanya. Jalankan perintah node -v dan npm -v di terminal untuk memastikan keduanya sudah terpasang.

Menyiapkan Proyek React dengan Vite

Ada banyak cara membuat proyek React, tapi cara tercepat dan paling direkomendasikan saat ini adalah menggunakan Vite. Vite menawarkan waktu build dan hot-reload yang jauh lebih cepat dibandingkan tool lama seperti Create React App. Jalankan perintah berikut di terminal:

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

Setelah perintah terakhir dijalankan, Vite akan menampilkan alamat lokal (biasanya http://localhost:5173). Buka alamat tersebut di browser dan kamu akan melihat halaman sambutan React berjalan. Selamat, proyek React pertamamu sudah aktif! 🎉

Struktur Proyek

Masuk ke folder proyek, kamu akan menemukan beberapa file. Dua yang paling penting untuk kita adalah src/App.jsx (komponen utama aplikasi) dan src/main.jsx (titik masuk yang merender aplikasi ke halaman). Semua komponen yang akan kita buat nanti diletakkan di dalam folder src.

Membuat Komponen Pertamamu

Komponen adalah fondasi dari setiap aplikasi React. Komponen pada dasarnya adalah sebuah fungsi JavaScript yang mengembalikan JSX — sintaks mirip HTML yang ditulis langsung di dalam JavaScript. Ganti isi src/App.jsx dengan kode berikut:

javascript
function Greeting() {
  return <h1>Halo, dunia! 👋</h1>;
}

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

Perhatikan bahwa nama komponen diawali huruf kapital (Greeting, bukan greeting). Aturan ini wajib diikuti agar React mengenalinya sebagai komponen, bukan elemen HTML biasa. Sekarang coba ubah teks di dalam Greeting dan lihat perubahannya muncul seketika di browser berkat hot-reload.

Props: Mengirim Data antar Komponen

Komponen akan sangat membosankan jika selalu menampilkan hal yang sama. Di sinilah props (singkatan dari properties) berperan: props adalah cara mengirim data dari komponen induk ke komponen anak. Kita ubah Greeting agar menerima props:

javascript
function Greeting({ name }) {
  return <h1>Halo, {name}! 👋</h1>;
}

export default function App() {
  return (
    <div>
      <Greeting name="Budi" />
      <Greeting name="Sari" />
      <Greeting name="Andi" />
    </div>
  );
}

Kita membungkus ekspresi JavaScript dengan kurung kurawal {name} di dalam JSX. Sekarang satu komponen Greeting bisa dipakai berulang dengan data berbeda — inilah kekuatan utama dari komponen yang dapat dipakai ulang.

State dan Hook useState

Props hanya bisa mengalir dari induk ke anak, dan bersifat read-only. Untuk data yang bisa berubah (seperti input pengguna atau jumlah klik), React menyediakan state. Kita mengelola state dengan hook useState. Buat komponen penghitung sederhana:

javascript
import { useState } from "react";

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

  return (
    <div>
      <p>Kamu sudah klik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

Tips: Jangan pernah mengubah state secara langsung (misalnya count = count + 1). Selalu gunakan fungsi setter seperti setCount agar React tahu bahwa tampilan perlu diperbarui. React juga memperlakukan state sebagai data yang tidak boleh diubah (immutable), jadi selalu buat nilai baru saat memperbarui.

useEffect dan Mengambil Data dari API

Hampir semua aplikasi nyata mengambil data dari server, misalnya melalui REST API. Di React, pekerjaan sampingan seperti mengambil data dilakukan di dalam hook useEffect. Jika kamu belum familiar dengan konsep REST API, baca dulu Apa Itu REST API dan Bagaimana Cara Kerjanya?. Berikut contoh komponen yang memuat daftar pengguna dari API publik:

javascript
import { useEffect, useState } from "react";

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      });
  }, []); // array kosong = hanya dijalankan sekali

  if (loading) return <p>Memuat data...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Array kosong [] di akhir useEffect artinya efek hanya dijalankan sekali saat komponen pertama kali dirender. Tanpa array itu, efek akan berjalan setiap kali komponen dirender ulang dan bisa menyebabkan pengambilan data berulang tanpa henti.

Membangun Aplikasi Todo Sederhana

Sekarang mari gabungkan semua konsep di atas menjadi satu aplikasi yang benar-benar berfungsi: daftar tugas (todo). Aplikasi ini punya input teks, tombol tambah, dan tombol hapus — memanfaatkan state, props, dan event handling. Ganti isi src/App.jsx dengan kode berikut:

javascript
import { useState } from "react";

function TodoItem({ todo, onDelete }) {
  return (
    <li>
      {todo.text}
      <button onClick={() => onDelete(todo.id)}>Hapus</button>
    </li>
  );
}

export default function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  function addTodo() {
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput("");
  }

  function deleteTodo(id) {
    setTodos(todos.filter((todo) => todo.id !== id));
  }

  return (
    <div>
      <h2>Daftar Tugas</h2>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Tulis tugas baru..."
      />
      <button onClick={addTodo}>Tambah</button>
      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} todo={todo} onDelete={deleteTodo} />
        ))}
      </ul>
    </div>
  );
}

Simpan file dan coba aplikasinya di browser: ketik tugas, klik Tambah, dan lihat daftarnya bertambah. Tombol Hapus memanfaatkan props onDelete untuk memberi tahu komponen induk agar menghapus item tertentu — pola lifting state yang umum dipakai di React.

Kesimpulan dan Langkah Selanjutnya

Selamat! Kamu sudah mempelajari tiga konsep inti React: komponen untuk memecah UI, props untuk mengirim data, dan state untuk mengelola data yang berubah — plus useEffect untuk mengambil data dari API. Dari sini, kamu bisa melanjutkan dengan mempelajari React Router untuk navigasi antar halaman, atau menghubungkan aplikasi React ke backend buatan sendiri, misalnya menggunakan Cara Membuat REST API dengan FastAPI. Selamat berkoding!