Gimana saya membuat Project Struktur di React Project

Hallo guys all…

kali ini saya bakal menjelaskan gimana sih saya ngebuat Struktur project React. soalnya selama saya ngoding React dari awal belajar, kemudian mencari jati diri sama React ini. saya sering mengalami kebingungan dan sering berfikir “woh mantab nih Project structure React js gw” padahal ketika beberapa bulan gk buka projeknya lagi pas saya buka saya malah berfikir “waduh, ini sejenis sampah ya. kok kodingannya acak2 an banget” nah masalah kayak gini jelas bakal jadi masalah ketika kodingan kita bakal dipindah tangankan sama orang lain. dan juga tentunya nilai seni dalam kodingan kita itu gk ada sama sekali..

Jauh jauh waktu sebelum saya menjadi diri saya yang sekarang. setiap saya ngoding itu saya berusana ngebuat se best mungkin, bahkan saya bener2 nganut konsep DRY (Don’t Repeat Yourself) yang sebenernya mindset saya itu belum ada atau salah. akhirnya bukannya DRY yang didapatkan malahan unreadable code yang didapatkan, karena saya membuat satu fungsi yang reusable bisa dipakai dimana2 (btw ini kodingan pas make jQuery sih). hingga akhirnya saya hampir setiap hari coba liat-liat project structure React dari orang orang lain, hingga saya mendapatkan apa yang cocok bagi diri saya. jadi saya harap dengan memberikan project structure yang saya gunakan di React dapat bermanfaat bagi temen2 biar gk kedepannya gk ngoding kayak saya dulu.

Oke berikut ini project structure yang saya gunakan ketika ngoding React, sebenernya baik itu ReactJS/ React-Native hampir sama project structurenya

• assets

di folder assets ini saya biasa naruh file file assets seperti img yang bakal dipanggil di .jsx nya. misalnya nih ya saya punya gambar yang mau saya render di file .jsx yang didalamnya ada sintak <img />

• config

Configuration apps. di folder ini saya ngebuat config2 yang nantinya bakal dipakai ketika program berjalan, contohnya setup config untuk API kayak baseURLnya kemana. saya set disini.

• modules

Nah di folder modules ini semua module module aplikasi saya taruh, untuk sekarang saya taruh folder redux, sama folder service di dalam sini

• routes

di folder routes ini saya biasa menaruh routing config. dan saya membagi route ini menjadi 2 file biasanya. yaitu untuk Private Route dan Public Route

• ui

nah UI ini buat taruh semua file yang berurusan sama User Interface. di dalam folder ini saya biasa nya taruh pages, dan components

• utils

Utils ini berguna untuk ngebuat utilitas di aplikasi, contohnya saya buat redux store, atau instance axios, ataupun function lainnya disini misal saya buat fungsi untuk generate random string, atau saya buat fungsi untuk cek apakah bilangan ini genap atau ganjil. saya bakal taruh disini. termasuk juga redux-store saya bakal taruh disini.

oke itu penjelasan secara globalnya

sekarang kita coba expand lagi foldernya

nah kalo sudah di expand kira-kira seperti itu structurenya.

saya kana jelasin di bagian modules, dan ui. kalo bagian lain saya rasa mudah dimengerti.

— Modules

— — redux

nah disini ada folder redux. di folder redux ini saya menaruh redux filenya per fungsi. contohnya saya punya fungsi Loading, dan Alert Dialog. maka saya akan membuat folder Loading dan AlertDialog pada sebagai subdirectory redux. kemudian di dalam folder Loading dan AlertDialog saya bakal membuat *.action.ts, *.constants.ts, dan *.reducer.ts. jadi setiap folder tersebut memiliki action, constant dan reducernya masing masing. dan karna kebetulan saya menggunakan typescript maka dalam folder tersebut saya juga membuat folder interfaces untuk membuat sebuah interface untuk ActionTypes dan ReducerTypes nya. masih bingung?

saya kasih contoh di project yang sedang saya garap

di file action ini saya membuat semua redux action.

di file constants saya membuat constant action type nya.

dan di file reducer saya membuat reducernya.

nah kemudian di semua itu saya import di dalam file index.ts yang berada di folder redux. disini saya melakukan combining semua reducer yang ada. contohnya yang tadi LoginReducer dan AlertDialogReducer.

— — Services

kemudian masih di folder modules saya membuat folder Services, di services ini saya gunakan untuk melakukan fetching data dari API.

kemudian ada folder UI

— UI

— — components

— — container

— — pages

untuk folder UI kira kira seperti itu.

• components

folder components ini saya gunakan untuk menaruh reusable component yang bisa dipakai berulang ulang kali di page manapun. contohnya saya membuat Modal, ataupun Table, atau semisal saya mau buat custom components.

• container

container ini sebenarnya juga components, cuman disini saya gunakan untuk menaruh container component. contohnya admin page, pasti kan ada header, sidebar, dan footer misalnya. daripada di setiap page saya membuat header, sidebar, dan footer untuk setiap pages saya memilih membuat container component

• pages

nah terakhir ada folder pages, di folder ini saya biasa menaruh semua page disini. contohnya ketika saya membuat page userlist, page payment, page payment-history. dll, maka saya akan menaruh componentnya disini.

Bagi teman-teman yang ingin men-clone Structure yang saya gunakan. teman-teman dapat meng-clonenya dari github saya

NurcahyaAri/reactjs-starter

Akhir kata:

mungkin folder structure saya masih belum sempurna karena masih banyak kekurangannya. dan mohon maaf sebesar-besarnya jika ada salah kata.

terimakasih