Rails-React not working with ES6

Question

I'm using the react-rails gem and I'm trying to write a few components in ES6 that look like this.

My link_list.js.jsx file

import Component from 'react';
import Links from 'link';

class LinkList extends React.component{
  constructor(props){
    super(props);
    this.sate = {};
  }

  getInitialState(){
    return { links: this.props.initialLinks}
  }


  render(){
    var links = this.state.links.map(function(link){
      return <Links key={link.id} link={link} />
    })

    return (
      <div className="links">
        {links}
      </div>
    )
  } 
}

I keep getting this Uncaught ReferenceError: require is not defined and an error that says Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

and the error Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Is this a problem with my code or is it a problem with the gem not compiling ES6 right?

Answer 1

There's an option in the generate command

rails generate react:component Label label:string --es6

https://github.com/reactjs/react-rails#options

Otherwise, you could use webpack to setup the frontend and use babel.