How using React in a Laravel application - Tutorial
Tags: react, laravel, beginners, tutorial
Published: 2019-07-25 14:25:18

Reactive applications are a big part of the web world, that's why it is necessary to use the latest technologies to deploy.  Laravel had integrated a Scaffolding to deploy React JS since version 5.5. In this tutorial, we’ll learn how to integrate React and Laravel.

Actually, it is really simple so let's start it!

<b>Installing Laravel</b>

To create a new project in Laravel, the first thing we've to do is download the Laravel installer using Composer:

 $ composer global require laravel/installer

If you don't have composer installed please go to: https://dev.to/lvtdeveloper/installing-virtual-environment-with-laravel-homestead-tutorial-4p32
In this article I explain how to do it so check it out.

The first command to create our project is "laravel new" followed by the name we want to assign to the project. For instance, "laravel new dutylist" will create a directory named dutylist that contains a new Laravel installation with all of dependencies already installed.

$ laravel new dutylist

![](https://thepracticaldev.s3.amazonaws.com/i/wj51oxn3uxj83xu5goh4.png)

Once that’s is done enter to the new directory with the command:

$cd dutylist

<b>Using React in a Laravel</b>

By default, Laravel applications contain an ExampleComponent.vue Vue component located in the resources/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js file:

![](https://thepracticaldev.s3.amazonaws.com/i/3bfb0cschhc1ow54wsm7.png)

![](https://thepracticaldev.s3.amazonaws.com/i/rfz3qkpuh127qcu2967q.png)


We need to change the default Vue.js scaffolding to React.js with the following command:

![](https://thepracticaldev.s3.amazonaws.com/i/s30uyslgvg2327hj16ca.png)

Now you can see that Laravel create a react component in the file Example.js located in the resources/js/components directory:

![](https://thepracticaldev.s3.amazonaws.com/i/en64cpcow8s3p0soo3gf.png)

![](https://thepracticaldev.s3.amazonaws.com/i/n857j24br7cekon5wcrl.png)

Run the command "npm install" to install all the javascript packages necessary for our project.

![](https://thepracticaldev.s3.amazonaws.com/i/j94h2ooc0geblwa51e97.png)

When we install a dependency with npm install, a node_modules directory is automatically generated where the installed packages are saved. Also it is generate a  package-lock.json file who is responsible for keeping track of the changes made within node_modules or when changes are made to the file package.json

![](https://thepracticaldev.s3.amazonaws.com/i/6m798v4q1orw91y5mo4v.png)

And now we start the app with the command:

![](https://thepracticaldev.s3.amazonaws.com/i/izf5li4vnfzc9u2fg5nb.png)

Open the browser in the path "http://localhost:8000" and  you can see the default view by Laravel 

![](https://thepracticaldev.s3.amazonaws.com/i/ew5bsbkbkwtplu0bgccb.png)


Let's change this view for a view using react.

Create an index.js file inside the resources/js/components directory

![](https://thepracticaldev.s3.amazonaws.com/i/zwyb2p6ra0v7sui2j7lf.png)

Copy all the content from the Example.js file to the index.js and make some changes:

![](https://thepracticaldev.s3.amazonaws.com/i/ly3l7c5bhc5j1raglup8.png)

Inside the app.js we add the new component

![](https://thepracticaldev.s3.amazonaws.com/i/qoptc1nhdiwrfi96glcu.png)

In order to render any element into the Browser DOM, we need to have a container or root DOM element. In this case will be <div  id="dutylist"></div> and everything inside it will be managed by React DOM. This change will be inside the welcome.blade.php located in the resources/views 

![](https://thepracticaldev.s3.amazonaws.com/i/wl1dmk0rpswibn61f4pu.png)

To show a view through React JS, we need to compile JavaScript files using Laravel Mix with the "npm run dev" command:

![](https://thepracticaldev.s3.amazonaws.com/i/mrbqoh6f3laet536hegp.png)

And now we have a Laravel app using react.js 

![](https://thepracticaldev.s3.amazonaws.com/i/linw6isascc2k7nfrx88.png)

Thanks for reading!
Have a nice day, coders💜