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:
Handler Component
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:
In our Handler component we used
ReactDOM.render(
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.
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.
{ this.state.count }
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.
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.
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.
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