laravel_elixir_react_example.md

• Create React Component: App.jsx

var React = require('react');
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Header</h1>
                <h2>Content</h2>
                <p>This is the content!!!</p>
            </div>
        );
    }
}

export default App;

• Use component in your app.js

var React = require('react');
var ReactDOM = require('react-dom');
// ES6 way
export default class Main extends React.Component {
    render() {
        return (
            <div>
                The easiest way to add authentication to your app is via Auth0!
            </div>
        );
    }
}
ReactDOM.render(
    <Main/>,
    document.getElementById('app')
);

gulpfile.js

const elixir = require('laravel-elixir');
var browserify = require('laravel-elixir-browserify-official');
elixir(function (mix) {
    mix.browserify('resources/assets/js/app.js', 'public/react/demo.js');
    mix.browserify('resources/assets/jsx/App.jsx','public/react')
});

• Your Package.json

{
  "private": true,
  "scripts": {
    "prod": "NODE_ENV='production' gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-loader": "^6.2.8",
    "bootstrap-sass": "^3.3.7",
    "elixir-react-jsx": "^3.0.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify": "^0.8.1",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "laravel-react": "^1.0.3",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "laravel-react": "^1.0.3",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

• You need to configure jsx to js transform new configuration in Js block above uglify portion node_modules/laravel-elixir/dist/Config.js

  /*
       |----------------------------------------------------------------
       | Babel Compilation
       |----------------------------------------------------------------
       |
       | Think of Babel as a compiler for next-generation JavaScript.
       | If you'd like to make use of ES6 - or even ES7 features -
       | in new apps, we make it a cinch right from the get go.
       |
       */

      babel: {
          // https://www.npmjs.com/package/gulp-babel#babel-options
          options: {
              presets: ['es2015', 'react']
          }
      },

      /*
       |----------------------------------------------------------------
       | Browserify Compilation
       |----------------------------------------------------------------
       |
       | Browserify allows you to pull in Node modules in the browser!
       | Generally a pain to get up and running, Elixir offers many
       | sensible defaults to get you up to speed super quickly.
       |
       */

      browserify: {
          // https://www.npmjs.com/package/browserify#usage
          options: {},

          plugins: [],

          externals: [],

          transformers: [
              {
                  name: 'babelify',

                  // https://www.npmjs.com/package/gulp-babel#babel-options
                  options: {
                      presets: ['es2015', 'react']
                  }
              },

              {
                  name: 'partialify',

                  // https://www.npmjs.com/package/partialify
                  options: {}
              }
          ],

          watchify: {
              enabled: false,

              // https://www.npmjs.com/package/watchify#usage
              options: {}
          }
      },

      /*
       |----------------------------------------------------------------
       | CoffeeScript Compilation
       |----------------------------------------------------------------
       |
       | If you prefer CoffeeScript compilation, this object stores
       | the defaults for the Coffee folder name - not the path.
       | When used, this value will be affixed to assetsPath.
       |
       */

      coffee: {
          folder: 'coffee',

          // https://github.com/wearefractal/gulp-coffee#options
          options: {}
      },