Struktur Folder Project React
1. Latar Belakang
Dalam pengembangan aplikasi web, React JS dikenal sebagai library yang unopinionated. Artinya, React tidak memaksakan aturan baku tentang bagaimana developer harus menyusun file dan direktori di dalam proyeknya. Kebebasan ini memang memberikan fleksibilitas, namun tanpa arsitektur dan kesepakatan yang jelas, proyek dapat dengan cepat berubah menjadi kumpulan kode yang sulit dibaca dan di-maintain.
Terutama ketika sedang membangun sistem yang cukup kompleks, seperti dashboard monitoring atau aplikasi yang membutuhkan banyak interaksi real-time dengan API dari backend yang memiliki struktur folder yang rapi sejak awal adalah sebuah keharusan. Struktur yang baik akan memudahkan proses debugging, mencegah duplikasi kode, dan memperlancar kolaborasi jika bekerja dalam sebuah tim pembagian tugas.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
- Node js (untuk runtime JS)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
Secara umum, ketika sebuah proyek React diinisiasi, fokus utama pengaturan arsitektur berada di dalam folder src/. Berikut adalah pembedahan materi dari struktur folder yang direkomendasikan:
A. Root Direktori dan File Konfigurasi Dasar
Di luar folder src/, terdapat fondasi proyek yang mengatur dependensi dan lingkungan aplikasi.
1. node_modules/: Tempat penyimpanan seluruh pustaka (library) pihak ketiga. Folder ini otomatis dibuat (dan sebaiknya tidak pernah diubah secara manual).
2. public/: Berisi aset statis yang tidak perlu diproses oleh build tool, seperti index.html, favicon.ico, atau ikon aplikasi.
3. .env: File untuk menyimpan variabel lingkungan (seperti URL endpoint API) agar tidak tertulis langsung (hardcoded) di dalam kode.
4. package.json: Jantung dari proyek yang mencatat versi dependensi dan script untuk menjalankan atau mem-build aplikasi.
B. Anatomi Folder Komponen dan Halaman
Ini adalah bagian visual dari aplikasi. Pemisahan yang jelas antara bagian yang dapat didaur ulang dan halaman utuh sangatlah penting.
1. src/components/: Berisi elemen UI yang bisa digunakan kembali (reusable) di berbagai tempat. Contohnya seperti tombol (Button.jsx), kartu (Card.jsx), atau navigasi (Navbar.jsx).
2. src/pages/ (atau src/views/): Berisi komponen utama yang merepresentasikan satu halaman penuh. Misalnya Dashboard.jsx, LoginPage.jsx, atau Profile.jsx. File di sini biasanya hanya merakit komponen-komponen kecil dari folder components.
C. Integrasi Layanan (API) dan Manajemen State
Ketika aplikasi perlu berkomunikasi dengan server dan mengelola aliran data, file-file ini harus diisolasi agar tidak mengotori komponen visual.
1. src/services/ (atau src/api/): Direktori khusus untuk mengelola permintaan HTTP (misalnya menggunakan Axios atau Fetch). Semua endpoint komunikasi ke sistem backend diletakkan di sini, sehingga jika ada perubahan struktur database atau rute server, perbaikan hanya dilakukan di satu tempat.
2. src/store/ (atau src/context/): Digunakan untuk menyimpan konfigurasi global state management (seperti Redux, Zustand, atau React Context API).
D. Utilitas, Hooks, dan Aset Internal
Folder pendukung untuk mempermudah logika dan mempercantik tampilan aplikasi.
1. src/hooks/: Tempat untuk menyimpan custom hooks (misalnya useAuth.jsx atau useFetch.jsx) guna memisahkan logika kompleks dari komponen visual.
2. src/utils/ (atau src/helpers/): Berisi fungsi-fungsi bantuan murni (pure functions) seperti format penulisan mata uang, perhitungan tanggal, atau validasi input.
3. src/assets/: Menyimpan aset yang akan diproses oleh build tool, seperti gambar spesifik (.png, .svg), font, atau file desain CSS/SCSS global.
4. Daftar Pustaka
Agussuratna. (2023). Tutorial ReactJS: Memahami struktur direktori project React. https://agussuratna.net/2023/08/tutorial-reactjs-memahami-struktur-direktori-project-react/ (agussuratna.net)
AK Studio. (2020). Tutorial belajar ReactJS: Membuat project React JS full library. https://www.akscoding.com/2020/11/Membuat-Project-React-js-full-library.html (AK Studio)
BuildWithAngga. (2025). Dasar-dasar React JS: Mengenal component sebagai pondasi utama. https://buildwithangga.com/tips/dasar-dasar-react-js-19-mengenal-component-sebagai-pondasi-utama (BuildWithAngga)
Programmer World. (2024). Penjelasan struktur folder React JS secara rinci. https://programmerworld.blog/2024/12/17/penjelasan-struktur-folder-react-js-secara-rinci/ (Programmer World)
0 Komentar