Pembahasan

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.

app/root.tsx

// bagian atas file app/root.tsx

export default function App() {
  return <Outlet />;
}

// bagian bawah file app/root.tsx

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.

app/root.tsx

// bagian atas file app/root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

// bagian bawah file app/root.tsx

Lo bisa juga import global CSS kayak gini:

app/root.tsx

// bagian atas file app/root.tsx

import "app.css";

// bagian bawah file app/root.tsx

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.

app/root.tsx

// bagian atas file app/root.tsx

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  let message = "Oops!";
  let details = "An unexpected error occurred.";
  let stack: string | undefined;

  if (isRouteErrorResponse(error)) {
    message = error.status === 404 ? "404" : "Error";
    details =
      error.status === 404
        ? "The requested page could not be found."
        : error.statusText || details;
  } else if (import.meta.env.DEV && error && error instanceof Error) {
    details = error.message;
    stack = error.stack;
  }

  return (
    <main className="pt-16 p-4 container mx-auto">
      <h1>{message}</h1>
      <p>{details}</p>
      {stack && (
        <pre className="w-full p-4 overflow-x-auto">
          <code>{stack}</code>
        </pre>
      )}
    </main>
  );
}

Lo juga bisa export links buat nge-load CSS external kayak Google Fonts, misalnya:

app/root.tsx

// bagian atas file app/root.tsx

export const links: Route.LinksFunction = () => [
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "anonymous",
  },
  {
    rel: "stylesheet",
    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
  },
];

// bagian bawah file app/root.tsx

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.

Pengenalan Direktori

.react-router

app

app/routes.tsx

app/root.tsx

Colocation

public

vite.config.ts

react-router.config.ts

Sudah paham pelajaran ini?

Diskusi