Struktur Project React

Memahami Struktur Project React

Setelah membuat project dengan Vite, penting untuk memahami peran setiap file dan folder agar tidak bingung saat mulai mengembangkan aplikasi.

Folder src/ — Jantung Aplikasi

Semua kode React yang kamu tulis berada di dalam folder src/. Berikut konvensi yang umum digunakan:

• src/components/ — Komponen-komponen reusable (Button, Card, Modal, dll)
• src/pages/ — Komponen halaman utama (HomePage, AboutPage, dll)
• src/hooks/ — Custom React Hooks
• src/utils/ — Fungsi-fungsi helper
• src/assets/ — Gambar dan file statis lainnya

File Penting

• main.jsx — Titik masuk aplikasi. Di sinilah React "dipasang" ke elemen HTML.
• App.jsx — Komponen root yang membungkus seluruh aplikasi.
• index.html — Template HTML utama dengan <div id="root"> sebagai tempat React dirender.

Struktur folder yang rapi dari awal akan sangat membantu saat project berkembang menjadi lebih besar.