How To Install React With Laravel and Gulp

In this post I'm going to walk through the installation steps necessary to get React working in a Laravel project that uses Gulp.

First, install the NPM dependencies

npm install react --save-dev
npm install react-dom --save-dev

Create a component directory and your first component.

mkdir resources/assets/js/components
touch resources/assets/js/components/App.js

Add the simplest possible React code to the component.

// App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (
        <div>
            Hello World
        </div>
    );
  }
}
export default App

ReactDOM.render(<App />, document.getElementById('react-app'));

In the blade file where you want your react component to render, add a div with the id of react-app. 

// Any blade file 
<div id="react-app"></div>

Now add the react file to gulp, so that we can concatenate all the javascript and let the app read it in the public folder. 

elixir( function(mix) {
    mix
        .webpack(
           'resources/assets/js/components/*.js',
           'public/js/react.js'
        )
});

Finally, let's be sure to add a call to the script file within our app.blade.php, so that it's available on the page. The most important thing about accessing the react script is that it must come after the div with an id of react-app. Otherwise you will get this nasty error: 

Uncaught Error: Target container is not a DOM element.

Although this looks bad, it just means your react code can't find the DOM element to render on! So render the HTML first, then the javascript code. For example, my final setup in app.blade.php looks like this:

<div id="app">
    @yield('content')
</div>
<script type="text/javascript" src="{{ asset('js/react.js') }}"></script>

Before you try to render the component, don't forget to run 

gulp
// or 
gulp watch

Now you should be all set! Navigate to any route that holds your blade file which calls react, and you should see the simple Hello World component. Any problems or bugs, just let me know in the comments below.