Laravel 5 Elixir Gulp file with Browserify and Reactify

Laravel 5 Elixir Gulp file with Browserify and Reactify

.

gulpfile.js

var gulp       = require('gulp');
var elixir     = require('laravel-elixir');
var browserify = require('browserify');
var source     = require('vinyl-source-stream');
var reactify   = require('reactify');


// Create a new command for Laravel Elixir that will browserify and Reactify 
elixir.extend('reactifyBrowserifyElixir', function(inputFile, inputFileName, outputDirectory) {

    gulp.task('browserify_and_reactify', function() {
        var b = browserify();

        b.transform(reactify); 

        b.add(inputFile);

        return b.bundle()
            .pipe(source(inputFileName))
            .pipe(gulp.dest(outputDirectory));
    });

    return this.queueTask('browserify_and_reactify');
});

// Now include the new Elixir command in the standard build process
 elixir(function(mix) {

    mix.reactifyBrowserifyElixir('./resources/assets/js/main.js', 'main.js', 'public/js/')
        .version(['public/js/main.js']);
        
        // after version() is done, the final js file is
        // output to /public/build/js/main.js
        // which can be added to your blade template via
        // <script src="{{ elixir('js/main.js') }}"></script>
});

main.js

// this is located in the standard Laravel 5 /resources/assets/js

var React = require('react');

var viewTest = require('./zomg.jsx');

React.renderComponent(viewTest(), document.getElementById('content'));

zomg.jsx

// this is located in the standard Laravel 5 /resources/assets/js

var React = require('react');

var viewTest = React.createClass({
    render: function(){
        return (
            <div>
                Boo Yah
            </div>
        );
    }
});

module.exports = viewTest;