What are you looking for?
Vite is a high-speed development tool used for bundling CSS and JavaScript files in Laravel applications. It seamlessly integrates with Laravel through an official plugin and Blade directive, facilitating easy loading of assets in both development and production environments.
Requirements:
npm i
npm install react@latest react-dom@latest
npm i @vitejs/plugin-react
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(),
],
});
Route::get('/', function () {
return view('app');
});
App vite directives and div with id app here is example.
<!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>
import "./bootstrap";
import "../css/app.css";
import ReactDOM from "react-dom/client";
import Home from "./Pages/Home";
ReactDOM.createRoot(document.getElementById("app")).render(<Home />);
resources/js/Pages/Home.jsx
import React from "react";
const Home = () => {
return <div>Home</div>;
};
export default Home;
npm run dev
php artisan serve
By following all these steps you will be able to setup and use React in Laravel.