If you optate to build a React application with Laravel, then the first and foremost thing is you must ken how to install React in Laravel 7. We will utilize laravel/ui Package to install react in laravel with Bootstrap 4.
If you are a neophyte in React development, then you must check out our detailed tutorial: Engender React MERN Stack CRUD Web Application.
React is an open-source JavaScript library for developing user interfaces. It is managed by Facebook and a community of individual developers and organisations. React provides a base in the app development for single-page or mobile applications.
Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller architectural pattern and based on Symfony.
Install Laravel Project
To install React in Laravel, We first need to install a brand new Laravel project
composer create-project laravel/laravel --prefer-dist laravel-react-js
Get into the Laravel project.
cd laravel-react-js
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.
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
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 7
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
