How to Add React js to Laravel 12 with Vite
In this tutorial, we will see how to add React JS to Laravel 12 with Vite. Since version 9.19, Laravel has moved from Webpack to Vite, which became the default front-end asset bundler for Laravel applications.
Install the packages
First of all, I assume that you have already installed a fresh new Laravel 12 application. We will add react, react-dom, and vitejs/plugin-react to our application.
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, import and 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/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
]
});
Create the home component
Inside the js folder, let's create a new file 'Home.jsx' and add the code below inside.
import React from "react"
export default function Home() {
return (
<div className="container">
<div className="row my-5">
<div className="col-md-8 mx-auto">
<h1 className="text-danger"> Add React js to laravel 12 with vite</h1>
</div>
</div>
</div>
)
}
Update the file app.js
Next, rename the file app.js to app.jsx. Finally, import the home component and add it to the app.
import './bootstrap';
import React from "react"
import ReactDOM from 'react-dom/client';
import Home from './Home';
ReactDOM.createRoot(document.getElementById('app')).render(
<Home />
);
Update the welcome page
Next, update the file welcome.blade.php, where 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.
<!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</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.jsx')
</body>
</html>