Hello Laravel Developers,
This blog will teach how to Install React in a Laravel project.
First, let’s understand ReactJS.
Contents
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.
|
1 |
$composer create-project laravel/laravel reactjs |
Or, if you have installed the Laravel Installer as a global composer dependency, then run the following command
|
1 |
$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.
|
1 |
$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:
|
1 |
$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:
|
1 |
$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:
|
1 |
$npm install |
and
|
1 |
$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
|
1 2 |
<div id=”example”></div> <script src="{{ asset('/js/app.js') }}"></script> |
Now start the Laravel server using the following command.
|
1 |
$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.
