React.js in Laravel: Main Things You Need to Know

You're reading a FREE PREVIEW of a PREMIUM tutorial.
Login Or Join Premium ($129/year or $29/mo)

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 dependencies
cd my-react-app
npm install && npm run build
composer 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:

  • Head from Inertia handles page metadata like title and meta tags
  • PageProps provides 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...

The full tutorial [14 mins, 2743 words] is only for Premium Members

Login Or Become a Premium Member for $129/year or $29/month
What else you will get:
  • 83 courses
  • 96 long-form tutorials
  • access to project repositories
  • access to private Discord

Recent New Courses