Belajar ReactJS - Architecture & Design Patterns

#Pendahuluan

Ketika proyek tumbuh, struktur folder dan pola komponen menentukan apakah tim kalian bergerak cepat atau tersendat. Episode 18 membahas arsitektur yang membuat React scalable: bagaimana memecah UI, mengorganisasi folder, dan memilih pola komposisi yang tepat.

Kita mulai dari component-driven architecture dengan atomic design, lalu feature modules dan struktur folder, kemudian composition patterns dengan render props, dan diakhiri design system untuk konsistensi di seluruh aplikasi.

#Component-Driven Architecture dan Atomic Design

#Lima Level Atomic Design

Atomic design memecah UI menjadi lima level, dari terkecil ke terbesar:

atom -> molekul -> organisme -> template -> halaman

• Atom: tombol, label, input, ikon — elemen dasar tak bisa dipecah lagi.
• Molekul: kombinasi atom, misalnya field berisi label dan input.
• Organisme: kumpulan molekul, misalnya header pencarian.
• Template: susunan organisme tanpa data nyata.
• Halaman: template dengan data nyata.

Kekuatan pendekatan ini: setiap level bisa diuji dan dipakai ulang, dan perubahan di level bawah otomatis menyebar ke atas.

#Component-Driven Development

Mulai dari komponen terkecil lalu naik level. Buat komponen di bawah dulu dengan mock data, pastikan mereka bekerja, baru susun menjadi halaman. Ini mempersingkat debugging karena kalian tahu persis di level mana masalah berada.

#Feature Modules, File Organization, dan Folder Structure

#Struktur Folder yang Scalable

Dua pendekatan umum: folder by type dan folder by feature. Untuk proyek yang bertumbuh, folder by feature jauh lebih scalable:

src/
├── features/
│   ├── auth/
│   │   ├── AuthPage.jsx
│   │   ├── LoginForm.jsx
│   │   └── authApi.js
│   └── produk/
│       ├── DaftarProduk.jsx
│       ├── KartuProduk.jsx
│       └── produkApi.js
├── components/
│   ├── ui/        # komponen shared (atom)
│   └── layout/    # header, footer, sidebar
├── hooks/
└── utils/

features/auth/ mengelompokkan semua yang berhubungan dengan autentikasi — halaman, komponen, dan API-nya. Fitur yang tidak terpakai mudah dihapus, dan tim bisa bekerja paralel tanpa konflik.

#Batas yang Jelas antar Feature

Satu aturan penting: fitur tidak boleh saling mengimpor komponen internal. Jika dua fitur butuh hal yang sama, naikkan ke components/ui atau hooks. Ini menjaga dependensi mengalir satu arah dan memudahkan pengujian.

#Composition Patterns dan Render Props

#Render Props untuk Komponen Fleksibel

Render props adalah pola di mana komponen menerima fungsi yang mengembalikan JSX, memberi kontrol penuh kepada pemakainya:

Render props untuk mouse position

function MouseTracker({ render }) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 })
 
  return (
    <div
      onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}
    >
      {render(pos)}
    </div>
  )
}
 
function App() {
  return (
    <MouseTracker
      render={({ x, y }) => <p>Posisi: {x}, {y}</p>}
    />
  )
}

render={({ x, y }) => <p>Posisi: {x}, {y}</p>} memutuskan bagaimana posisi mouse ditampilkan. Komponen MouseTracker hanya bertanggung jawab melacak posisi; pemakainya yang memilih tampilan.

#Composition Sebagai Pola Utama

React modern lebih sering memakai composition biasa (props dan children) daripada render props. Pola render props tetap berguna saat kalian butuh membagikan perilaku, bukan hanya tampilan — dan banyak library memakainya di balik layar.

#Compound Components

Pola maju lain: compound components — komponen induk dan anak yang bekerja sebagai satu kesatuan. Contoh <Select> dengan <Select.Option>, seperti yang dipakai komponen aksesibel ARIA dari episode 17. Anak-anak berkomunikasi dengan induk lewat context.

#Design Systems dan Reusable UI Components

#Dari Komponen ke Design System

Design system adalah kumpulan komponen, aturan, dan token yang menjaga konsistensi. Fondasinya adalah design tokens: nilai dasar seperti warna dan spasi:

Design tokens

export const tokens = {
  warna: {
    primer: "#2563eb",
    teks: "#0f172a",
    latar: "#f8fafc",
  },
  spasi: {
    xs: "4px",
    md: "16px",
    lg: "24px",
  },
}

tokens.warna.primer dipakai di semua komponen alih-alih nilai hex acak. Ubah satu nilai token, seluruh aplikasi berubah — konsistensi dijaga dari satu sumber.

#Membangun Library Komponen

Kumpulkan komponen ui/ menjadi library yang didokumentasikan. Ceritakan di setiap komponen: props yang diterima, contoh pemakaian, dan kondisi edge case. Library yang baik mempercepat pengembangan karena tim tidak menulis ulang tombol yang sama.

npm install -D @storybook/react-vite

npm install -D @storybook/react-vite memasang Storybook, tool yang menampilkan tiap komponen dengan mock state-nya. Storybook menjadikan design system kalian mudah dilihat, diuji, dan dikembangkan.

#Penutup

Episode 18 menata arsitektur React: component-driven architecture dengan atomic design, feature modules dan struktur folder yang scalable, composition patterns dengan render props, serta design system untuk konsistensi seluruh aplikasi.

Inti yang harus dibawa pulang:

• Atomic design memecah UI: atom, molekul, organisme, template, halaman.
• Folder by feature lebih scalable untuk proyek yang bertumbuh.
• Fitur tidak boleh saling mengimpor komponen internal.
• Render props membagikan perilaku; composition membagikan tampilan.
• Design tokens menjaga konsistensi warna dan spasi.
• Storybook mendokumentasikan dan menampilkan tiap komponen.

Di episode 19 selanjutnya kita akan membahas modern tooling & build automation — Vite sebagai bundler modern, ESLint dan Prettier untuk code quality, integrasi TypeScript ke React, serta optimasi build dan bundle production. Proyek kalian akan dibangun di atas fondasi yang kokoh.