Pengenalan Direktori
Setelah lo bikin project baru, lo bakal nemu struktur folder dan file yang udah ada secara bawaan. Beberapa file lo bisa liat secara langsung, tapi ada juga beberapa yang disembunyiin secara default, kayak entry.client.tsx dan entry.server.tsx contohnya. Ini karena emang file-file tersebut nggak perlu di-apa-apain, kecuali ada case khusus yang lo butuhin.
.react-router
Folder ini di-generate otomatis sama CLI-nya React Router. Isi dari folder ini adalah informasi kayak type yang di-generate otomatis sesuai konfigurasi di file app/routes.ts. Secara umum, lo nggak perlu ngurusin folder ini, tapi lo bisa liat-liat isinya kalo lo penasaran.
app
Folder ini bisa lo isi dengan kode aplikasi lo. Beda dengan Next.js, di dalem folder ini nggak banyak file convention dan ada beberapa file bawaan:
app/routes.tsx
File ini adalah file konfigurasi routing yang bisa lo sesuaikan dan file ini juga yang jadi sumber React Router buat nge-generate type untuk setiap route module (lo bisa baca lebih lanjut di bagian Routing).
app/root.tsx
File ini juga bisa disebut root route, dia yang bakal jadi parent buat semua route yang ada di aplikasi lo.
Kalo di Next.js, ini mirip kayak root layout-nya mereka lah atau file app/layout.tsx. Ini kenapa apa yang lo declare di file ini, bakal "dibagi" ke semua route yang ada di aplikasi lo.
Di dalem file ini lo bakal nemu <Outlet />, yang fungsinya buat nge-render child route. Jadi, setiap route yang lo bikin di dalam file routes.tsx, bakal di-render di dalam <Outlet /> ini.
Juga lo bakal nemu export function Layout yang bisa lo pake buat nge-define layout component buat ngebungkus setiap route. Setiap kali user pindah route, layout ini bakal tetep ada dan nggak bakal di-render ulang.
Karena file ini adalah root route, jadi lo harus define tag <html>, <head>, dan <body> di dalamnya. Mirip kayak app/layout.tsx di Next.js.
Lo bisa juga import global CSS kayak gini:
Bisa juga export component ErrorBoundary yang bakal dipake buat handle error di seluruh aplikasi lo (termasuk error 404).
Kalo di Next.js, ini mirip app/global-error.tsx perannya.
Lo juga bisa export links buat nge-load CSS external kayak Google Fonts, misalnya:
File ini juga support beberapa fitur yang bisa dipake di route module, kayak loader dan action contohnya.
Colocation
Selain kedua file di atas, sebenernya ada folder lain dengan nama welcome yang ada di dalam folder app.
Isi dari folder ini cuman satu file welcome.tsx dan dua file logo. Lo bisa hapus folder ini kalo lo mau, karena ini cuman contoh aja.
Lo bisa bikin folder lain di dalam folder app buat naro file-file yang lo butuhin, misal components, utils, atau hooks.
Gue sendiri nge-treat folder app ini kayak folder src yang biasanya ada di project React lainnya.
Tapi, ini preferensi pribadi aja, lo bisa naruh file-file lo di luar folder app kalo mau.
Gue cuman ngasih tau aja kalo cara ini aman dan lo nggak perlu khawatir ada file yang namanya bakal bentrok sama convention yang ada di React Router.
Soalnya ada framework lain yang bentar lagi mau mati ketiban convention-nya sendiri.
public
Folder public ini adalah tempat lo naro file-file statis yang bisa diakses langsung dari URL. Misalnya, lo mau naro gambar atau file aset yang bisa diakses langsung, lo bisa taro di sini.
vite.config.ts
React Router ini pake Vite sebagai bundler-nya, jadi lo bakal nemuin file konfigurasi Vite di sini. Lo bisa ubah konfigurasi Vite sesuai kebutuhan lo, misalnya nambahin plugin kayak Tailwind CSS atau apaun lah pokoknya. Nyatanya, Tailwind CSS ini udah di-setup secara bawaan, jadi lo tinggal pake aja.
react-router.config.ts
Ini adalah file konfigurasi React Router. Secara umum, lo nggak perlu ngubah apa-apa di sini, kecuali ada prilaku dari React Router yang mau lo ubah, kayak nge-disable SSR atau nge-enable feature experimental contohnya.