In this tutorial, we are going to look at how to easily install React in Laravel 5.5 Using the new frontend presets feature which has come to Laravel 5.5
Installing Laravel
Prerequisites:
- Composer
- PHP 7.0 or greater (Laravel 5.5 now requires this by default)
- A HTTP server such as NGINX or Apache to run the site or use a VM such as Homestead, Valet etc...
You can refer to the installation docs for specific server requirements.
First and foremost, we must install Laravel. In order to make this easier, we are going to leverage the power of the Laravel installer.
The first step is to download the laravel installer using Composer like so:
composer global require "laravel/installer"
Once the laravel installer is installed, go to the directory that you want your project to be in and we will using the laravel new command to create a new laravel
application.
laravel new reactapp
The laravel new command will then create your laravel application and pull in dependencies using composer. It will likely download several packages in order to complete the installation.
If everything installs correctly then you will see
Application ready! Build something amazing.
Your reactapp laravel was created successfully but we haven't installed React yet! Let's do that now...
Hang on, what are frontend presets?
Laravel 5.5 introduced the concept of Frontend Presets to the Laravel framework. Front-end presets provide the scaffolding necessary for creating
modern web applications using popular Frontend frameworks such as Reactjs and Vuejs. By default from Laravel 5.4, Laravel shipped with an
example Vue component in /resources/assets/js/components. The idea here was to give developers a starting point for working with Vue in their laravel
applications. This scaffolding was very popular with Vue developers and frontend presets just extend this idea by allowing
providing more options for frontend scaffolding.
How to install the React frontend scaffolding
In order to install the react frontend scaffolding, simply go to your reactapp directory.
cd reactapp
and now you can use artisan to run the preset react command like so:
If installed correctly then you will see the React scaffolding message. In order to ensure that our changes are compiled and we have all the dependencies installed, we
will use npm. If you don't have npm then you can follow the installation instructions here.
In order to install the required dependencies, just run the following:
npm install && npm run dev
If everything installed correctly, you should see the following output that everything compiled successfully.
That's it!
You now have React installed with Laravel 5.5!
In order to verify, go to resources/assets/js/components/Example.js
Your example.js file should no longer be a Vue component but should import React and the ReactDOM and be an example react component.
You should see the following Example.js
{% highlight js %}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-default">
<div className="panel-heading">Example Component</div>
<div className="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
{% endhighlight %}
Where to go from here?
Now that you have Laravel 5.5 and React installed. The next step is to develop something or you can extend the configuration further by setting up Redux, ReactRouter etc... I will be writing a tutorial series in the future on how to develop
a SPA using a Laravel 5.5 API backend and React frontend so stay tuned for that.
Happy coding!
Comments