How to Install and Configure React 18 Application in Laravel 10

In this tutorial, I'll teach you How To Install and Configure a Simple React 18 Application in Laravel 10 with Vite 3. You will learn it step-by-step from scratch. At the end of this tutorial, you will be having clear understanding and will be able to create and setup a basic React 18 app in laravel 10.

What is Vite?

Vite is a Next Generation Front-end Development Tool that is used for Modern Web Applications that focuses on speed and performance by improving the development experience. Vite leverages new advancements in its ecosystem by making use of native browser ES import to enable support for modern browsers without a build process.

How to create and configure a simple React 18 application in Laravel 10?

Follow the below mentioned steps to get it done:

Step 1: Install Fresh Laravel 10 Application

First of all, let's install a fresh laravel 10 application. In your terminal execute the following command:

composer create-project laravel/laravel l10react18vite3app

Step 2: Install NPM Dependencies

Next, let's install all the necessary node packages by using Node Package Manager (NPM). Run below given command in your terminal to do so:

npm install

Step 3: Install React 18 and ReactDOM 18

Next, we need to install React 18 and ReactDOM 18 for our application.

What is ReactDOM?

ReactDOM is a complimentary JavaScript library to React which glues React to the Browser DOM. ReactDOM is a specific package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page.

Run the following command in terminal to install React and ReactDOM:

npm install react@latest react-dom@latest

Step 4: Install vitejs/plugin-react package

Next, we have to install vitejs/plugin-react package in our application. This package offers required dependencies to run react application on vite. The vitejs/plugin-react enables Fast Refresh in development environment with the help of automatic JSX runtime.

Run the following command in terminal to install vitejs/plugin-react and vitejs/plugin-react-refresh:

npm install @vitejs/plugin-react
npm install @vitejs/plugin-react-refresh

Step 5: Setup vite.config.js

Next, we have to setup vite configuration. Open vite.config.js and copy below code in it:

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

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

Step 6: Create React 18 Component and Setup resources/js/app.js

Next, we need to create a file resources/js/components/App.jsx and copy below code in it:

import React from "react";
import { createRoot } from 'react-dom/client';
export default function App(){
    return(
        <div className="container text-center">
            <h1>How to Install and Configure React 18 Application in Laravel 10 with Vite 3 - LaravelClick</h1>
            <blockquote className="text-center h5">
            Hi friends, in this tutorial you have learnt how to install and configure a simple React 18 application in Laravel 10 with Vite 3.<br />
            To learn more, please visit <strong>Recommended <a href="https://www.laravelclick.com/category/laravel">Laravel Tutorials</a></strong> and improvise yourself.
            </blockquote>
        </div>
    );
};
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Next, we have to import resources/js/components/App.jsx inside resources/js/app.js file as follows:

import './bootstrap';
import App from "./components/App.jsx";

Step 7: Connect React 18 Component with Laravel blade file

Next, we have to connect our React 18 component with a laravel blade file. Inside resources/views folder, you need to create a blade file app.blade.php and copy below code in it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How To Install and Configure a Simple React 18 Application in Laravel 10 with Vite 3</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    @vite('resources/css/app.css')
</head>
<body>
    <div id="root"></div>
    @vite('resources/js/app.js')
</body>
</html>

Step 8: Setup Laravel Routes

Next, you need to have modified the routes/web.php file as follows:

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
    return view('app');
});
?>

Step 9: Setup APP_URL in Laravel .env file

Next, you need to modify APP_URL variable value in .env file as follows:

APP_URL=http://127.0.0.1:8000

Step 10: Start the Vite and Laravel Development Servers

Weldone, now let's start our development server to test our application.

Run below command in terminal to start vite development server:

npm run dev

Run below command in terminal to start laravel development server:

php artisan serve

Open below url in browser:

http://127.0.0.1:8000/

OUTPUT

How To Install React 18 in Laravel 10 with Vite 3