Rails-React non funziona con ES6

Question

Sto utilizzando le rotaie e sto cercando di scrivere alcuni componenti in ES6 che assomigliano a questo.

mio link_list.js.jsx file di

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

continuo a ricevere questo Uncaught ReferenceError: require is not defined e un errore che dice 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).

e l'errore Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

questo è un problema con il mio codice o è un problema con la gemma non compilare ES6 giusto?

Answer 1

C'è un'opzione nel comando generare

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

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

In caso contrario, si potrebbe usare webpack per impostare il frontend e utilizzare babel.

Answer 2

Normalmente il codice di React deve essere "compilato", in genere con Babel.

Poiché questa non è una preoccupazione "RoR", ti consiglio di tenere separati Rails e React, aggiungendo strati JS aggiuntivi all'interno di RoR è confuso, più difficile eseguire il debug e non necessario.

È necessario generare un file bundle.js con Webpack e richiamarlo dal layout delle guide, in questo modo RoR e React non si contaminano a vicenda. Per prima cosa installare i pacchetti necessari con NPM come:

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

quindi compilare le bundle.js

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

Il mio attuale file di webpack:

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

utilizzare l'webpack opzione" - w "così quando apporti modifiche nei tuoi file .jsx, bundle.js viene aggiornato automaticamente.

È necessario attivare le mappe di origine sul browser per eseguire il debug del codice.