React.js is the most popular front-end JS framework. There are a few ways to use React in Laravel projects, and in this tutorial, we will cover so-called RILT stack with examples, also touching the alternative of using Next.js with Laravel API.
So, if you're a Laravel back-ender and want to get familiar with React, let's begin.
Setting Up Your First RILT Stack Project
The RILT stack (React, Inertia, Laravel, Tailwind) comes pre-configured in Laravel 12's React starter kit with React 19, TypeScript, Tailwind 4, and shadcn/ui components. Here's how to get started:
laravel new my-react-app # Choose React when prompted for starter kit # Navigate to project and install dependenciescd my-react-appnpm install && npm run buildcomposer run dev
Your application will be available at http://localhost:8000 with authentication pages already working.
Understanding Your First React Component
Let's examine a simple React component to understand the fundamentals. The majority of frontend code is located in the resources/js directory.
resources/js/pages/welcome.tsx:
import { Head, usePage } from '@inertiajs/react';import { type SharedData } from '@/types'; export default function Welcome({ laravelVersion, phpVersion, message}: { laravelVersion: string; phpVersion: string; message: string;}) { const { auth } = usePage<SharedData>().props; return ( <> <Head title="Welcome" /> <div className="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50"> <div className="relative min-h-screen flex flex-col items-center justify-center"> <div className="relative w-full max-w-2xl px-6 lg:max-w-7xl"> <header className="grid grid-cols-2 items-center gap-2 py-10 lg:grid-cols-3"> <h1 className="text-3xl font-bold"> Hello from React! </h1> {auth.user ? ( <span>Welcome back, {auth.user.name}!</span> ) : ( <span>Please log in to continue</span> )} </header> <main className="mt-6"> <p>{message}</p> <p>Laravel version: {laravelVersion}</p> <p>PHP version: {phpVersion}</p> </main> </div> </div> </div> </> );}Component Breakdown
Import Statements:
-
Headfrom Inertia handles page metadata like title and meta tags -
PagePropsprovides TypeScript typing for component props
Component Function:
- Receives props including authentication data and version information
- Uses destructuring to extract specific props with TypeScript typing
JSX Return:
- Wrapped in React Fragment (
<>...</>) to return multiple elements - Uses Tailwind CSS classes for styling
- Conditional rendering shows different content for authenticated users
How Inertia.js Bridges Laravel and React
Inertia.js allows you to...
I tried to follow along but the version you are using and the one I have “inertiajs/inertia-Laravel 2.0.3, on Laravel framework 12.20.0 are just so different that I can’t do so. can you update this project please?
I am using Laravel Herd Pro to create the project
I don't understand what you want to update? This tutorial is only a week old, of course, it uses inertia v2.
This is strata out the box sort speak, running Herd and chousing sites/add/new Laravel project then next. then chousing React next giving it a name and creating the project.
The first thang is you have a file: app/Http/Controllers/WelcomeController.php that does not exist in my version.
Next the routings are different you have:
Route::get('/', [WelcomeController::class, 'index'])->name('welcome');
and what I have is:
Route::get('/', function () { return Inertia::render('welcome'); })->name('home');
Next How Do I create the resources/js/pages/tasks/create.tsx file?
This is my first time working with React and I do not know what command to use to create the different files for it.
P.S. this is on a windows 11 operating system.
Do you know how to create a file manually? That's how. There's no command to create js files. As for controller, create it. You must know how laravel works first.
Dear Nerijus, please be more user / developer friendly on your comments so to keep a healthy communication environment within the thread in continuation. In this case the surtain tutorial will keep it's pace to help the others to evolve and spread positive feedback for the same course.