How to add & integrate React js to laravel application easily

ReactJS is a client dynamic framework which is very fast. 

  • We can use react-js inside our laravel ui to render out our client side to users.

Laravel enables us to use laravel ui to add ability for us to use front end framework like react js using composer

composer require laravel/ui

Use the php aritisan command to add the react js framework to your laravel application

php artisan ui react

Install the Required packages

"npm install && npm run dev" to compile your fresh scaffolding.

After the above procedures we then run our application

npm run dev 
or
npm run watch


How to use react js components in laravel

    Start your laravel project and move into the resource folder, inside the resource folder locate the views folder and open the welcome.php file

resources\views\welcom.blade.php 
Paste in these lines of code in 

welcome.blade.php

<!doctype html> 
<html lang="{{ str_replace('_', '-', app()->getlocale()) }}">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>instagram chat app</title>

<link href="{{ asset('css/app.css') }}" rel="stylesheet" />

<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=nunito:wght@400;600;700&display=swap" rel="stylesheet">

</head>

<body class="app">
<div id="app"></div>
</body>

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

</html>


Inside the welcome.blade.php you can clearly see that we have the #app html code id, which makes it possible for react js to inject all the html static codes dynamically inside the element. That said it was possible with <script src="{{ asset('js/app.js') }}"></script> which is a compiled javascript code that injects inisded the element.

Open app.js and which is inside the resources/js folder.

resources\js\app.js

At the bottom of the app.js code you'll see require('./components/App');

require('./components/App');


Open the Example.js component and change the document element.id to #app

if (document.getElementById('app')) { 
    ReactDOM.render(<Example />, document.getElementById('app'));
}


Finanlly run your application from the command line and your react compoments will be compiled and injected inside the #app div element.