• (+91) 9409548155
  • support@appdividend.com
Laravel

How to Integrate React 18 in Laravel 11 [Step-by-step Guide]

  • 26 Sep, 2024
  • Com 45
How to Integrate React.js in Laravel 11

Integrating React.js’s latest version with Laravel is a challenging task.

Prerequisites

  1. PHP (Version 8.1 or higher)
  2. Composer
  3. Node.js and NPM

I am writing this step-by-step guide to help you develop a Laravel application with React using Vite for asset building.

Step 1: Install Laravel 11

composer create-project --prefer-dist laravel/laravel larareact

Step 2: Install the correct npm packages correctly

While integrating Laravel with React, I was going through tons of errors which I solved via lots of different packages and configurations! In this article, I am sharing my experience and expertise with you guys so it can be very easy and save you lots of time.

Before going any further, there are some packages you need to install in order to integrate React.js 18 in Laravel 11 correctly!

Here is my package.json file that will help you install it correctly and make your project smooth.

{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
 "devDependencies": {
   "@popperjs/core": "^2.11.6",
   "@vitejs/plugin-react": "^2.2.0",
   "axios": "^1.1.2",
   "bootstrap": "^5.2.3",
   "laravel-vite-plugin": "^0.7.5",
   "react": "^18.3.0",
   "react-dom": "^18.3.0",
   "sass": "^1.56.1",
   "vite": "^4.0.0"
 },
 "dependencies": {
   "@vitejs/plugin-react-refresh": "^1.3.6"
 }
}

Now, run the below command to install all the libraries from the node package manager.

npm install

Step 3: Install the laravel/ui package

Go inside the larareact project folder and install the laravel/ui package using the below command.

composer require laravel/ui

Install the laravel:ui package

Step 4: Configuring React in Laravel

Now that we have installed the composer UI package, we have to run the below-given command to set up React in Laravel.

php artisan ui react

Go to the vite.config.js file and import the ‘@vitejs/plugin-react-refresh’ plugin.

The final vite.config.js file looks like the below code.

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

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

Step 5: Starting your servers

You can go to the root of the laravel project, open the terminal or command line and start the laravel and development server, which will use hot load and update the javascript files.

npm run dev 

php artisan serve

Make sure that both of these servers are running!

Step 6: Setting Up React Component

After running the php artisan ui react command, inside your resources >> js folder, there is one folder called components. Inside that folder, create a jsx component called “User.jsx” and add the code below to that file.

import React from 'react';
import { createRoot } from 'react-dom/client';

function User() {
 return (
   <div className="container mt-5">
     <div className="row justify-content-center">
       <div className="col-md-8">
         <div className="card text-center">
           <div className="card-header"><h2>React Component in Laravel</h2></div>
           <div className="card-body">Thanks guys! Integrating react in Laravel is hard!</div>
         </div>
       </div>
     </div>
   </div>
 );
}
export default User;

const rootElement = document.getElementById('user')
const root = createRoot(rootElement);

root.render(<User />);

Now, import the User.jsx component inside the resources >> js >> app.js file.

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */
import './bootstrap';

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import './components/Example';
import './components/User';

Step 7: Modify the blade file to display the component

The final step is to modify a blade file that will include the react component, which will display the webpage by the laravel server.

Write the below code inside the app.blade.php file.

<!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>
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
  </head>
  <body class="antialiased">
    <div id="user">
    </div>
  </body>
</html>

Save the file and make sure that both the “npm run dev” and “php artisan serve” servers are running without errors.

If everything works fine, go to this URL: http://localhost:8000/, and you will see this output!

Integrating React component in Laravel

That’s it.

Post Views: 1,458
User Avatar
Krunal Lathiya

With a career spanning over eight years in the field of Computer Science, Krunal’s expertise is rooted in a solid foundation of hands-on experience, complemented by a continuous pursuit of knowledge.

Extracting Text from a PDF File in Python
How to Extract Text from XML File in Python