Arsitektur Aplikasi React.

React sendiri tidak memaksakan struktur folder tertentu, sehingga banyak tim pemula bingung menata proyek begitu jumlah komponennya mulai banyak. Berikut pola-pola yang umum dipakai dan pertimbangan di baliknya.

Struktur Berbasis Tipe File (Pola Lama)

src/
  components/
    TombolPrimer.jsx
    KartuProduk.jsx
    FormLogin.jsx
  hooks/
    useAuth.js
    useCart.js
  pages/
    Beranda.jsx
    Produk.jsx

Pola ini mudah dipahami di awal, tapi begitu proyek membesar, file yang saling berhubungan justru tersebar di banyak folder berbeda — mengedit satu fitur berarti berpindah bolak-balik antar folder.

Struktur Berbasis Fitur (Pola yang Lebih Disarankan)

src/
  features/
    autentikasi/
      FormLogin.jsx
      useAuth.js
      authSlice.js
    produk/
      KartuProduk.jsx
      DaftarProduk.jsx
      useProduk.js
  components/
    TombolPrimer.jsx
    Modal.jsx

Folder features/ mengelompokkan semua file yang berkaitan dengan satu domain bisnis tertentu, sementara components/ khusus untuk komponen generik yang dipakai lintas fitur. Pendekatan ini membuat satu fitur bisa dipahami, diubah, bahkan dihapus tanpa perlu menyentuh banyak folder lain.

Memisahkan Logika dari Tampilan

// useProduk.js — logika data
export function useProduk() {
  const [produk, setProduk] = useState([]);

  useEffect(() => {
    fetch("/api/produk").then((r) => r.json()).then(setProduk);
  }, []);

  return produk;
}

// DaftarProduk.jsx — tampilan
function DaftarProduk() {
  const produk = useProduk();
  return (
    <ul>
      {produk.map((p) => <li key={p.id}>{p.nama}</li>)}
    </ul>
  );
}

Memisahkan custom hook (logika) dari komponen (tampilan) membuat keduanya lebih mudah diuji dan dipakai ulang secara terpisah.

Barrel File untuk Import Lebih Ringkas

// features/produk/index.js
export { default as DaftarProduk } from "./DaftarProduk";
export { useProduk } from "./useProduk";

import { DaftarProduk, useProduk } from "@/features/produk";

Barrel file (index.js) menyembunyikan struktur internal folder, sehingga bagian lain aplikasi cukup mengimpor dari satu titik tanpa tahu detail file di dalamnya.

Layer Terpisah untuk Panggilan API

src/
  api/
    produkApi.js
    authApi.js

// api/produkApi.js
export async function ambilProduk() {
  const res = await fetch("/api/produk");
  return res.json();
}

Menaruh semua panggilan fetch di satu layer terpisah memudahkan penggantian sumber data di kemudian hari — misalnya beralih dari REST ke GraphQL — tanpa perlu mengubah komponen yang memakainya.

Kesimpulan

Struktur berbasis fitur umumnya lebih tahan lama dibanding pengelompokan berdasarkan tipe file, karena mengikuti bagaimana tim sebenarnya bekerja: satu fitur, satu folder. Tidak ada struktur yang benar secara mutlak — yang terpenting adalah konsistensi dan kemudahan tim menemukan file yang mereka cari saat proyek terus bertumbuh.