How to get started with Laravel and React Js.
By Siddhant Thapa -2018-08-28

Getting started with Laravel + React is easy now with Laravel version 5.5 which is the next long term support (LTS) version of Laravel (the last being 5.1).

For This, we must understand what is scaffolding for. Which is in prior versions of Laravel only Vue scaffolding is included, this allows to write the frontend code on Vue Js. But with release of Laravel 5.5 new front-end preset options are available for bootstrap and React including Vue.

In fresh installation of Laravel 5.5 you can easily swap your Vue scaffolding to React scaffolding using the php artisan preset react command. The default Mix configuration, components, and all other related files will be updated accordingly.

Now to understand it more let's get started with simple Laravel 5.5 + React demo project.

First choose a directory or folder where you want to place your Laravel project then open a terminal and copy the below command:

composer create-project --prefer-dist laravel/laravel="5.5.*" DemoProject

After successful completion, we need to change Vue scaffolding to React scaffolding by simply running below command.

php artisan preset react

After its completion, you will see message like this in your terminal.

" React scaffolding installed successfully.
Please run “npm install && npm run dev” to compile your new scaffolding."

After successful installation of React in project, we just need to install required dependencies for our project.
To do so, run the command below. this will install all the required dependencies in our project:

npm install

Now our project is ready with React scaffolding. All Vue scaffolding is replaced by React scaffolding and a default React Component is located at

"/resources/assets/js/components/Example.js".

For our demo project we will rename this file to Handler.js, and replace out all the example code stuff with below code snippet:

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; export default class Handler extends Component { render() { return ( <div className="wrapper"> <p>Handler Component</p> </div> ); } } if (document.getElementById('root')) { ReactDOM.render(<Handler></Handler>, document.getElementById('root')); }

Since we renamed the component file i.e Example.js to Handler.js, we also have to go into our "/resources/assets/js/app.js" file and update the name there as well so now instead of requiring the Example.js component, we require our Handler.js component.

require(' ./components/Handler');

Now to display Handler component content in browser, we just need to edit our welcome.blade.php file. This file is located at "/resources/views/welcome.blade.php" . Simply replace out all the example code stuff with below code snippet:

<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel + React</title> </head> <body> <div class="flex-center position-ref full-height"> <div class="container"> <div id="root"></div> </div> </div> <script src="/js/app.js"></script> </body> </html>

In our Handler component we used ReactDOM.render(, document.getElementById('root')); it will find section

<div id="root"></div> which is in our "welcome.blade.php" file and turn it into our Handler component. Everything from Handler component gets compiled down into when you run build script. So next you need to run below build script:

npm run dev

After successful Build, you should be able to see "Handler Component" paragraph in your browser. Now that our component is displaying "Handler Component" paragraph successfully, it means we can add some more custom functionality.

The first thing we'll do is setup the state for the Handler component, where we will store current count. Go to your Handler.js file and this constructor just inside the component declaration.

constructor() { super(); this.state = { count: 0 }; }

Since we have declared the count state, we will display it on the page. So go to your render function and change the "Handler Component" paragraph with our new count state.

render() { return ( <div className="container"> <p>{ this.state.count }</p> </div> ); }

Now, run your build script again to compile everything, and reload your page to see the current count. Since we can't actually interact with it to change the count state, we'll simply add two buttons: one to increase the count and one to decrease it.

<button onClick={this._increment}>+</button> <button onClick={this._decrement}>-</button>

These buttons won't work right now as we haven't created our increment and decrement functions. So let's add those next. Put these two functions right between the constructor and the render function.

_increment() { let count = this.state.count; count++; this.setState({ count: count }); } _decrement() { let count = this.state.count; if(count > 0){ count--; this.setState({ count: count }); } }

Running the increment function will increase the count state by one, while running the decrement function will decrease the count state by one. We also need to bind this functions on constructor as we are using it inside of a function.

constructor() { /* ... */ this._increment = this._increment.bind(this); this._decrement = this._decrement.bind(this); }

Now you can successfully compile your code one more time and have a fully functioning Handler component inside Laravel project. If you check out your browser, you should see the default count of 0 and plus and minus buttons. Clicking on either one should change the count and update the value being displayed just like we would expect.

There you have it, Now you can easily get started using React in all of your Laravel projects.

you can check out the full source code of this demo project over on GitHub ttps://github.com/JCode23/Laravel-React

Intrested? Lets build something great together.

Enquiry For Project