React adalah library UI paling populer untuk web modern. Dibandingkan menggunakan `create-react-app` yang lambat dan sudah dianggap usang (deprecated), industri kini beralih menggunakan Vite sebagai bundler yang jauh lebih cepat berkat dukungan native ESM.

Prasyarat & Persiapan

Pastikan komputer Anda sudah terinstal Node.js versi LTS terbaru sebelum mengeksekusi inisialisasi project ini.

Inisialisasi Project React Vite

Jalankan perintah berikut di terminal Anda untuk membuat boilerplate React baru berbasis TypeScript:

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

Memahami Konsep State dengan useState Hook

State adalah memori internal komponen yang memungkinkan React mengingat data interaktif yang berubah seiring waktu (seperti input user, toggle menu, atau data counters).

Berikut adalah implementasi Counter menggunakan Hook useState di dalam file src/App.tsx:

import { useState } from 'react';

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

  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
      <h1 className="text-xl font-bold">Jumlah Klik: {count}</h1>
      <div className="flex gap-2">
        <button 
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
        >
          Tambah
        </button>
        <button 
          onClick={() => setCount(0)}
          className="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300"
        >
          Reset
        </button>
      </div>
    </div>
  );
}

Referensi Belajar Resmi

• Dokumentasi useState Hook Resmi React
• Panduan Memulai Vite Bundler