React sangat fleksibel karena sepenuhnya tidak memiliki opini tentang bagaimana Anda mengatur dan menulis kode Anda. Namun, fleksibilitas ini membuat sulit untuk mengatur proyek React karena tidak ada standar yang ditetapkan oleh React. Dalam artikel ini, saya akan membahas 3 struktur folder yang berbeda yang dapat digunakan untuk berbagai proyek berbagai ukuran. Struktur ini akan diurutkan dari yang paling sederhana hingga yang paling kompleks, tetapi jangan langsung beralih ke struktur yang paling maju/kompleks karena tergantung pada ukuran proyek Anda, pendekatan yang lebih sederhana mungkin lebih baik.

Pendahuluan

Sebelum saya membahas berbagai struktur folder, saya ingin menyebutkan satu hal. Semua struktur folder ini hanya akan berurusan dengan file/folder di dalam folder src. Di luar folder src, file Anda akan sangat bergantung pada proyek Anda, sehingga tidak ada struktur universal yang baik untuk diterapkan karena akan sangat tergantung pada proyek Anda dan perpustakaan yang Anda gunakan.

Struktur Folder Sederhana

Ketika pertama kali menjalankan create-react-app, tidak ada folder di dalam folder src, dan bagi kebanyakan orang, dua folder pertama yang mereka buat adalah folder komponen dan folder hooks. Sekarang, tentu saja ini adalah struktur folder yang sangat sederhana, tetapi untuk proyek-proyek kecil dengan kurang dari 10-15 komponen, ini sebenarnya pendekatan yang tidak buruk.

hooks

Folder hooks berisi setiap hook kustom dalam seluruh proyek Anda. Ini adalah folder yang berguna untuk dimiliki dalam proyek apa pun, karena hampir setiap proyek akan memiliki beberapa hook kustom, sehingga memiliki tempat tunggal untuk menempatkannya sangatlah berguna.

components

Folder components dalam struktur folder sederhana ini sangatlah langsung, karena akan berisi setiap komponen dalam seluruh aplikasi Anda. Tentu saja, seiring dengan berkembangnya proyek Anda melebihi 10-15 komponen, folder ini dapat menjadi sangat sulit dikelola, itulah mengapa dalam semua struktur folder lainnya, komponen-komponen kami tersebar di beberapa folder dan diberikan struktur lebih lanjut. Namun, untuk proyek-proyek kecil, kompleksitas tambahan ini tidak diperlukan dan satu folder sudah cukup.

tests

Folder terakhir dalam struktur ini adalah untuk semua kode pengujian Anda. Umumnya, dalam proyek-proyek kecil seperti ini, saya menemukan bahwa orang cenderung menyimpan semua pengujian mereka di satu folder (itu pun jika mereka menulis pengujian). Secara keseluruhan, saya pikir ini cukup baik untuk proyek-proyek kecil, tetapi lagi-lagi, ini adalah sesuatu yang akan saya ubah seiring dengan pertumbuhan proyek Anda.

Kelebihan

Seperti yang disebutkan, keuntungan terbesar dari struktur folder ini adalah kesederhanaannya, tetapi di luar itu, struktur ini sebenarnya tidak banyak memberikan manfaat.

Kekurangan

Anda akan melihat bahwa struktur folder ini tidak mengindikasikan bagaimana menangani hal-hal seperti gambar, fungsi utilitas, konteks React, dll. Ini karena sebagian besar proyek kecil tidak memiliki banyak dari file-file bonus ini, sehingga Anda dapat menyimpan semua file tersebut di root folder src Anda. Tentu saja, seiring dengan berkembangnya proyek Anda, ini akan menjadi berantakan dengan cepat, itulah mengapa setiap proyek yang lebih dari sekadar proyek kecil sebaiknya menggunakan setidaknya struktur folder yang lebih menengah.

Struktur Folder Menengah

Sudah dari gambar di atas, Anda akan memperhatikan bahwa struktur folder ini mencakup banyak folder yang mencakup hampir semua jenis file yang bisa Anda pikirkan dalam proyek React. Sebagian besar dari struktur folder seperti ini seharusnya hampir tidak ada file di akar folder src Anda selain hal-hal seperti file index.js Anda.

Perubahan besar lainnya antara struktur folder ini dan struktur folder sederhana adalah kita sekarang memecah proyek kita menjadi halaman-halaman yang mengelompokkan semua logika untuk halaman-halaman tertentu menjadi satu lokasi tunggal. Ini sangat berguna pada proyek-proyek yang lebih besar karena sekarang Anda dapat menemukan semua informasi terkait halaman Anda di satu folder daripada harus mencari di beberapa folder dan menyaring file-file yang tidak terkait untuk menemukan yang Anda inginkan.

Anda juga akan melihat bahwa pengujian kami sekarang terlokalisasi pada folder/file spesifik yang sedang diuji. Ini membuat lebih mudah untuk melihat kode mana yang diuji, yang pada umumnya membuat pengujian kode lebih mudah ketika pengujian berada di lokasi yang sama dengan kode yang diuji.

halaman

Perubahan terbesar pada struktur folder ini adalah penambahan folder halaman. Folder ini harus berisi satu folder untuk setiap halaman dalam aplikasi Anda. Di dalam folder khusus halaman tersebut harus ada satu file utama yang merupakan halaman Anda (umumnya index.js) bersama dengan semua file yang hanya berlaku untuk halaman tersebut. Sebagai contoh, dalam gambar di atas, kita memiliki halaman Login yang berisi file utama index.js, komponen bernama LoginForm, dan hook kustom bernama useLogin. Komponen dan hook ini hanya digunakan dalam halaman Login sehingga mereka disimpan bersama halaman ini daripada disimpan di dalam folder hooks atau components global.

Pemisahan kode khusus halaman dari kode global yang lebih umum adalah manfaat terbesar dari sistem ini dibandingkan dengan struktur folder sederhana. Lebih mudah untuk melihat apa yang dilakukan aplikasi Anda ketika semua kode relevan disatukan dalam satu folder.

komponen

Perubahan besar lainnya yang akan Anda perhatikan dalam contoh ini adalah bahwa folder komponen kami dibagi lebih lanjut menjadi subfolder. Subfolder ini sangat berguna karena membantu menjaga komponen Anda terorganisir menjadi bagian-bagian yang berbeda daripada hanya menjadi satu gumpalan besar komponen. Dalam contoh kami, kami memiliki folder ui yang berisi semua komponen UI seperti tombol, modals, kartu, dll. Kami juga memiliki folder form untuk kontrol yang khusus untuk formulir seperti checkbox, input, pemilih tanggal, dll.

Anda dapat menyesuaikan dan memecah folder komponen ini sesuai dengan kebutuhan proyek Anda, tetapi idealnya folder ini tidak boleh terlalu besar karena banyak komponen yang lebih kompleks akan disimpan di dalam folder halaman.

hooks

Folder terakhir yang merupakan pengulangan dari struktur folder sederhana adalah folder hooks. Folder ini hampir identik dengan folder hooks sebelumnya, tetapi alih-alih menyimpan setiap hook dalam aplikasi Anda, folder ini hanya akan menyimpan hook global yang digunakan di beberapa halaman. Hal ini karena semua hook khusus halaman disimpan di dalam folder halaman.

asets

Folder asets berisi semua gambar, file css, file font, dll. untuk proyek Anda. Hampir semua hal yang tidak berhubungan dengan kode akan disimpan di folder ini.

konteks

Folder konteks menyimpan semua file konteks React Anda yang digunakan di beberapa halaman. Saya menemukan dalam proyek-proyek yang lebih besar Anda akan memiliki beberapa konteks yang digunakan di seluruh aplikasi Anda dan memiliki satu folder untuk menyimpannya sangatlah berguna. Jika Anda menggunakan penyimpanan data global yang berbeda seperti Redux, Anda dapat menggantikan folder ini dengan kumpulan folder yang lebih sesuai untuk menyimpan file Redux.

data

Folder data mirip dengan folder asets, tetapi ini untuk menyimpan aset data seperti file JSON yang berisi informasi yang digunakan dalam kode Anda (item toko, informasi tema, dll). Folder ini juga dapat menyimpan file yang berisi variabel konstan global. Ini berguna ketika Anda memiliki banyak konstan yang digunakan di seluruh aplikasi Anda, seperti variabel lingkungan.

utilitas

Folder terakhir yang baru adalah folder utilitas. Folder ini digunakan untuk menyimpan semua fungsi utilitas seperti pemformat. Ini adalah folder yang cukup langsung dan semua file di folder ini seharusnya juga langsung. Saya biasanya suka hanya menyimpan fungsi murni di folder ini, karena jika fungsi utilitas memiliki efek samping, maka kemungkinan besar itu bukan hanya fungsi utilitas sederhana. Tentu saja ada pengecualian untuk aturan ini. Juga, jika Anda tidak terbiasa dengan fungsi murni, lihat panduan fungsi murni lengkap saya.

Kelebihan

Manfaat terbesar dari sistem baru ini adalah bahwa semua file Anda memiliki folder mereka sendiri. Folder akar src seharusnya hampir tidak memiliki file sama sekali.

Manfaat besar lainnya adalah bahwa file-file Anda sekarang terletak berdasarkan halaman yang mereka gunakan. Ini baik karena umumnya, seiring dengan pertumbuhan proyek, semakin penting untuk memiliki file yang digunakan bersama disimpan bersama karena memudahkan memahami, menulis, dan membaca kode karena mengurangi jumlah kode global yang disimpan di folder komponen umum, hooks, dll.

Kekurangan

Kekurangan terbesar dari sistem ini adalah bahwa ketika aplikasi Anda tumbuh lebih besar, folder halaman Anda akan semakin kurang bermanfaat. Hal ini karena seiring dengan aplikasi Anda mendapatkan lebih banyak halaman, lebih umum bahwa satu fitur akan digunakan di beberapa halaman daripada hanya satu. Ketika ini terjadi, Anda perlu memindahkan kode dari folder halaman dan memindahkannya ke folder lain di aplikasi Anda yang mengurangi kegunaan folder halaman Anda dan mengisi folder lain Anda.

Sebagai contoh, jika Anda memiliki aplikasi daftar tugas sederhana yang menyimpan daftar tugas Anda hanya di satu halaman, maka folder halaman Anda untuk halaman daftar tugas dapat menyimpan semua kode untuk tugas Anda. Jika kemudian Anda menambahkan halaman kedua yang memungkinkan Anda mengelompokkan tugas berdasarkan proyek, maka Anda sekarang memiliki dua

Struktur Folder Lanjutan

Jika Anda hanya melihat sekilas pada kedua struktur folder ini, Anda mungkin akan memperhatikan banyak kesamaan, tetapi ada satu perbedaan utama, yaitu folder features. Folder features ini adalah cara yang lebih elegan untuk mengelompokkan kode yang serupa bersama-sama, dan yang paling penting adalah folder ini tidak mengalami masalah yang sama dengan folder halaman dari struktur folder menengah, karena fitur-fitur Anda hampir tidak akan memiliki tumpang tindih yang besar di antara mereka.

Karena begitu banyak folder dalam struktur ini adalah pengulangan dari struktur menengah, saya hanya akan membahas folder yang berubah antara kedua struktur ini.

features

Perubahan besar antara kedua struktur ini adalah folder features. Folder ini bekerja sangat mirip dengan folder halaman dari struktur menengah, tetapi alih-alih mengelompokkan berdasarkan halaman, kita mengelompokkan berdasarkan fitur. Sudah jelas ini lebih mudah dipahami sebagai pengembang karena dalam 90% kasus ketika Anda akan menambahkan kode baru ke proyek, Anda akan menambahkan fitur baru, seperti menambahkan akun pengguna, atau Anda akan memodifikasi fitur yang ada, seperti menambahkan kemampuan untuk mengedit tugas. Ini membuat bekerja dengan kode menjadi lebih mudah karena semua kode untuk setiap fitur berada di tempat yang sama sehingga mudah diperbarui dan ditambahkan.

Struktur sebenarnya dari folder ini mengikuti struktur halaman dalam arti bahwa ada folder individu untuk setiap fitur (autentikasi, tugas, proyek, dll.) dan di dalam folder-folder tersebut berisi semua file untuk fitur tersebut. Perbedaan terbesar yang akan Anda perhatikan antara folder halaman dan folder fitur adalah bahwa di setiap fitur Anda memiliki set lain dari folder. Struktur folder ini untuk setiap fitur adalah salinan lengkap dari semua folder di dalam folder src (kecuali folder fitur tentu saja) dan file index.js. Ini berarti bahwa di dalam fitur Anda, semua kode Anda dapat diorganisir berdasarkan jenis (konteks, hook, dll.) sambil tetap berada di satu tempat.

File index.js kemudian digunakan sebagai cara untuk mengungkapkan API publik untuk segala sesuatu yang dapat digunakan di luar folder fitur untuk fitur tertentu tersebut. Biasanya Anda akan ingin memiliki banyak kode yang bersifat pribadi untuk fitur tertentu yang sedang Anda kerjakan, tetapi dengan JS, jika Anda membuat ekspor dalam sebuah file, ekspor tersebut dapat digunakan di file lain yang Anda inginkan. Dalam proyek yang lebih besar, ini dapat menjadi masalah jika kita hanya ingin mengungkapkan beberapa komponen/metode untuk fitur kita, itulah fungsi file index.js. File ini harus mengekspor hanya kode yang Anda ingin dapat diakses di luar folder fitur, dan setiap kali Anda menggunakan kode untuk fitur ini dalam aplikasi Anda, Anda harus mengimpornya dari file index.js. Melakukan hal ini sangat bagus karena jejak kode global Anda jauh lebih kecil dengan cara ini dan penggunaan fitur menjadi lebih mudah karena Anda memiliki API terbatas untuk dikerjakan. Ini bahkan dapat ditegakkan oleh aturan ESLint yang melarang impor dari folder fitur yang tidak berasal dari index.js.

{
  "rules": {
    "no-restricted-imports": ["error", { "patterns": ["@/features/*/*"] }]
  }
}

Aturan impor ini menggunakan impor absolut (yang saya rekomendasikan digunakan pada proyek yang lebih besar). Anda dapat mengatur ini dengan menggunakan file .jsconfig atau .tsconfig dengan kode berikut.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@features/*": ["src/features/*"],
    }
  }
}

halaman

Perubahan utama lainnya dengan struktur baru ini adalah folder halaman. Folder ini sekarang hanya berisi satu file per halaman, dan alasan untuk ini adalah bahwa semua logika untuk fitur-fitur pada halaman-halaman berada di folder fitur. Ini berarti bahwa file-file di folder halaman sebenarnya cukup sederhana karena mereka hanya menyatukan beberapa komponen fitur dan beberapa komponen umum.

tata letak

Folder baru pertama adalah folder tata letak dan ini sangat sederhana. Ini hanyalah folder khusus untuk meletakkan komponen berbasis tata letak apa pun. Ini akan berupa hal-hal seperti sidebar, navbar, kontainer, dll. Jika aplikasi Anda hanya memiliki beberapa tata letak saja, maka folder ini sebenarnya tidak diperlukan, dan Anda bisa meletakkan komponen tata letak di dalam folder komponen, tetapi jika Anda memiliki beberapa tata letak yang berbeda yang digunakan di seluruh aplikasi Anda, ini adalah tempat yang bagus untuk menyimpannya.

lib

Folder lib adalah folder yang cukup sederhana. Folder ini berisi facade untuk berbagai macam pustaka yang Anda gunakan dalam proyek Anda. Misalnya, jika Anda menggunakan pustaka axios, maka folder ini akan berisi file untuk pustaka axios yang menciptakan API Anda sendiri di atas API axios yang kemudian Anda gunakan dalam aplikasi Anda. Ini berarti bahwa daripada mengimpor axios langsung ke proyek Anda, Anda akan mengimpor file dari folder ini yang terkait dengan axios.

Melakukan ini membuat lebih mudah untuk memperbarui dan mengganti pustaka, karena semua kode yang spesifik untuk pustaka berada di satu tempat dalam aplikasi Anda. Ini juga memudahkan untuk menyesuaikan pustaka pihak ketiga sesuai dengan kebutuhan Anda sendiri. Pola ini disebut Pola Fasad yang lebih lanjut dapat Anda pelajari dalam Panduan Pola Fasad Utama saya.

layanan

Folder baru terakhir adalah folder layanan. Folder ini berisi semua kode Anda untuk berinteraksi dengan setiap API eksternal. Umumnya, pada proyek-proyek yang lebih besar, Anda akan memiliki banyak API yang berbeda yang perlu Anda akses, dan folder ini adalah tempat untuk meletakkan kode yang berinteraksi dengan API tersebut. Sekali lagi, ini membantu membersihkan kode Anda karena daripada menyebar banyak kode interaksi API di aplikasi Anda, semuanya berada dalam satu folder ini.

Kelebihan

Keuntungan terbesar dari struktur ini adalah kemudahan dalam menambahkan/memperbarui kode. Karena sebagian besar kode dibagi menjadi berbagai fitur, mudah untuk menambahkan fitur baru atau memperbarui fitur yang sudah ada. Pemisahan ini juga menyederhanakan kode karena sekarang file-file dapat dianggap sebagai pribadi, yang membantu dalam memahami kode.

Manfaat lainnya adalah bahwa kode di luar folder fitur pada umumnya cukup sederhana untuk dipahami, karena sebagian besar logika bisnis di dalam folder fitur. Ini lagi membuat pemahaman dan penggunaan kode menjadi lebih mudah.

Kekurangan

Kekurangan terbesar dari struktur ini adalah kompleksitas. Jika Anda bekerja pada aplikasi skala besar, maka kompleksitas tambahan ini tidak masalah besar karena akhirnya mengurangi kompleksitas keseluruhan proyek. Namun, jika Anda hanya memiliki beberapa fitur/halaman, sistem ini dapat menjadi terlalu berlebihan dengan banyak folder yang tidak digunakan sama sekali atau hanya berisi beberapa file. Karena itu, saya hanya merekomendasikan menggunakan struktur folder ini pada proyek yang lebih besar dan lebih maju yang membutuhkan pemisahan tambahan.

Kesimpulan

Tidak peduli seberapa besar proyek Anda, struktur folder sangat penting. Dengan ketiga template struktur folder ini, Anda seharusnya dapat mengambil proyek berbagai ukuran dan menyesuaikan salah satu struktur ini sesuai dengan kebutuhan Anda yang pasti akan membantu Anda menulis kode yang lebih baik dan lebih bersih.