How to Install React Js in Laravel 11 with Bootstrap

by

In this tutorial you will learn how to install and integrate React JS into your Laravel 11 project alongside Bootstrap with this step-by-step guide.

If you’re looking to combine React JS with Laravel for your web development needs, understanding how to seamlessly integrate these technologies is crucial. This guide will walk you through the process of setting up React within Laravel using the laravel/ui package and Bootstrap 5.

What is React JS?
React JS is a powerful open-source JavaScript library primarily used for building user interfaces. Developed and maintained by Facebook and a robust community of developers, React simplifies the creation of dynamic UI components for single-page applications and mobile platforms.

Why Laravel?
Laravel is a popular PHP web framework known for its elegance and simplicity. Laravel follows the model–view–controller (MVC) architectural pattern and is built on the Symfony framework. It provides developers with efficient tools for developing web applications.

To begin integrating React JS into your Laravel 11 project with Bootstrap 5, follow these steps:

# Install Laravel App

To install React in Laravel, We first need to install a brand new Laravel project.

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

Get into the Laravel project.

cd laravel-react

# Install laravel/ui

Laravel/UI is an official package that offers a login and registration user interface scaffolding for React, Vue and jQuery in Laravel project.

Run below command to install laravel ui composer package.

composer require laravel/ui

# Install React in Laravel

We have installed the composer UI package, and now we have to run the given below command to install the React in Laravel.

php artisan ui react

# Install Required Packages

I assume that you have the Node and NPM installed on your development machine. If not then have a look on this tutorial: Downloading and installing Node.js and npm

You can check the Node and NPM installation using the below command.

# for node
node -v

# for npm
npm -v

The following command install all the javascript packages which are required for our project.

npm install && npm install react-bootstrap bootstrap

The above command creates a node_modules folder and automatically installed all the packages that are registered in the package.json file.

# Set Up React Component in Laravel

If you run the laravel app, it won’t load and display the React component in the Laravel view. So, i will create a React component inside the resource/js/User.js and paste the following code in it.

We have also defined a ROOT DOM element 'user' inside the React component. It will fetch any element into the browser’s document object model.

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

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">I'm tiny React component in Laravel app!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default User;

// DOM element
if (document.getElementById('user')) {
    ReactDOM.render(<User />, document.getElementById('user'));
}

We have to register the React component inside the resources/js/app.js file.

require('./bootstrap');

 // Register React components
require('./components/Example');
require('./components/User');

In this step, we will add the compiled CSS path, React Root DOM and the compiled JavaScript files inside the Laravel layout. The div with the id="user" is the same id that we have declared in the document.getElementById('user').

Place the given below code inside the views/welcome.blade.php template.

<!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>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>

    <!-- React root DOM -->
    <div id="user">
    </div>

    <!-- React JS -->
    <script src="{{ asset('js/app.js') }}" defer></script>

</body>
</html>

Finally, we have to run the command to compile the JavaScript and CSS files for Laravel and React.js project.

npm run watch

Your code has been complied, now run the command to view your app in the browser.

php artisan serve