Rails-ReactがES6で動作しない

Question

私は反応レール gemを使用しています。このように見えるいくつかのコンポーネントをES6に書き込もうとしています。

私はこの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.

が、これは私の問題ですエラーを取得しておくマイ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> 
    ) 
    } 
} 

またはES6を正しくコンパイルしていないという宝石に問題がありますか？

Answer 1

生成するコマンドでオプション

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

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

そうでない場合は、セットアップにフロントエンドをwebpackを使用してbabelを使用することができますがあります。

Answer 2

通常、反応コードは通常「Babel」で「コンパイル」する必要があります。

これは "RoR"の問題ではないので、RailsとReactを分離しておくことをお勧めします.RoR内の余分なJSレイヤーを混乱させると、デバッグが不要になります。

webpackを使用してbundle.jsファイルを生成し、それをあなたのレールレイアウトから呼び出す必要があります。このように、RoRとReactはお互いを汚染しません。その後、bundle.js

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

私の現在のWebPACKのファイルをコンパイル

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

：最初のようなNPMで必要なパッケージをインストール

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

オプション「のWebPACKを使います - w "なので、.jsxファイルを変更すると、bundle.jsが自動的に更新されます。

コードをデバッグするには、ブラウザでソースマップを有効にする必要があります。