install react js in  laravel 9 with vite

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 [email protected] [email protected]


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

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 Rest Api with Vue 3 Composition Api CRUD 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