React JS inside Laravel Blade: A Seamless Approach to Modern Web Development

Sep 28, 2024

In today’s fast-paced web development world, using the best tools to build interactive user interfaces is essential. Laravel, a powerful PHP framework, is known for its elegant syntax and robust features, while React JS is the top choice for creating dynamic and responsive components. By integrating React into Laravel Blade views, developers can utilize the strengths of both technologies, enhancing their applications with better functionality and user experiences.

Many modern web applications need specific components that benefit greatly from React’s state management and virtual DOM capabilities. By embedding React directly into Laravel Blade, you can create dynamic interfaces that respond to user interactions while keeping your Blade templates clean. This integration allows a smooth development process, letting you use React’s powerful ecosystem alongside the familiar Laravel workflow.

In this blog post, we’ll explore the practical steps to set this up in your projects. Whether you want to add a complex UI component or improve user engagement, combining these two technologies can offer new possibilities for your web applications. Let’s dive in!

Install React

Make sure you have React and React DOM installed in your project.

npm install react react-dom

Set Up `vite.config.js` for React

Ensure your vite.config.js is set up to work with React and Laravel. We need to provide app.jsx in input configuration. In this example we have created, app.tsx in resources/js/react directory.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Create Your React Component

In the resources/js/react directory, create a App.jsx for your React component:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return <h1>Hello from React in Laravel Blade!</h1>;
}

export default App;

if (document.getElementById('react-app')) {
    const container = document.getElementById('react-app');
    const root = createRoot(container); // createRoot(container!) if you use TypeScript
    root.render(<App/>);
}

Once this is created, we need to modify our blade view file and incorporate this.

Modify Blade View

Create or modify a Blade view to include the React component.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React in Laravel</title>
    @vite('resources/js/app.jsx')  <!-- Link to the React entry file -->
</head>
<body>
    <div id="react-app">
    </div>
</body>
</html>

Build or Serve Your Assets

Run the following command to serve the vite dev server.

npm run dev

This will automatically compile your assets and refresh the page when changes are detected.

Access the Page

Visit your controller route in your browser, and you should see your React component rendered inside the Blade view.