In this section we will install react js in laravel 9 with vite. In laravel 9.19 come with vite tool. There is two way you can install react in laravel 9. first you can install react js from scratch or you can use laravel breeze inertia react. We will see both.
1. Install React in Laravel With Vite From Scratch
Create Laravel Project
composer create-project laravel/laravel laravel-vite-react
Install latest version of react js:
npm install react@latest react-dom@latest
Install React Vite in laravel
npm i @vitejs/plugin-react
if not working then --force
npm i @vitejs/plugin-react --force
Add path vite react plugin in vite.config.js.
Before vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
After vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.jsx',
],
refresh: true,
}),
react(),
],
});
Next, you need add @vite directives welcome.blade.php.
resources/view/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 vite with react</title>
@viteReactRefresh
@vite('resources/js/app.jsx')
</head>
<body>
<div id="app"></div>
</body>
</html>
Create page Folder and add Home.jsx file like resources/js/Page/Home.jsx and rename app.js to app.jsx.
resources/js/app.jsx
import './bootstrap';
import '../css/app.css'
import ReactDOM from 'react-dom/client';
import Home from './Page/Home';
ReactDOM.createRoot(document.getElementById('app')).render(
<Home />
);
resources/js/Page/Home.jsx
export default function Home() {
const heading = "Laravel 9 Vite with React JS";
return <div> {heading}</div>;
}
You need to npm run build or npm run dev command to create asset react file.
npm run dev
and
php artisan serve
laravel 9 vite react
2. Install React in Inertia Using Laravel Breeze
Create Laravel Project
composer create-project laravel/laravel laravel-inertia-react
Next, you need to run below command in your terminal
composer require laravel/breeze --dev
Run below command to Install Inertia react.
php artisan breeze:install react
// and...
npm install
npm run dev
php artisan migrate
You need to npm run build or npm run dev command to create asset react file.
npm run dev
and
php artisan serve
Read Also
Laravel 9 Add Simple Sidebar with Tailwind CSS Example
How to Use Carousel Slider in Laravel 9 Example
Laravel 9 Posts with Tags Many to Many Relationships Example
Laravel 9 Insert Category in Posts CRUD Example
How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS
Laravel 9 Simple Image Upload in Ckeditor 5 Example
Laravel 9 Flash Message Timeout and Hide Message Example
Install & Setup Markdown Editor in Laravel 9
Nuxt 3 Data Fetching Using Laravel 9 Api Example
Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS
Laravel 9 with Tailwind CSS Form Validation Example
Laravel 9 Backend Api Connect with Vue 3 Using Axios Example
Laravel 9 Authentication with Next js Example
Laravel 9 Sanctum Authentication with Nuxt JS Example
Laravel 9 Simple Search with Pagination Example
Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel
How to Fix and Clean Code Style in laravel 9
Laravel 9 Image File Upload Example
3 Way to Create Slug in Laravel 9 without Package
How to Add Dark Mode in Laravel 9 with Tailwind CSS
