How to Add React js to Laravel 10 with Vite

1 year ago admin Laravel

In this tutorial, we will see how to add React js to Laravel 10 with Vite, since version 9.19 Laravel has moved from Webpack to Vite which becomes the default frontend asset bundler for Laravel applications.


Add packages to our project

First of all, I assume that you have already installed a fresh Laravel application, next we will add react, react-dom, and vitejs/plugin-react to our project.

                                                    
                                                                                                                
yarn add react@latest react-dom@latest
yarn add @vitejs/plugin-react                                                

Update the file vite.config.js

Next, inside the file vite.config.js, add React to the plugins array.

                                                        
                                                                                                                        
                                                                                                                import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        react(),
        laravel({
            input: [
                'resources/js/app.jsx',
            ],
            refresh: true,
        }),
    ],
});                                                                                                      



Create the home component

Inside the js folder let's create a new file 'Home.jsx', and add the code below.

                                                        
                                                                                                                        
      
export default function Home() {
    return <div className="container">
        <div className="row my-5">
            <div className="col-md-8 mx-auto">
                <h1> Add React js to laravel 10 with vite</h1>
            </div>
        </div>
    </div>;
}                                                                                                          

Update the file app.js

Next, rename the file app.js to app.jsx, let's import the home component and add it to the app.

                                                        
                                                                                                                        
import ReactDOM from 'react-dom/client';        

import Home from './components/Home';

ReactDOM.createRoot(document.getElementById('app')).render(     
    <Home />        
);                                                                                                          

Update the welcome page

Next, update the file welcome.blade.php, we add the link to the app.jsx file.

Now you can run php artisan serve and npm run dev and everything will work fine you will see the content of the home component on the welcome page.

Demo

                                                        
                                                                                                                        
                                                                                                                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Home</title>
</head>
<body>
    <div class="container" id="app">
    </div>
    @viteReactRefresh
    @vite(['resources/js/app.jsx'])
</body>
</html>                                                                                                      

Related Tuorials

How to Prevent the Loop Incrementing Operator from Resetting Back to 1 in the Next Pagination Pages in Laravel

In this lesson, we will see how to prevent the loop incrementing operator from resetting back to 1 i...


How to Logout a User from the Other Devices in Laravel 11

In this lesson, we will see how to logout a user from the other devices in Laravel 11, sometimes you...


How to Logout a User from the Current Device in Laravel 11

In this lesson, we will see how to logout a user from the current device in Laravel 11, sometimes yo...


How to Import Multiple Classes from a Single Namespace in Laravel

In this lesson, we will see how to import multiple classes from a single namespace in Laravel by add...


Laravel 11 Livewire CRUD Application Tutorial Part 2

In the second part of this tutorial, we will display all the tasks on the home page and later we wil...


Laravel 11 Livewire CRUD Application Tutorial Part 1

This tutorial will show us how to create a Laravel 11 Livewire CRUD application. The user can c...


How to Conditionally Include a Blade Template in Laravel

In this lesson, we will see how to conditionally include a blade template in Laravel.Sometimes,...


How to Include a Blade Template Only if it Exists in Laravel

In this lesson, we will see how to include a blade template only if it exists in Laravel.Sometimes,&...


How to Pass a Variable to Include in Laravel

In this lesson, we will see how to pass a variable to include in Laravel. Sometimes, we want to pass...


How to the Get the Previous and Next Posts in Laravel

In this lesson, we will see how to get the previous and next posts in Laravel, sometimes when you ge...