Studi Kasus #11: Aplikasi Wisata Indonesia – Inisialisasi React dan Setup Router

Halo, calon full-stack developer! 👋

Setelah menyelesaikan backend dengan Node.js dan Express (Studi Kasus #1–10), sekarang saatnya kita membangun frontend menggunakan React. Di bagian ini, kita akan membuat proyek React dengan Vite, mengatur struktur folder yang rapi, dan menginstal react-router-dom untuk menangani navigasi antar halaman.

Frontend akan menjadi wajah aplikasi Wisata Indonesia yang akan menampilkan data dari API yang sudah kita buat. Yuk, kita mulai! 🚀

Langkah 1: Membuat Proyek React dengan Vite

Pastikan kamu sudah menginstal Node.js (minimal versi 18). Buka terminal, lalu arahkan ke folder utama wisata-indonesia (bukan di dalam folder backend). Kemudian jalankan perintah berikut:

npm create vite@latest frontend -- --template react

Perintah ini akan membuat folder frontend dengan template React. Setelah selesai, masuk ke folder frontend dan instal dependensi:

cd frontend
npm install

Sekarang kita bisa menjalankan proyek untuk melihat hasilnya:

npm run dev

Buka browser ke http://localhost:5173. Kamu akan melihat halaman awal Vite + React. Kita akan membersihkan boilerplate dan menyiapkan struktur folder.

💡 Catatan: Jika lebih suka menggunakan Create React App, bisa juga, tetapi Vite lebih cepat dan ringan.

Langkah 2: Membersihkan Boilerplate

Hapus file-file yang tidak diperlukan:

• Hapus src/App.css dan src/index.css (kita akan buat sendiri nanti).
• Kosongkan src/App.jsx dan src/main.jsx dari kode contoh, tapi jangan hapus file-nya.
• Hapus logo dan asset lainnya di src/assets.

Sekarang src/main.jsx akan terlihat seperti ini:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Dan src/App.jsx menjadi:

function App() {
  return (
    <div>
      <h1>Aplikasi Wisata Indonesia</h1>
    </div>
  )
}

export default App

Jalankan npm run dev lagi, seharusnya tampil "Aplikasi Wisata Indonesia".

Langkah 3: Menginstal React Router

Kita akan menggunakan react-router-dom versi 6 untuk menangani routing. Install dengan perintah:

npm install react-router-dom

Setelah terinstal, kita bisa mulai mengatur routing.

📂 Langkah 4: Membuat Struktur Folder

Struktur folder yang rapi akan memudahkan pengembangan. Buat folder-folder berikut di dalam src:

src/
├── assets/          # gambar, font, dll.
├── components/      # komponen kecil yang dipakai ulang (Navbar, Card, dll.)
├── layouts/         # layout halaman (misal MainLayout, AdminLayout)
├── pages/           # halaman-halaman utama (Home, DetailDestination, AdminDashboard)
├── services/        # fungsi untuk memanggil API (axios)
├── utils/           # fungsi pembantu (format tanggal, dll.)
├── App.jsx
├── main.jsx
└── index.css (opsional)

Buat folder-folder tersebut melalui terminal atau langsung di editor.

Langkah 5: Membuat Halaman Sederhana dan Router

Sekarang kita akan membuat beberapa halaman contoh sebagai placeholder:

• pages/Home.jsx – halaman utama.
• pages/DestinationDetail.jsx – halaman detail destinasi.
• pages/Admin/Dashboard.jsx – dashboard admin (dilindungi).

Buat file-file tersebut dengan konten sederhana. Contoh Home.jsx:

const Home = () => {
  return <h1>Halaman Utama</h1>;
};

export default Home;

Kemudian kita atur router di App.jsx menggunakan createBrowserRouter dan RouterProvider.

Pertama, import komponen dan router:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import DestinationDetail from './pages/DestinationDetail';
// (nanti kita tambahkan halaman lain)

Buat konfigurasi router:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/destination/:id',
    element: <DestinationDetail />,
  },
  // nanti tambahkan rute admin dll.
]);

Kemudian render RouterProvider dengan router tersebut:

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Jangan lupa import RouterProvider dari react-router-dom. File App.jsx sekarang:

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import DestinationDetail from './pages/DestinationDetail';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/destination/:id',
    element: <DestinationDetail />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Uji coba dengan mengunjungi / dan /destination/1 (meskipun ID belum diproses).

💡 Catatan: Kita bisa menggunakan Routes dan Route jika lebih suka. Tapi createBrowserRouter lebih direkomendasikan untuk proyek modern.

Langkah 6: Menambahkan Layout dan Komponen Global

Kita akan membuat layout utama yang berisi Navbar dan Footer. Buat file layouts/MainLayout.jsx:

import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

const MainLayout = () => {
  return (
    <div>
      <Navbar />
      <main>
        <Outlet /> {/* di sini konten halaman akan dirender */}
      </main>
      <Footer />
    </div>
  );
};

export default MainLayout;

Kemudian buat komponen sederhana components/Navbar.jsx dan components/Footer.jsx (isi bisa link navigasi).

Selanjutnya, kita gunakan layout ini di router dengan cara menambahkan elemen layout sebagai parent:

import MainLayout from './layouts/MainLayout';

const router = createBrowserRouter([
  {
    element: <MainLayout />,
    children: [
      { path: '/', element: <Home /> },
      { path: '/destination/:id', element: <DestinationDetail /> },
    ],
  },
]);

Sekarang semua halaman akan memiliki Navbar dan Footer secara otomatis.

Rute Admin (Akan Dilindungi Nanti)

Untuk sementara, kita buat dulu halaman admin sederhana di pages/Admin/Dashboard.jsx. Nanti kita akan melindungi rute ini dengan sistem autentikasi (menggunakan token dari backend). Tambahkan rute admin dengan layout terpisah atau child dari layout yang sama, namun perlu pengecekan autentikasi. Untuk tahap awal, kita bisa tambahkan tanpa proteksi dulu.

Contoh penambahan rute:

import AdminDashboard from './pages/Admin/Dashboard';

// ... di dalam router
{
  path: '/admin',
  element: <AdminDashboard />,
},

Nanti kita akan ganti dengan layout khusus admin dan proteksi.

Menyiapkan Service untuk API

Kita akan menggunakan axios untuk memanggil API backend. Install axios:

npm install axios

Buat file services/api.js untuk konfigurasi dasar:

import axios from 'axios';

const API = axios.create({
  baseURL: 'http://localhost:3000/api', // ganti dengan URL backend nanti
});

// Interceptor untuk menambahkan token jika ada
API.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default API;

Dengan ini, kita siap memanggil API dari komponen.

📁 Struktur Folder Akhir

Setelah langkah-langkah di atas, struktur folder frontend akan seperti ini:

frontend/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   └── Footer.jsx
│   ├── layouts/
│   │   └── MainLayout.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── DestinationDetail.jsx
│   │   └── Admin/
│   │       └── Dashboard.jsx
│   ├── services/
│   │   └── api.js
│   ├── utils/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css (opsional)
├── package.json
└── vite.config.js

Langkah Selanjutnya

Di Studi Kasus #12, kita akan mulai menghubungkan frontend dengan backend menggunakan axios. Kita akan mengambil data dari API (misal daftar destinasi) dan menampilkannya di halaman utama. Juga akan kita buat komponen Card untuk menampilkan item.

Pastikan server backend masih berjalan di http://localhost:3000 agar frontend bisa mengaksesnya.

Sampai jumpa di tutorial berikutnya! 👋😊

---

Ditulis dengan ❤️ untuk para pengembang yang ingin membangun aplikasi wisata.