Tutorial Laravel, React dan Zustand #2 : Installasi dan Konfigurasi React Router DOM

Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
19 Mei 2024
Tutorial Laravel, React dan Zustand #2 : Installasi dan Konfigurasi React Router DOM

Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaimana cara membuat dan menjalankan project React menggunakan Vite dan pada kesempatan kali ini kita semua akan belajar bersama-sama bagaimana cara melakukan installasi dan konfigurasi React Router DOM di dalam project React, yang mana digunakan untuk membuat navigasi secara SPA (single page application).

Apa itu React Router DOM ?

React Router DOM adalah library yang digunakan untuk membuat navigasi di dalam aplikasi web berbasis React. Dengan library ini, kita bisa membuat Single Page Application (SPA) dimana pengguna bisa berpindah antar halaman web tanpa perlu memuat ulang seluruh halaman. React Router DOM membuat navigasi ini terasa cepat dan mulus.

Langkah 1 - Installasi React Router DOM

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project React-nya.

npm install react-router-dom@6.23.0

Silahkan tunggu proses installasinya sampai selesai dan pastikan komputer terhubung dengan internet.

Langkah 2 - Konfigurasi React Router DOM

Setelah proses installasi selesai dilakukan, maka langkah berikutnya adalah melakukan register React Router DOM di dalam project secara global, tujuannya agar bisa digunakan disemua component yang ada di project.

Silahkan teman-teman buka file src/main.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.

src/main.jsx

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

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

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

Dari perubahan kode di atas, kita import BrowserRouter dari React Router DOM.

//import BrowserRouter dari react router
import { BrowserRouter } from 'react-router-dom';

Kemudian kita render atau letakkan component App di dalam BrowserRouter tersebut.

<BrowserRouter>
   <App />
</BrowserRouter>

Langkah 3 - Integrasi Bootstrap

Kali ini kita akan menggunakan Bootstrap sebagai framework CSS yang digunakan, ini akan mempercepat kita dalam pembuatan sebuah UI atau user interface.

Silahkan teman-teman buka file index.html, kemudian ubah kode-nya menjadi seperti berikut ini.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React + Zustand - SantriKoding.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
    <style>
      body { background-color: lightgray; font-family: 'Quicksand', sans-serif }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Dari perubahan kode di atas, kita melakukan import CSS dan JS dari Bootstrap secara online.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

Dan kita juga menambahkan sedikit custom CSS untuk mempercantik tampilan aplikasi kita nanti.

body { background-color: lightgray; font-family: 'Quicksand', sans-serif }

Langkah 4 - Membuat Views

Sebelum kita membuat konfigurasi route, maka kita perlu membuat beberapa view yang nanti dirender saat route tersebut diakses. Berikut ini beberapa view yang akan kita buat.

  1. home - untuk menampilkan halaman homepage.
  2. register - untuk menampilkan halaman register.
  3. login - untuk menampilkan halaman login.
  4. dashboard - untuk menampilkan halaman dashboard dan data user yang berhasil login.

View Home

Silahkan teman-teman buat folder baru dengan nama views di dalam folder src, kemudian di dalam folder views tersebut silahkan buat folder baru lagi dengan nama home dan di dalamnya silahkan buat file dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.

src/views/home/index.jsx

export default function Home() {
    return (
        <div className="p-5 mb-4 bg-light rounded-3">
            <div className="container-fluid py-5">
                <h1 className="display-5 fw-bold">REACT + ZUSTAND</h1>
                <p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
            </div>
        </div>
    )
}

View Register

Silahkan buat folder baru dengan nama auth di dalam folder src/views, kemudian di dalam folder tersebut silahkan buat file baru dengan nama register.jsx dan masukkan kode berikut ini di dalamnya.

src/views/auth/register.jsx

export default function Register() {
    return (
        <div className="p-5 mb-4 bg-light rounded-3">
            <div className="container-fluid py-5">
                <h1 className="display-5 fw-bold">HALAMAN REGISTER</h1>
                <p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
            </div>
        </div>
    )
}

View Login

Silahkan teman-teman buat file baru dengan nama login.jsx di dalam folder src/views/auth, kemudian masukkan kode berikut ini di dalamnya.

src/views/auth/login.jsx

export default function Login() {
    return (
        <div className="p-5 mb-4 bg-light rounded-3">
            <div className="container-fluid py-5">
                <h1 className="display-5 fw-bold">HALAMAN LOGIN</h1>
                <p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
            </div>
        </div>
    )
}

View Dashboard

Terakhir, kita buat view untuk halaman dashboard. Silahkan teman-teman buat folder baru dengan nama dashboard di dalam folder src/views, kemudian buat file di dalam folder tersebut dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.

src/views/dashboard/index.jsx

export default function Dashboard() {
    return (
        <div className="p-5 mb-4 bg-light rounded-3">
            <div className="container-fluid py-5">
                <h1 className="display-5 fw-bold">HALAMAN DASHBOARD</h1>
                <p className="col-md-8 fs-4">Belajar State Management di React dengan Zustand</p>
            </div>
        </div>
    )
}

Langkah 5 - Membuat Konfigurasi Routes

Setelah beberapa view berhasil kita buat, maka langkah berikutnya adalah melakukan konfigurasi dalam pembuatan route.

Silahkan teman-teman buat folder baru dengan nama routes di dalam folder src, kemudian di dalamnya buat file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.

src/routes/index.jsx

//import react router dom
import { Routes, Route } from "react-router-dom";

//import view home
import Home from "../views/home/index.jsx";

//import view register
import Register from "../views/auth/register.jsx";

//import view login
import Login from "../views/auth/login.jsx";

//import view dashboard
import Dashboard from "../views/dashboard/index.jsx";

export default function AppRoutes() {

  return (
    <Routes>
      {/* route "/" */}
      <Route path="/" element={<Home />} />

      {/* route "/register" */}
      <Route path="/register" element={<Register />} />

      {/* route "/login" */}
      <Route path="/login" element={<Login />} />

      {/* route "/dashboard" */}
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  );
}

Dari penambahan kode di atas, pertama-tama kita import 2 module dari React Router DOM, yaitu Routes dan Route.

//import react router dom
import { Routes, Route } from "react-router-dom";

Setelah itu, kita import 4 view yang sudah kita buat sebelumnya.

//import view home
import Home from "../views/home/index.jsx";

//import view register
import Register from "../views/auth/register.jsx";

//import view login
import Login from "../views/auth/login.jsx";

//import view dashboard
import Dashboard from "../views/dashboard/index.jsx";

Dan untuk mendefinisikan route, pertama kita letakkan di dalam <Routes> dan di dalam kita buat route baru. Contohnya seperti berikut.

{/* route "/" */}
<Route path="/" element={<Home />} />

Di atas, untuk path merupakan URL dari route-nya, yaitu /. Sedangkan element adalah view yang dipanggil ketika route tersebut diakses, dimana di dalam element kita panggil view <Home>.

Langkah 6 - Render Route

Sekarang kita akan panggil konfigurasi route di atas di dalam induk component, yaitu App.jsx. Jadi silahkan teman-teman buka file tersebut di dalam folder src/App.jsx, kemudian ubah kode-nya menjadi seperti berikut ini.

src/App.jsx

//import router
import AppRoutes from './routes';

//import Link from react router dom
import { Link } from "react-router-dom";

export default function App() {

  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
        <div className="container">
          <Link to="/" className="navbar-brand">HOME</Link>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0" role="search">
              <a href="https://santrikoding.com" target="_blank" className="nav-link">SANTRIKODING.COM</a>
            </ul>
            <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link to="/login" className="nav-link" aria-current="page">LOGIN</Link>
              </li>
              <li className="nav-item">
                <Link to="/register" className="nav-link" aria-current="page">REGISTER</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="container mt-5">
        <AppRoutes />
      </div>

    </div>
  )
}

Dari perubahan kode di atas, pertama kita import file route yang sudah kita buat sebelumnya.

//import router
import AppRoutes from './routes';

Kemudian untuk menampilkannya, kita cukup memanggilnya seperti ini di dalam template.

<AppRoutes />

Dan kita juga melakukan import Link dari React Router DOM. Ini kita gunakan karena di dalam file ini terdapat beberapa link yang digunakan untuk navigasi / berpindah-pindah ke halaman lain.

//import Link from react router dom
import { Link } from "react-router-dom";

Langkah 7 - Uji Coba Route

Sekarang jika teman-teman akses halaman awal project atau di http://localhost:5173, jika berhasil maka akan menampilkan seperti berikut ini.

Jika kita klik menu LOGIN dan REGISTER, maka kita akan berpindah ke halaman tersebut tanpa perlu reload page.

Kesimpulan

Pada artikel kali ini, kita semua telah belajar bagaimana cara install dan konfigurasi React Router DOM di dalam project React.

Pada artikel berikutnya, kita semua akan belajar bersama-sama bagaimana cara melakukan installasi dan konfigurasi library yang bernama Zustand untuk state management di React.

Terima Kasih

Laravel React JS Zustand
Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

TRAKTEER SAWERIA
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

DAFTAR SERI ARTIKEL
Membangun Smart Home System Dengan Laravel, React Native dan NodeMCU
LIHAT COURSE
Membangun Website Toko Online Dengan Laravel, Inertia.js & React.js
LIHAT COURSE
Membangun Website Toko Online Dengan Laravel, Nuxt.js dan Payment Gateway
LIHAT COURSE
Membangun Website Donasi Online Dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway
LIHAT COURSE
Membangun Webiste Wisata Berbasis GIS dan PWA dengan Laravel, React.js dan Mapbox
LIHAT COURSE