Rails-React does not work with ES6

Question

I am using rock with rock rails and I am trying to write several components in ES6 that look like this.

My file link_list.js.jsx

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 the 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). error message 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). 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 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 for my code, or is it a problem with a stone that does not match the proper compilation of ES6?

Answer 1

There is an option in the generate command

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

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

Otherwise, you can use webpack to customize the interface and use babel .

Answer 2

Normally, React code should be “compiled”, usually with Babel.

Since this does not apply to RoR, I would recommend leaving Rails and React separate, adding extra JS layers inside RoR is confusing, harder to debug and unnecessary.

You must generate the bundle.js file using webpack and call it from the rail layout, so RoR and React will not pollute each other. First install the packages you need with npm:

  $ npm i react --save $ npm i babel-preset-es2015 --save 

then compile bundle.js

 webpack -d --display-reasons --display-chunks --progress 

My current webpack file is:

https://github.com/aarkerio/vet4pet/blob/master/webpack.config.js

use the "webpack -w" option, so when you make changes to your .jsx files, bundle.js is automatically updated.

You will need to activate the source maps in your browser to debug the code.