Rails-React nie działa z ES6

Question

Używam gem Reakcja-Rails i staram się napisać kilka komponentów w ES6, które wyglądają tak.

Moja link_list.js.jsx plik

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

Wciąż dostaję ten Uncaught ReferenceError: require is not defined i błąd, który mówi 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).

i błąd Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Czy to problem z moim kod lub czy jest problem z klejnotem, który nie kompiluje ES6?

Answer 1

Jest opcja w poleceniu wygenerowania

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

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

W przeciwnym razie, można użyć webpack skonfigurować frontend i używać babel.

Answer 2

Normalnie kod React musi być "skompilowany", zwykle z Babel.

Ponieważ nie jest to problem "RoR", polecam zachować Railsy i React oddzielone, dodając dodatkowe warstwy JS wewnątrz RoR jest mylące, trudniejsze do debugowania i niepotrzebne.

Musisz wygenerować plik bundle.js z WebPack i wywołać ją z układu szynach, tędy ROR i React nie zanieczyszczają siebie. Najpierw zainstalować pakiety musisz z KMP jak:

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

następnie zestawiają bundle.js

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

Mój obecny plik WebPack:

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

skorzystać z opcji „WebPACK - w "więc gdy wprowadzasz zmiany w plikach .jsx, plik bundle.js jest automatycznie aktualizowany.

Będziesz potrzebował aktywować mapy źródłowe w swojej przeglądarce, aby zdebugować swój kod.