OG

Belajar React dari Nol!

Panduan praktis memulai belajar React: dari konsep dasar hingga membuat komponen dinamis.

React adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna (UI) secara deklaratif dan efisien. React banyak digunakan dalam pengembangan web modern, termasuk untuk SPA (Single Page Application).


1. Apa Itu Komponen di React?

Komponen adalah blok bangunan utama dalam React. Setiap bagian UI bisa dipecah menjadi komponen: tombol, form, header, kartu, dll.

Contoh Komponen Fungsi:

function Welcome() {
  return <h1>Selamat datang di React!</h1>;
}

Komponen di atas hanya menampilkan teks. Untuk membuatnya lebih dinamis, kita bisa gunakan props.


2. Props: Mengirim Data ke Komponen

Props digunakan untuk mengoper data ke dalam komponen.

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

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

3. State: Menyimpan Nilai yang Bisa Berubah

State membuat komponen menjadi interaktif. Kita bisa menyimpan dan mengubah nilai menggunakan useState.

import { useState } from "react";

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

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

4. Event Handling

React menggunakan penulisan camelCase untuk event seperti onClick, onChange, dll.

<button onClick={() => alert("Tombol diklik!")}>Klik Aku</button>

5. Struktur Folder Proyek React (via Vite)

Setelah buat proyek dengan Vite, biasanya struktur awalnya begini:

my-app/
├── public/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── components/
├── index.html
├── package.json

6. Next Step: Belajar React Router & API Fetching

Setelah paham komponen, props, dan state, kamu bisa lanjut ke:

  • React Router: untuk multi-halaman SPA
  • fetch()/axios: untuk mengambil data dari API
  • useEffect: untuk efek samping seperti pemanggilan API saat halaman load

Contoh sederhana ambil data dari API:

import { useEffect, useState } from "react";

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.slice(0, 5).map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Penutup

React memang butuh waktu untuk dipahami dengan baik, tapi sangat powerful. Kuasai dasarnya, lalu kamu bisa eksplorasi Next.js, Tailwind, atau bahkan SSR dan React Native.

• Juni 2025

← Kembali