Laravel 12 + ReactJS: Build Dynamic Apps with Seamless Routing

Introduction: Why This Combo Rocks

Imagine building a car: Laravel is the engine (backend logic), React is the sleek dashboard (frontend), and React Router is the GPS (navigation). Together, they let you create fast, interactive web apps without reloading pages. Intrigued? Let’s build one!

🎯 What You’ll Learn

By the end, you’ll:
1️⃣ Create a Laravel 12 app with React.
2️⃣ Set up React Router for smooth navigation.
3️⃣ Connect Laravel routes to React’s SPA (Single-Page App).

🧰 Prerequisites

• Basic PHP/JavaScript knowledge.
• Composer & Node.js installed.
• A sprinkle of curiosity!

⚙️ Step 1: Set Up Laravel 12 with React

Install Laravel & React

composer create-project laravel/laravel laravel-react-app  
cd laravel-react-app  
npm install react react-dom @vitejs/plugin-react  

Configure Vite

Update vite.config.js:

import { defineConfig } from 'vite';  
import laravel from 'laravel-vite-plugin';  
import react from '@vitejs/plugin-react';  

export default defineConfig({  
  plugins: [  
    laravel(['resources/js/app.jsx']),  
    react(),  
  ],  
});  

Create Your First React Component

Rename resources/js/app.js to app.jsx and add:

// resources/js/app.jsx  
import React from 'react';  
import ReactDOM from 'react-dom/client';  

function App() {  
  return <h1>Hello from React + Laravel 12!</h1>;  
}  

ReactDOM.createRoot(document.getElementById('app')).render(<App />);  

Update Your Blade File

Modify resources/views/welcome.blade.php:

<!DOCTYPE html>  
<html>  
  <body>  
    <div id="app"></div>  
    @vite('resources/js/app.jsx')  
  </body>  
</html>  

✅ Test It: Run npm run dev + php artisan serve. You’ll see your React component!

🔀 Step 2: Add React Router

Install React Router

npm install react-router-dom  

Create Demo Components

• resources/js/pages/Home.jsx:

  export default function Home() { return <h2>🏠 Home Page</h2>; }  
  

• resources/js/pages/About.jsx:

  export default function About() { return <h2>📖 About Us</h2>; }  
  

Set Up Routing

Update resources/js/app.jsx:

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

function App() {  
  const router = createBrowserRouter([  
    { path: "/", element: <Home /> },  
    { path: "/about", element: <About /> },  
  ]);  

  return <RouterProvider router={router} />;  
}  

🚦 Test Routing:

• Visit http://localhost:8000 → See "Home Page".
• Manually go to http://localhost:8000/about → Oops! Laravel blocks it.

🌉 Step 3: Connect Laravel Routes to React Router

The Catch-All Route

Edit routes/web.php:

<?php  

use Illuminate\Support\Facades\Route;  

Route::get('/{any}', function () {  
    return view('welcome'); // Your Blade file with React  
})->where('any', '.*'); // Catch ALL routes  

Why?

• This tells Laravel: "Any route (e.g., /about) should render the React app."
• React Router then handles the rest internally!

✅ Test Again:

• Go to /about → Now shows the About page! 🎉

🔍 Key Concepts Explained

How Routing Works

• User clicks a link: React Router swaps components instantly (no page reload).
• User bookmarks /about: Laravel’s catch-all route serves welcome.blade.php, then React Router renders the About component.

SPA vs. Traditional Sites

💡 Pro Tips

1. API Endpoints: Use Laravel for API routes (e.g., api/user).
2. Authentication: Use Laravel Sanctum for SPA auth.
3. Code Splitting: Speed up your app with React’s lazy().

✨ Conclusion

You just built a Laravel 12 + React SPA with client-side routing! Recap:

• Laravel: Backend + catch-all route.
• React: UI components.
• React Router: Navigation without reloads.

Questions? Drop them below! 👇