Getting Unexpected token with react-rails es6 - ruby-on-rails

Question

Rails 5.0.0.1
Ruby 2.3.1
I would of thought this would have been a presents issue but then again, it works for the person who created the tutorial Im following in conjunction with this. So, nothing fancy:
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= cable
//= require_self
//= require react_ujs
window.$ = window.jQuery = global.$ = require('jquery');
var React = window.React = global.React = require('react');
var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
require('./components');
Components.js
require( 'babel-polyfill' );
// Manually add components to window and global
// so that react_ujs and react-server can find them and render them.
window.Home = global.Home = require("./components/Home.js").default
// same issue if use *.es6.jsx
Home.js (or es6.jsx)
import React from 'react';
import ReactDOM from 'react-dom';
class Home extends React.Component {
render() {
return (
<div className="form-control">
Home baby
</div>
)
}
}
export default Home;
Gemfile
gem "browserify-rails"
gem 'react-rails
config/application.rb
# Configure Browserify to use babelify to compile ES6
config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 ] ]"
unless Rails.env.production?
# Work around sprockets+teaspoon mismatch:
Rails.application.config.assets.precompile += %w(spec_helper.js)
# Make sure Browserify is triggered when
# asked to serve javascript spec files
config.browserify_rails.paths << lambda { |p|
p.start_with?(Rails.root.join("spec/javascripts").to_s)
}
end
npm
npm install browserify browserify-incremental babelify babel-preset-es2015 --save
The Unexpected token refers to the first <div>, why?

Answer 1

The JSX syntax is not being compiled, probably because you need to add the react babel preset to your browserify config.
install package:
npm install --save-dev babel-preset-react
config/application.rb
config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 react ] ]"