Rails-React не работает с ES6

Question

Я использую реактивные рельсы, и я пытаюсь написать несколько компонентов в ES6, которые выглядят так.

Мой 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> 
    ) 
    } 
} 

я получаю эту Uncaught ReferenceError: require is not defined и ошибку, которая говорит 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).

и ошибку Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Это проблема с моим или это проблема с камнем, не скомпилировавшим ES6?

Answer 1

Там есть опция в команде генерировать

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

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

В противном случае, вы можете использовать webpack для настройки внешнего интерфейса и использовать babel.

Answer 2

Обычно Код React должен быть «скомпилирован», как правило, с Babel.

Поскольку это не относится к «RoR», я бы рекомендовал оставить Rails и React разделенными, добавив лишние слои JS внутри RoR, сбивает с толку, сложнее отлаживать и ненужно.

Вы должны сгенерировать файл bundle.js с помощью webpack и вызвать его из макета рельсов, таким образом RoR и React не загрязняют друг друга. Сначала установите нужные вам пакеты с НПМ, как:

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

затем компилировать bundle.js

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

Мой текущий WebPack файл:

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

использовать опцию «Webpack - w ", поэтому, когда вы вносите изменения в свои .jsx-файлы, bundle.js автоматически обновляется.

Для отладки кода вам потребуется активировать исходные карты в вашем браузере.