Rails-React funktioniert nicht mit ES6

Question

Ich benutze die react-rails gem und ich versuche, ein paar Komponenten in ES6 zu schreiben, die so aussehen.

Meine link_list.js.jsx Datei

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> 
    ) 
    } 
} 

Ich erhalte diese Uncaught ReferenceError: require is not defined und einen Fehler, der 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).

und den Fehler sagt Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Ist das ein Problem mit meinem Code oder ist es ein Problem mit dem Edelstein nicht kompilieren ES6 richtig?

Answer 1

Es gibt eine Option im Befehl erzeugen

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

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

Andernfalls Sie webpack Setup das Frontend verwenden könnte und babel verwenden.

Answer 2

Normalerweise React-Code muss "kompiliert" werden, in der Regel mit Babel.

Da dies keine "RoR" -Ansicht ist, würde ich empfehlen, Rails und React getrennt zu halten, zusätzliche JS-Layer in RoR hinzuzufügen ist verwirrend, schwieriger zu debuggen und unnötig.

Sie müssen eine bundle.js-Datei mit dem Webpack generieren und aus Ihrem Layout aufrufen, damit sich RoR und React nicht gegenseitig verschmutzen. Zuerst installieren Sie die Pakete, die Sie mit npm benötigen wie:

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

dann kompilieren die bundle.js

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

Meine aktuelle webpack Datei:

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

die Option „webpack verwenden - Wenn Sie Änderungen an Ihren .jsx-Dateien vornehmen, wird bundle.js automatisch aktualisiert.

Sie müssen in Ihrem Browser Quellkarten aktivieren, um Ihren Code zu debuggen.