Laravel + InertiaJS + React: A modern fullstack approach

Have you ever wanted to build apps using Laravel on the backend and React on the frontend, but without the complexity of creating full JSON APIs, handling tokens, and making AJAX calls for everything?

Meet Inertia.js the glue between Laravel and React that helps you build modern apps without needing a separate API layer.

What is Inertia.js ?

Inertia.js is a library that lets you build Single Page Applications (SPAs) using frameworks like Laravel + React/Vue/Svelte without building a traditional JSON API.

Think of Inertia as a client-side router that works directly with your Laravel routes, passing props from your controller directly into your React components.

How its work ?

You still use Laravel controllers, but instead of returning view(), you return Inertia::render().

In your React components, you receive the data as props.

Setup

composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-react


In resources/js/app.jsx:

import { createRoot } from 'react-dom/client' import { createInertiaApp } from '@inertiajs/inertia-react' createInertiaApp({ resolve: name => require(`./Pages/${name}`), setup({ el, App, props }) { createRoot(el).render(<App {...props} />) }, }) 

Creating first page

Laravel Controller

use Inertia\Inertia; public function index() { $users = User::latest()->get(); return Inertia::render('Users/Index', [ 'users' => $users, ]); } 

React Componente:
resources/js/Pages/Users/Index.jsx

import React from 'react' import { usePage } from '@inertiajs/inertia-react' export default function Index() { const { users } = usePage().props return ( <div> <h1>User List</h1> <ul> {users.map(user => ( <li key={user.id}>{user.name} ({user.email})</li> ))} </ul> </div> ) } 

Forms with Inertia + React

Laravel Controller:

public function store(Request $request) { $request->validate([ 'name' => 'required', 'email' => 'required|email|unique:users', ]); User::create($request->only('name', 'email')); return redirect()->route('users.index')->with('success', 'User created!'); } 

React Form:

import { useForm } from '@inertiajs/inertia-react' export default function CreateUser() { const { data, setData, post, errors } = useForm({ name: '', email: '', }) const handleSubmit = e => { e.preventDefault() post('/users') } return ( <form onSubmit={handleSubmit}> <input type="text" value={data.name} onChange={e => setData('name', e.target.value)} placeholder="Name" /> {errors.name && <div>{errors.name}</div>} <input type="email" value={data.email} onChange={e => setData('email', e.target.value)} placeholder="Email" /> {errors.email && <div>{errors.email}</div>} <button type="submit">Save</button> </form> ) } 

Bonus: Sharing data with handleInertiaRequests

In AppServiceProvider:

use Inertia\Inertia; public function boot() { Inertia::share([ 'auth' => fn () => [ 'user' => auth()->user(), ], 'flash' => fn () => [ 'success' => session('success'), ], ]); } 

In React:

const { auth, flash } = usePage().props 

• It’s ideal for building modern SPAs in a clean and simple way.

• Inertia.js connects Laravel with React without building a JSON API.

• You use Laravel controllers and React components like traditional views.

Conclusion

Inertia.js is a great choice if you want to build modern SPAs without losing the power and simplicity of the Laravel ecosystem.

With Inertia, you can:

• Enjoy React’s flexibility and interactivity;

• Keep using Laravel’s routes, controllers, validation, and auth;

• Avoid the extra complexity of managing separate REST or GraphQL APIs.

If you're coming from Blade and want to move into the React world, Inertia is the most natural and productive path to start.