zmedia
Beranda / Laravel

Membangun Aplikasi Full-Stack: Tutorial Integrasi Laravel 12 dan React 18 dengan Inertia.js

Posting Komentar

Dunia pengembangan web modern semakin menuntut aplikasi yang tidak hanya kuat di sisi backend, tetapi juga dinamis dan responsif di sisi frontend. Laravel, dengan kemampuannya sebagai framework PHP yang tangguh, dan React, sebagai pustaka JavaScript yang populer untuk membangun antarmuka pengguna, adalah kombinasi yang sangat ampuh. Mengintegrasikan keduanya secara mulus dapat mempercepat pengembangan aplikasi full-stack yang kompleks.

Tutorial ini akan memandu Anda langkah demi langkah dalam mengintegrasikan Laravel 12 (versi terbaru pada saat penulisan) dengan React 18, menggunakan pendekatan modern dan efisien melalui Inertia.js dan Vite. Inertia.js memungkinkan Anda membangun aplikasi SPA (Single Page Application) tanpa kompleksitas API, sementara Vite menyediakan pengalaman pengembangan frontend yang sangat cepat.

Prasyarat

Sebelum memulai, pastikan Anda memiliki perangkat lunak berikut terinstal di sistem Anda:

  • PHP (versi 8.2 atau lebih tinggi)
  • Composer
  • Node.js (versi 18 atau lebih tinggi) dan npm (atau Yarn)
  • Editor Kode (misalnya, VS Code)
  • Database (misalnya, MySQL, PostgreSQL, SQLite)

Langkah 1: Membuat Proyek Laravel Baru

Mulai dengan membuat proyek Laravel baru menggunakan Composer. Buka terminal atau command prompt Anda dan jalankan perintah berikut:

composer create-project laravel/laravel nama-proyek-react
cd nama-proyek-react

Gantilah nama-proyek-react dengan nama proyek yang Anda inginkan.

Langkah 2: Menginstal Dependensi Frontend (Inertia & Vite)

Laravel 10 ke atas menggunakan Vite sebagai bundler JavaScript standar, menggantikan Laravel Mix. Setelah proyek Laravel dibuat, instal dependensi NPM dan paket Inertia.js:

npm install
composer require inertiajs/inertia-laravel
npm install @inertiajs/react react react-dom
  • npm install: Menginstal dependensi JavaScript dasar yang disertakan oleh Laravel (termasuk Vite).
  • composer require inertiajs/inertia-laravel: Menginstal adaptor sisi server untuk Inertia.js di Laravel.
  • npm install @inertiajs/react react react-dom: Menginstal adaptor sisi klien untuk React, serta pustaka React dan React DOM itu sendiri.

Langkah 3: Konfigurasi Inertia.js

Setelah menginstal dependensi, Anda perlu mengonfigurasi Inertia.js di proyek Laravel Anda.

3.1 Membuat Middleware Inertia

Jalankan perintah Artisan berikut untuk membuat middleware Inertia:

php artisan inertia:middleware

Perintah ini akan membuat file app/Http/Middleware/HandleInertiaRequests.php. Sekarang, daftarkan middleware ini di file app/Http/Kernel.php, di bagian web middleware group:

// app/Http/Kernel.php
protected array $middlewareGroups = [
    'web' => [
        // ...middleware lain
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],
    // ...
];

3.2 Membuat Root Template Blade

Inertia.js menggunakan satu file Blade sebagai "akar" atau entry point untuk aplikasi SPA Anda. Buat file app.blade.php di direktori resources/views/:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel & React with Inertia</title>
    @viteReactRefresh
    @vite(['resources/js/app.jsx', 'resources/css/app.css'])
    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>
  • @viteReactRefresh dan @vite(['resources/js/app.jsx', 'resources/css/app.css']): Ini adalah direktif Blade untuk Vite, yang akan mengompilasi aset JavaScript dan CSS Anda. Perhatikan bahwa kita menggunakan .jsx untuk file JavaScript utama.
  • @inertiaHead dan @inertia: Direktif ini adalah tempat Inertia akan menyuntikkan aset dan konten aplikasi React Anda.

3.3 Mengonfigurasi Vite

Pastikan Vite dikonfigurasi untuk bekerja dengan React. Buka file vite.config.js di root proyek Anda dan pastikan plugin React terdaftar:

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // Import plugin React

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx', // Ubah ke .jsx
            refresh: true,
        }),
        react(), // Tambahkan plugin React
    ],
});

3.4 Membuat Main JavaScript Entry Point

Buat file app.jsx (bukan app.js, karena kita akan menggunakan JSX) di direktori resources/js/. Ini akan menjadi entry point utama untuk aplikasi React Anda:

// resources/js/app.jsx
import './bootstrap';
import '../css/app.css';

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  title: (title) => `${title} - My App`,
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages//*.jsx')),
  setup({ el, App, props }) {
    const root = createRoot(el);
    root.render(<App {...props} />);
  },
  progress: {
    color: '#4B5563',
  },
});
  • resolvePageComponent: Ini adalah fungsi pembantu dari Laravel Vite Plugin yang memudahkan pemuatan komponen React Anda secara dinamis dari folder Pages.
  • createRoot: Metode baru dari React 18 untuk me-render aplikasi React Anda.

Langkah 4: Membuat Komponen React Pertama Anda

Sekarang, buat komponen React sederhana di dalam direktori resources/js/Pages/. Buat folder Pages jika belum ada, lalu buat file Welcome.jsx di dalamnya:

// resources/js/Pages/Welcome.jsx
import React from 'react';

export default function Welcome(props) {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Halo dari Laravel & React!</h1>
      <p>Aplikasi full-stack Anda berhasil diintegrasikan.</p>
      <p>Versi Laravel: {props.laravelVersion}</p>
      <p>Versi PHP: {props.phpVersion}</p>
    </div>
  );
}

Kita akan meneruskan beberapa props dasar dari Laravel ke komponen ini.

Langkah 5: Routing dengan Inertia

Terakhir, kita perlu membuat route di Laravel yang akan me-render komponen React yang baru saja kita buat. Buka file routes/web.php dan ubah route default menjadi seperti ini:

// routes/web.php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Pastikan Anda menambahkan use Inertia\Inertia; di bagian atas file. Inertia::render() akan secara otomatis mencari komponen React di resources/js/Pages/.

Langkah 6: Menjalankan Aplikasi

Anda siap menjalankan aplikasi Anda! Buka dua terminal terpisah di root proyek Anda.

Di terminal pertama, jalankan server Laravel:

php artisan serve

Di terminal kedua, jalankan Vite development server:

npm run dev

Setelah kedua server berjalan, buka browser Anda dan kunjungi URL yang ditampilkan oleh php artisan serve (biasanya http://127.0.0.1:8000). Anda akan melihat komponen React "Halo dari Laravel & React!" ditampilkan.

Manfaat Integrasi Laravel & React dengan Inertia.js

Integrasi ini menawarkan beberapa keuntungan signifikan:

  • Pengembangan SPA Sederhana: Inertia.js menghilangkan kebutuhan untuk membangun API terpisah, karena data diteruskan langsung ke komponen React melalui controller Laravel.
  • SEO-Friendly Secara Default: Meskipun ini adalah SPA, Inertia.js mendukung Server-Side Rendering (SSR) parsial, membuatnya lebih ramah SEO dibandingkan SPA tradisional.
  • Pengalaman Developer yang Lebih Baik: Anda dapat memanfaatkan fitur-fitur seperti middleware Laravel, otentikasi, dan validasi formulir tanpa perlu menulis kode API duplikat di sisi klien.
  • Performa Cepat dengan Vite: Vite menyediakan Hot Module Replacement (HMR) dan bundling yang sangat cepat, meningkatkan produktivitas saat pengembangan.

Kesimpulan

Selamat! Anda telah berhasil mengintegrasikan Laravel 12 dengan React 18 menggunakan Inertia.js dan Vite. Pendekatan ini menawarkan cara yang elegan dan efisien untuk membangun aplikasi web full-stack modern dengan kinerja tinggi. Dari sini, Anda bisa mulai menjelajahi fitur-fitur lebih lanjut seperti manajemen status React (misalnya dengan Context API atau Redux), otentikasi pengguna, dan interaksi database yang lebih kompleks, semuanya sambil mempertahankan kesederhanaan yang ditawarkan oleh Inertia.js.

Teruslah bereksperimen dan bangun aplikasi luar biasa Anda!

TAGS: Laravel 12, React 18, Inertia.js, Full-Stack Development, Web Development, Tutorial, Vite, PHP
A digital illustration depicting the seamless integration of Laravel and React. On the left, the purple Laravel logo with subtle server and database icons. On the right, the blue React logo with UI component elements and a browser window. A dynamic, flowing line or bridge connects the two logos, representing Inertia.js, with small Vite logos subtly integrated into the flow, symbolizing fast development. The background is clean and modern, perhaps with abstract code lines.
Lokasi:

Posting Komentar untuk "Membangun Aplikasi Full-Stack: Tutorial Integrasi Laravel 12 dan React 18 dengan Inertia.js"