React is one of the most popular Javascript frameworks, and is currently being integrated into the Drupal core and contrib modules, and is a central part of the forthcoming WordPress Gutenberg editing system, and widely used in other PHP applications including Laravel.

One of the biggest barriers to getting started with React is the necessary tooling — notably Babel and webpack and its configuration. Luckily, Laravel and Laravel Mix make it easy to create a sandbox to experiment in React without getting bogged down in lots of those details.   Let’s create a simple Laravel application running in Lando with a React front-end.

What you will need

Many of us are using Lando for our local development environments, so we will use Lando for our testbed.  If you need to install it, here is the installation page: https://docs.devwithlando.io/installation/installing.html

We will be using composer to install Laravel: http://getcomposer.org

You should ensure that Node.js and npm are installed on your machine.  You can check with these commands that attempt to display the versions of the installed utilities:

$ node -v
$ npm -v

If necessary, you can easily install the latest version of Node and NPM using installers from their download page.

Let’s get started

We will create the Laravel React demonstration in a directory called projects:

$ mkdir projects
$ cd projects
$ composer create-project --prefer-dist laravel/laravel projects

Now initialize the Lando Laravel recipe to build our .lando.yml file.  Note that the Laravel webroot is in the subdirectory “public”.

$ lando init
? What recipe do you want to use? laravel
? Where is your webroot relative to the init destination? public
? What do you want to call this app? projects

After the configuration, if you run

$ lando start

the Docker containers will spin up and you can visit the Laravel splash page at

http://projects.lndo.site

Now we can activate the React preset in Laravel.

$ php artisan preset react
React scaffolding installed successfully.

Run these commands to complete the React scaffold:

$ npm install
$ npm run dev

Replace the contents of the splash page, projects/resources/views/welcome.blade.php with the following HTML, which will reference the supplied demo React component:

<!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">
        <title>Laravel with React</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Now, view the demo React component in the browser at http://projects.lndo.site

Let’s take a look at the  code that the React preset has placed in resources/assets/js/app.js

This default code pulls in the bootstrap.js file that includes React, and calls ./components/Example.js, an example React component:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Example');

And last, lets look at the supplied component /resources/assets/js/components/Example.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 justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Example Component</div>

                            <div className="card-body">
                                I am an example component!!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

In this file there is an Example component being rendered in the the HTML element with id “example”.

From here, we will want to start following React tutorials to start creating our own React components.  Since the components need to be transpiled from JSX and ES6 to pure JavaScript for loading into browsers, whenever we make a source change, we must run:

$ npm run dev

For production, when we want to minify assets, we can instead run:

$ npm run production

This gets old after about two times, so the npm run watch command will continue running in your terminal and automatically run the Mix tasks any time a change in the source assets is detected:

$ npm run watch

See the complete Laravel Mix documentation at https://laravel.com/docs/5.6/mix