React Academy · Pelajaran

Struktur Folder dan Konvensi Penamaan

Atur proyek React dengan folder berbasis fitur dan nama file yang jelas.

Struktur Folder dan Konvensi Penamaan adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan menjelajahi struktur folder yang umum untuk proyek React, mempelajari konvensi penamaan berkas dan komponen, serta memahami cara menata kode seiring berkembangnya proyek.

Struktur Bawaan

Proyek Vite + React minimal memiliki `src/App.jsx` dan `src/main.jsx`. Ini cukup untuk demo kecil, tetapi tidak dapat berkembang. Saat menambahkan fitur, buat folder khusus agar kode yang berkaitan tetap bersama.

src/
  main.jsx
  App.jsx
  index.css

Struktur Berbasis Fitur

Kelompokkan file berdasarkan fitur, bukan berdasarkan jenisnya. Setiap folder fitur berisi komponen, gaya, pengujian, dan fungsi pembantunya. Dengan demikian, Anda dapat menambahkan atau menghapus seluruh fitur sekaligus dengan mudah.

src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Penamaan File Komponen

Beri nama file komponen dengan **PascalCase** yang sesuai dengan nama komponennya: `UserCard.jsx`, `NavigationBar.jsx`. Satu komponen per file merupakan standar. Penggunaan `.jsx` (atau `.tsx`) memberi tahu editor bahwa file tersebut berisi JSX.

Penamaan File Nonkomponen

Hook, utilitas, dan konstanta menggunakan **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. File pengujian mencerminkan sumbernya dengan `.test` atau `.spec`: `useAuth.test.js`.

File Indeks untuk Impor yang Rapi

Menambahkan `index.js` ke sebuah folder memungkinkan Anda mengimpor dari jalur folder, bukan dari jalur file lengkap. Pertahankan file indeks hanya sebagai ekspor ulang — tanpa logika.

// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Impor Absolut dengan Alias Jalur

Konfigurasikan alias `@/` yang menunjuk ke `src/` di `vite.config.js` dan `tsconfig.json`. Dengan demikian, Anda terhindar dari jalur relatif yang rapuh seperti `../../../../components/Button`.

// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Komponen Bersama vs Komponen Fitur

Tempatkan komponen yang hanya digunakan oleh satu fitur di dalam folder fitur tersebut. Pindahkan komponen ke `src/components/` hanya jika dua fitur atau lebih membutuhkannya. Hindari mengekstrak komponen terlalu dini.

File Konstanta & Konfigurasi

Simpan string khusus, URL dasar API, dan pembungkus variabel lingkungan di `src/lib/constants.js` atau `src/config.js`. Jangan pernah menyebarkan string `process.env.VITE_API_URL` ke banyak file.

// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Tipe & Antarmuka (TypeScript)

Dalam proyek TypeScript, letakkan tipe berdampingan dengan fitur atau komponen yang menggunakannya. Untuk tipe bersama yang digunakan di banyak fitur, buat `src/types/` dengan satu file untuk setiap area domain.

Pemeriksaan Singkat

Apa keunggulan utama struktur folder berbasis fitur dibandingkan struktur berbasis jenis?

Ringkasan

Gunakan folder berbasis fitur, PascalCase untuk file komponen, camelCase untuk hook dan utilitas, ekspor ulang melalui index.js untuk impor yang rapi, serta alias jalur seperti @/ untuk menghilangkan jalur relatif yang panjang.

Kursus Selesai

Selamat! Anda telah menyelesaikan **Mode Strict React & Praktik Terbaik**. Kini Anda memahami perilaku StrictMode, cara menulis fungsi render murni, penggunaan key dan ref yang benar, serta struktur folder yang dapat dikembangkan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Struktur Folder dan Konvensi Penamaan” gratis?

Ya — teks lengkap “Struktur Folder dan Konvensi Penamaan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Struktur Folder dan Konvensi Penamaan”?

Atur proyek React dengan folder berbasis fitur dan nama file yang jelas. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Struktur Folder dan Konvensi Penamaan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Fungsi StrictMode
Komponen Murni dan Menghindari Efek Samping saat Render
Praktik Terbaik Key dan Ref
Struktur Folder dan Konvensi Penamaan

← Kembali ke React Academy