Pengembangan Aplikasi Full-Stack dengan Laravel dan ReactJS
Dalam dunia pengembangan web modern, banyak pengembang memilih Laravel dan ReactJS sebagai kombinasi untuk membuat aplikasi full-stack. Laravel digunakan di sisi backend (server) sedangkan ReactJS digunakan di sisi frontend (antarmuka pengguna).
Dengan menggabungkan keduanya, kita bisa membangun aplikasi yang kuat, dinamis, dan mudah dikelola. Artikel ini akan menjelaskan langkah-langkah dasar bagaimana membuat aplikasi full-stack menggunakan Laravel dan ReactJS.
1. Kenapa Memilih Laravel dan ReactJS
Laravel adalah framework PHP yang populer, dikenal karena sintaksnya yang bersih, fitur-fitur lengkap seperti routing, database migration, dan keamanan bawaan.
ReactJS adalah library JavaScript yang membantu membangun antarmuka pengguna interaktif dengan cara memecah halaman menjadi komponen kecil yang dapat digunakan kembali.
Menggabungkan keduanya membuat kita punya backend yang stabil dan frontend yang modern dan reaktif.
2. Persiapan Lingkungan
Sebelum memulai, pastikan sudah terinstal:
-
PHP dan Composer (untuk Laravel)
-
Node.js dan npm (untuk React)
-
Editor teks (seperti VSCode)
3. Membuat Proyek Laravel
Pertama, buat proyek Laravel baru:
composer create-project laravel/laravel laravel-react cd laravel-react
Setelah itu, jalankan server bawaan Laravel:
php artisan serve
4. Menyiapkan ReactJS
Biasanya, ReactJS diintegrasikan melalui Vite (sekarang Laravel mendukung Vite). Laravel sudah menyediakan preset untuk React.
Install ReactJS di dalam proyek Laravel:
npm install npm install react react-dom
Atur file resources/js/app.jsx (atau app.js), misalnya:
import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
return <h1>Halo dari React di Laravel!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
5. Membuat View untuk Menyematkan React
Di Laravel, buat file Blade resources/views/welcome.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Laravel + ReactJS</title>
@viteReactRefresh
@vite('resources/js/app.jsx')
</head>
<body>
<div id="root"></div>
</body>
</html>
Pastikan div dengan id="root" sesuai dengan target render React.
6. Jalankan Vite
Untuk melihat hasilnya, jalankan perintah Vite:
npm run dev
Buka browser, Anda akan melihat tulisan Halo dari React di Laravel!.
7. Contoh Alur Kerja Full-Stack
-
Laravel bertugas membuat API menggunakan
Route::apiResourceatauRoute::get. -
ReactJS akan mengambil data dari API Laravel menggunakan fetch atau axios.
-
Data kemudian ditampilkan di komponen React.
Contoh route API di Laravel (routes/api.php):
Route::get('/user', function () {
return ['name' => 'Budi', 'email' => 'budi@email.com'];
});
Contoh pemanggilan API di ReactJS:
import { useEffect, useState } from 'react';
function App() {
const [user, setUser] = useState({});
useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => setUser(data));
}, []);
return (
<div>
<h1>Nama: {user.name}</h1>
<p>Email: {user.email}</p>
</div>
);
}
export default App;
8. Tips Praktis
-
Gunakan
axiosuntuk permintaan HTTP yang lebih fleksibel. -
Pisahkan komponen React agar lebih rapi.
-
Gunakan
.envuntuk mengatur URL API. -
Gunakan Laravel Sanctum atau Passport untuk otentikasi API.
Kesimpulan
Membangun aplikasi full-stack dengan Laravel dan ReactJS membuka banyak peluang untuk membuat aplikasi web modern. Backend Laravel menangani logika, database, dan keamanan. ReactJS membuat tampilan aplikasi lebih dinamis dan interaktif. Dengan latihan, Anda akan lebih mudah memahami bagaimana keduanya saling terhubung.
