How To Install React JS In Laravel Using Laravel Breeze And Inertia JS
React JS is a popular JavaScript library for building user interfaces, and Laravel is a powerful PHP framework for web development. In this article, we will show you how to install React JS in Laravel using Laravel Breeze and Inertia JS.
Step 1: Install Laravel Breeze
Laravel Breeze is a minimal authentication starter kit for Laravel. To install Laravel Breeze, open your terminal and run the following command:
composer require laravel/breeze --dev
php artisan breeze:install
Step 2: Install Inertia JS
Inertia JS is a library that allows you to build single-page applications with Laravel and Vue.js, React, or Svelte. To install Inertia JS, run the following command in your terminal:
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/progress
Step 3: Set up the React Application
Now that we have Laravel Breeze and Inertia JS installed, we can set up the React application. First, create a new Inertia component for the React app:
php artisan inertia:component Example
This will create an Example.vue file in the resources/js/Pages directory. Replace the content of this file with the following code:
import React from 'react'
import Layout from '@/Shared/Layout'
export default function Example() {
return (
<Layout title="Example">
<div>
<h1>Example Page</h1>
<p>This is an example page using React JS</p>
</div>
</Layout>
)
}
Step 4: Update the Routes
Update your routes/web.php file to use the Inertia::render method to render the React component:
use IlluminateSupportFacadesRoute;
use AppHttpControllersExampleController;
Route::get('/', function () {
return view('app');
});
Route::get('/example', [ExampleController::class, 'index']);
Step 5: Create a Controller and Blade View
Create a new controller for the Example page and a corresponding blade view in the resources/views directory:
php artisan make:controller ExampleController
In the ExampleController.php file, add the index method to return the Inertia::render method:
use IlluminateHttpRequest;
use InertiaInertia;
class ExampleController extends Controller
{
public function index()
{
return Inertia::render('Example');
}
}
Create a new blade view in the resources/views directory called app.blade.php:
<html>
<head>
<title>React App</title>
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
<div id="app" data-page="{{ json_encode($page) }}"></div>
</body>
</html>
Step 6: Compile Assets and Run the Server
Compile the assets using the following commands:
npm install
npm run dev
Finally, start the Laravel server:
php artisan serve
Now you have installed React JS in Laravel using Laravel Breeze and Inertia JS. You can start building your React components and pages within your Laravel application.
you are the best : )
Just subbed. Thanks!!
We need more React and Laravel tuts please, thanks
Thank you soo much…
i have this error:
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json"]'?
Please build some app using this stack and creat it's playlist, be hopeful
Great tutorials . Thanks. Please how do I create crud in laravel react using inertia as you rightly set up. Thanks
Simple and straight to the point, thank you very much for the tutorial.
Video suggestion: How to use react+typescript with inertia
Hi from Brazil!