Penjelasan Struktur Folder React JS Secara Rinci

React JS adalah library JavaScript populer untuk membangun antarmuka pengguna (UI). React memiliki struktur folder standar yang dapat disesuaikan berdasarkan kebutuhan proyek. Artikel ini menjelaskan struktur folder React JS secara rinci beserta fungsinya.

1. Struktur Folder Dasar React JS

Setelah membuat proyek React menggunakan create-react-app, Anda akan melihat struktur folder seperti berikut:

my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── index.js
│   ├── App.css
│   ├── index.css
│   └── logo.svg
├── .gitignore
├── package.json
└── README.md

2. Penjelasan Tiap Folder dan File

2.1 Folder node_modules

Folder ini berisi semua library dan dependensi yang diinstal menggunakan npm atau yarn. Folder ini di-generate otomatis setelah menjalankan npm install.

2.2 Folder public

Folder ini menyimpan file statis seperti HTML utama, gambar, atau ikon yang akan digunakan dalam proyek React. File utama di folder ini adalah:

• index.html: File HTML utama yang berisi elemen root tempat React di-mount.
• manifest.json: File konfigurasi untuk Progressive Web App (PWA).
• favicon.ico: Ikon kecil yang muncul di tab browser.

2.3 Folder src

Folder src adalah folder inti dari proyek React. Di sinilah semua komponen, style, dan logika aplikasi Anda ditempatkan. Struktur dasar dalam folder src adalah sebagai berikut:

src/
├── components/
│   ├── Header.js
│   ├── Footer.js
│   └── Button.js
├── hooks/
│   └── useFetchData.js
├── views/
│   ├── Home.js
│   ├── About.js
│   └── Contact.js
├── assets/
│   ├── images/
│   │   └── logo.png
│   └── styles/
│       ├── App.css
│       └── custom.css
├── App.js
├── index.js
└── serviceWorker.js

Penjelasan Subfolder:

• components/: Folder untuk menyimpan komponen UI reusable, seperti tombol, navigasi, atau kartu (card).
• hooks/: Folder untuk custom hooks, seperti useFetchData untuk mengambil data API.
• views/: Folder untuk halaman utama aplikasi, seperti Home, About, atau Contact.
• assets/: Folder untuk menyimpan gambar, ikon, video, atau file CSS kustom.
• App.js: Komponen utama yang menggabungkan semua komponen dan halaman.
• index.js: File root untuk merender App.js ke dalam elemen root di index.html.
• serviceWorker.js: File opsional untuk mendukung aplikasi sebagai Progressive Web App (PWA).

2.4 File package.json

File ini berisi informasi proyek, dependensi, dan skrip yang digunakan. Contoh file package.json:

{
  "name": "my-react-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

2.5 File .gitignore

File ini digunakan untuk mengabaikan file atau folder tertentu saat menggunakan Git, seperti node_modules atau file build.

3. Best Practice dalam Struktur Folder React

Untuk proyek yang lebih besar, Anda dapat menggunakan struktur folder modular seperti ini:

src/
├── components/     # Komponen UI reusable
├── pages/          # Halaman utama aplikasi
├── hooks/          # Custom hooks
├── contexts/       # React Context API
├── services/       # Logika API atau helper
├── routes/         # Routing aplikasi
├── assets/         # Gambar, video, dan style
└── utils/          # Fungsi atau helper kustom

4. Kesimpulan

Struktur folder React yang baik membantu menjaga proyek tetap rapi, mudah dikelola, dan scalable. Untuk proyek kecil, struktur bawaan create-react-app sudah mencukupi. Namun, untuk proyek besar, modularisasi folder seperti components, hooks, dan views sangat disarankan.