Membangun aplikasi dengan React sering kali terasa menantang, bukan hanya karena sintaks JavaScript atau konsep seperti state dan props, tetapi juga karena… folder yang terlihat “berantakan”. Banyak pemula kebingungan: file sebaiknya diletakkan di mana? Apa bedanya components, pages, dan assets? Apakah perlu folder hooks sendiri? Dan mengapa ada begitu banyak struktur berbeda di setiap tutorial?
Artikel ini akan mengajak Anda mengenal struktur folder project React secara perlahan, dari yang paling sederhana hingga pola yang lebih rapi dan terorganisir. Tujuannya bukan untuk memberi “aturan saklek”, tetapi memberikan panduan dasar agar Anda mengerti fungsi tiap folder dan bisa menyusun proyek sendiri dengan lebih terarah. Dengan memahami struktur folder, Anda akan lebih mudah membaca kode, berkolaborasi dengan tim, dan mengembangkan aplikasi yang skalanya terus membesar tanpa mudah kacau.
Mari mulai dari awal: membongkar satu per satu isi project React dan melihat “siapa tinggal di folder mana” serta alasannya.
Memahami Anatomi Folder React Mulai dari src hingga public
Pada dasarnya, dua “panggung utama” di project React adalah folder src dan public. Folder src berisi semua “otak” aplikasi: komponen, style, hingga fungsi helper. Di sinilah kamu akan sering berkutat. File seperti index.js (atau main.jsx tergantung tooling) akan menjadi pintu masuk JavaScript yang menempel ke elemen HTML di public. Sementara itu, folder public menyimpan aset statis yang akan dihidangkan apa adanya ke browser: index.html, ikon, gambar, dan file statis lain. Cara gampang membayangkannya: public adalah panggung kosong (HTML) dan src adalah seluruh kru dan aktor yang bikin panggung itu hidup.
src/– tempat komponen, style, dan logika aplikasi.public/– tempat file statis dan template HTML utama.index.html– “rumah” untuk aplikasi React kamu.index.js– file yang menempelkan React ke elemen root di HTML.
| Folder | Peran Utama | Contoh Isi |
|---|---|---|
src |
Logika & UI dinamis | App.js, components/ |
public |
Template & aset statis | index.html, favicon.ico |
Supaya lebih kebayang alurnya, lihat contoh sederhana struktur folder berikut:
“`bash
my-react-app/
public/
index.html
favicon.ico
src/
index.js
App.js
package.json
“`
Membedah Komponen Penting di Dalam src dan Cara Menatanya dengan Rapi
Folder src ini ibarat dapur utama React kamu: semua logika, tampilan, dan alur aplikasi berpusat di sini. Supaya nggak cepat berantakan, biasakan memisahkan file berdasarkan fungsinya. Misalnya, kamu bisa punya folder khusus untuk komponen antarmuka, satu folder untuk fungsi-fungsi pendukung, dan satu lagi untuk aset seperti gambar atau ikon. Struktur dasar yang cukup enak dipakai pemula biasanya meliputi:
- components/ – Kumpulan komponen UI yang bisa dipakai ulang.
- pages/ – Halaman utama, misalnya Home, About, Dashboard.
- hooks/ – Custom hook, kalau nanti butuh logika yang dipakai di banyak tempat.
- utils/ – Fungsi helper seperti format tanggal, angka, dan sebagainya.
- assets/ – Gambar, ikon, font, atau file statis lain.
| Folder | Isi Singkat | Tips Penataan |
|---|---|---|
| components/ | Button, Card, Modal | Kelompokkan per fitur |
| pages/ | Home, Login, Profile | Satu file = satu halaman |
| hooks/ | useAuth, useFetch | Nama diawali use |
| utils/ | formatDate, toCurrency | Fungsi murni, tanpa UI |
Semakin besar project, semakin penting membagi src jadi “zona-zona” kecil yang jelas. Banyak developer juga suka bikin struktur berbasis fitur, misalnya folder features/ yang di dalamnya ada sub-folder auth, dashboard, atau products, masing-masing berisi components, hooks, dan services sendiri. Pendekatan ini bikin kode lebih gampang dicari karena kamu cukup “ikut alur fitur”, bukan lagi menyisir satu folder raksasa. Contoh struktur sederhananya bisa seperti ini:
“`bash
src/
features/
auth/
components/
hooks/
services/
dashboard/
components/
shared/
components/
hooks/
utils/
“`
Strategi Penamaan dan Struktur Folder yang Scalable untuk Proyek React Pemula
Bayangkan kamu lagi bangun rumah: kalau dari awal nama ruangan dan tata letaknya jelas, nanti nambah lantai pun nggak bikin pusing. Di React juga begitu. Mulai dengan pola simpel seperti memisahkan antara komponen, halaman, dan utilitas, lalu konsisten. Misalnya, semua komponen UI kecil kamu simpan di components/, sedangkan halaman yang berhubungan dengan routing di pages/. Untuk nama file, coba biasakan pakai PascalCase untuk komponen React (misalnya Navbar.jsx) dan camelCase untuk helper fungsi. Hindari nama generik seperti test.js atau data1.js; ganti dengan yang lebih bermakna seperti formatCurrency.js atau useAuth.js, supaya ke depan kamu nggak kebingungan sendiri.
- Gunakan folder berdasarkan peran (misalnya
components,pages,hooks,services). - Satukan hal yang saling berhubungan, misalnya setiap komponen kompleks punya mini-folder sendiri.
- Nama folder jamak, nama file spesifik, contohnya
hooks/useFetch.js, bukanhook/fetch.js. - Jaga struktur tetap dangkal di awal, lalu dipecah saat mulai terasa sesak.
| Folder / File | Fungsi | Contoh Nama |
|---|---|---|
src/components/ |
Komponen UI reusable | ButtonPrimary.jsx |
src/pages/ |
Halaman untuk routing | HomePage.jsx |
src/hooks/ |
Custom hooks | useToggle.js |
src/services/ |
API & logic backend | apiClient.js |
Kalau proyek mulai membesar, kamu bisa pakai pendekatan berbasis fitur, bukan lagi murni berdasarkan tipe file. Artinya, setiap fitur punya “rumah” sendiri yang isinya campuran komponen, hooks, dan logic yang cuma relevan untuk fitur itu. Ini bikin struktur terasa lebih alami saat tim atau kode berkembang, karena kamu tinggal buka satu folder dan semua bagian penting ada di sana. Kurang lebih kayak satu map khusus untuk setiap topik, bukan satu lemari besar isi campur aduk.
- Kelompokkan per fitur, misalnya
src/features/auth/,src/features/todos/. - Di dalam fitur, taruh file turunan yang relevan:
components,hooks, danserviceskhusus fitur itu. - Hindari nesting terlalu dalam supaya path file tetap mudah dibaca.
- Konsisten dari awal: begitu pola dipilih, pakai terus, jangan gonta-ganti di tengah jalan.
| Struktur Fitur | Keterangan Singkat |
|---|---|
src/features/auth/components/LoginForm.jsx |
Komponen form login khusus fitur auth |
src/features/auth/hooks/useAuth.js |
Logic state & status login |
src/features/auth/services/authApi.js |
Request API login / register |
Rekomendasi Praktis Menyusun Folder Berdasarkan Fitur agar Mudah Dimaintain
Daripada memisahkan file berdasarkan tipe (komponen di satu folder, hooks di folder lain, dan seterusnya), coba tata berdasarkan fitur yang benar-benar ada di aplikasi kamu. Misalnya, kamu bisa punya folder auth, dashboard, atau products. Di dalam masing-masing folder fitur itu, taruh semua hal yang berkaitan dengan fitur tersebut: komponen, hook, style, sampai test-nya. Pendekatan ini bikin kamu lebih mudah “menyentuh” satu fitur tanpa harus keliling ke banyak folder. Kurang lebih strukturnya bisa seperti ini:
- src/features/auth/ – komponen login, register, hook useAuth, service auth
- src/features/products/ – daftar produk, detail produk, hook data produk
- src/features/dashboard/ – komponen ringkasan, grafik, dan layout khusus dashboard
- src/shared/ – komponen dan utilitas yang dipakai lintas fitur
| Pola Folder | Kapan Dipakai | Kelebihan Singkat |
|---|---|---|
| Per Fitur | Aplikasi tumbuh, banyak modul | Mudah maintain & refactor |
| Per Tipe File | Project kecil, belajar dasar | Struktur sangat sederhana |
| Hybrid | Skala menengah ke atas | Fleksibel, bisa diadaptasi |
Biar makin nyaman, kamu juga bisa pisahkan hal-hal yang benar-benar global ke dalam folder sendiri, lalu sisanya tetap fokus per fitur. Contohnya:
- src/components/ – komponen generik seperti
Button,Modal,Input - src/lib/ – helper, formatter, dan fungsi utilitas lain
- src/routes/ – konfigurasi routing yang menghubungkan semua fitur
Dengan pola ini, saat kamu butuh menghapus atau memindahkan satu fitur, kamu cukup utak-atik satu folder saja. Di jangka panjang, struktur seperti ini jauh lebih enak di-maintain, apalagi ketika tim dan kode mulai membesar.
To Wrap It Up
Pada akhirnya, memahami struktur folder di sebuah project React bukan sekadar urusan “menaruh file di tempat yang benar”, tetapi tentang membangun fondasi yang rapi agar aplikasi bisa tumbuh tanpa membuat Anda kewalahan sendiri.
Seiring waktu, Anda mungkin akan memodifikasi, menambah, atau bahkan mengubah total pola struktur yang digunakan. Itu hal yang wajar. Yang terpenting, Anda mengerti logika di baliknya: mana yang bertanggung jawab untuk komponen, mana untuk utilitas, mana untuk aset, dan bagaimana semuanya saling terhubung.
Jadikan struktur folder ini sebagai peta awal. Setelah terbiasa, Anda bisa mulai bereksperimen-memisahkan fitur per domain, mengorganisir ulang komponen, atau mengadopsi pola yang lebih kompleks sesuai kebutuhan project.
Untuk sekarang, cukup mulai dari dasar: buat struktur yang konsisten, beri nama yang jelas, dan biasakan diri mengikuti alur yang sudah Anda bangun. Dari sana, React tidak lagi terlihat rumit; ia hanya kumpulan folder dan file yang tertata, siap Anda bentuk menjadi aplikasi apa pun yang Anda bayangkan.
