How to Install ReactJS in Laravel?

Hello Laravel Developers,

This blog will teach how to Install React in a Laravel project.

First, let’s understand ReactJS.

What is ReactJS?

ReactJS is a popular JavaScript library used by front-end developers for web development. It helps to build user interfaces based on UI components for website and web applications.

The Laravel UI package makes it possible to install basic bootstrap, react js, Vue js, and angular js. They also offer their login and registration with all javascript frameworks or libraries. Laravel 8 provided the easiest way to work with bootstrap, react, Vue, and angular js.

Let’s start with the steps to install React in Laravel.

Steps to Install ReactJS in Laravel:

Step 1: Install Laravel

Open terminal and run the following command to install a fresh Laravel project.

$composer create-project laravel/laravel reactjs

Or, if you have installed the Laravel Installer as a global composer dependency, then run the following command

$laravel new react-js

Step 2: Install Laravel UI

While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.

$composer require laravel/ui

Step 3: Install React or Install React with Auth

Once the Laravel/UI package has been installed, you may install the frontend scaffolding using the UI Artisan command:

$php artisan ui react

Or, if you would like to install login and registration of particular javascript frameworks or libraries, you need to run the following command:

$php artisan ui react --auth

Step 4: Install the required package dependency

To install react package dependency in your project, run the below command into your terminal.

Install npm dependency:

$npm install

and

$npm run dev

Step 5: Test in localhost

Now add the below line to your welcome.blade.php file:

Path – resources/views/welcome.blade.php

<div id=”example”></div>
<script src="{{ asset('/js/app.js') }}"></script>

Now start the Laravel server using the following command.

$php artisan serve

See the output on http://127.0.0.1:8000 

Kudos! You have successfully installed ReactJS in Laravel.

Conclusion:

Hope the above guide helped you in installing ReactJS in Laravel. If you face any problem, connect with me through the comments without hesitation. Hire Laravel Developers for custom development and integration. Share the article with your friends and stay updated for more Laravel tutorials.

Subscribe to Notifications