Struktur File & Folder React Native
Javascript di kenal dengan bahasa yang fleksibel, tidak seperti bahas pemrograman lain, javascript tidak mempunyai aturan baku yang harus di patuhi oleh penulis kode. Seperti tidak mengenal naming convension, tipe data yang dinamis yang sering berubah (inilah yang mentriger kehadiran typescript), dan tidak mempunyai aturan baku tentang penamaan juga tata letak struktur file dan folder dan hal ini lebih sempit pada framework react.
“React doesn’t have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.” — File Structure React
Jadi intinya kembali kepada preferensi masing2 dan kesepakatan dalam tim, pendekatan seperti apa yang di gunakan untuk mengatur struktur file dan project pada react kita.
Akan tetapi ada beberapa saran atau cara yang sering di pakai sebagai referensi bagaimana membuat project dengan struktur file dan folder yang baik seperti, menggunakan teknik atomic, pengelompokan berdasarkan fitur atau module, pengelompokan berdasarkan tipe file, dan masih banyak lagi.
Ini adalah struktur default ketika kita pertama kali membuat project react native menggunakan command react-native init NamaProject.
Saya ingin share bagaimana struktur file dan folder yang biasa saya gunakan pada project react native beserta penjelasannya. Saya gunakan contoh react native disini, tetapi hal ini juga bisa saja di lakukan pada project react js, karena pada prinsipnya sama saja. Pendekatan struktur file dan folder yang saya gunakan mungkin bukan yang terbaik, atau cocok untuk di gunakan pada project yang di kerjaikan oleh orang lain, tetapi mudah2an bisa menjadi inspirasi untuk teman2 yang baru mempelajari react.
/src
Disinilah tempat kita menuliskan dan menyimpan kode yang kita buat. Selanjutnya saya akan membahas semua struktur yang ada di dalam folder ini.
/src/actions
Di gunakan untuk menyimpan action pemanggilan reducer yang di panggil melalui component dalam implementasi redux.
/src/assets
Tempat menyimpan file static seperti font dan gambar.
/src/commons
Sekumpulan file yang memiliki fungsi atau method yang sering di gunakan di banyak file, seperti filter tanggal, validation handling, error handling, dan lain2.
/src/components
Berisi component reusable yang di gunakan di banyak tempat.
/src/reducers
Tempat kita menyimpan global state pada redux. Saya biasa memisahkan module file berdasarkan fiturnya seperti pada di gambar.
/src/screens
Component entry point yang muncul pertama kali setelah navigasi di eksekusi.
/src/styles
Di dalam folder ini tempat menyimpan file yang berkaitan dengan base styling. Mengenai base styling pada react native, kita akan bahas di artikel selanjutnya.
stores.js
Entry point dari implementasi redux.
Bagi teman2 yang mempunyai pendekatan berbeda mengenai struktur file dan folder yang baik dan perlu di rekomendasikan, langsung kita diskusikan di kolom komentar ya… terimakasih… sukses selalu.
