Belajar React dari Nol

React adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI). React banyak dipakai di web modern karena membuat UI lebih cepat, terstruktur, danmudah dikembangkan.

Kalau sebelumnya lo pernah ngoding pakai HTML, CSS, dan JavaScript biasa, React akan terasa seperti “level up” karena kita mulai membangun UI dari komponen.

Apa Itu Komponen?

Komponen adalah potongan kecil UI yang bisa digunakan ulang. Anggap saja seperti lego: satu halaman web tersusun dari banyak komponen kecil.

• Button
• Navbar
• Card
• Footer

Di React, hampir semua hal adalah komponen.

Contoh Komponen Sederhana

function Welcome() {
  return <h1>Hello React</h1>;
}

Komponen di atas adalah function component. React akan merender apa pun yang direturn sebagai UI.

Menggunakan Props (Mengirim Data)

Supaya komponen bisa lebih fleksibel, kita bisa mengirim data ke dalamnya menggunakan props.

function Greeting({ name }) {
  return <h2>Halo, {name}!</h2>;
}

// Pemakaian
<Greeting name="Gibran" />

Dengan props, satu komponen bisa dipakai berkali-kali dengan data yang berbeda.

State: Membuat Komponen Interaktif

Kalau props itu data dari luar, state adalah data yang disimpan di dalam komponen dan bisa berubah seiring waktu.

import { useState } from "react";

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

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

Di sini:

• count → nilai state
• setCount → fungsi untuk mengubah state
• UI otomatis update saat state berubah

Kenapa React Banyak Dipakai?

• Komponen reusable
• UI cepat dan responsif
• Ekosistem besar (Next.js, Tailwind, dll)
• Dipakai di banyak perusahaan besar

Apa Selanjutnya?

Setelah paham dasar React, lo bisa lanjut ke:

• Next.js → routing & SEO
• Tailwind CSS → styling modern
• Fetch API → ambil data dari backend

Penutup

React memang butuh waktu untuk dipahami, tapi begitu konsep dasarnya nyantol, semuanya terasa lebih masuk akal. Fokus di komponen, props, dan state — sisanya akan menyusul.

Di OG SPACE ini, gue bakal lanjut bahas React, Next.js, dan berbagai tooling modern lainnya secara bertahap. (Kalau sempet kepegang yak 😏😄)