Raylar-Tepki ES6 ile çalışmıyor

Question

tepki raylarını kullanıyorum gem ve bu şekilde benzeyen ES6'da birkaç bileşen yazmaya çalışıyorum.

Benim link_list.js.jsx dosya

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

Bu Uncaught ReferenceError: require is not defined ve 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).

ve hatayı Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

şeklinde bir hata almaya devam bu bir sorun var benim kod veya ES6 doğru değil derleme ile bir sorun mu?

Answer 1

kurulum kullanıcı arabirimini webpack kullanıp babel kullanabilirsiniz,

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

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

Aksi oluşturmak komuta bir seçenek var.

Answer 2

Normalde Tepki kodu genellikle Babel ile "derlenmiş" olmalıdır.

bu bir "KO" endişe olmadığından, ben RoR hatalarının giderilmesi ve gereksiz zor, kafa karıştırıcı içinde fazladan JS katmanları ekleyerek, Rayları tutmak ve ayrılmış React öneriyoruz.

Sen WebPack ile bundle.js dosyası oluşturmak ve raylar düzenden diyoruz, bu şekilde KO ve birbirlerine kirletmeyen Tepki gerekir. Sonra bundle.js

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

Bulunduğum webpack dosyası derlemek

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

: Öncelikle gibi NPM ile ihtiyacınız paketleri yükleme

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

seçenek "WebPack kullanın - w "böylece .jsx dosyalarınızda değişiklik yaptığınızda, bundle.js otomatik olarak güncellenir.

Kodunuzu ayıklamak için tarayıcınızda kaynak haritalarını etkinleştirmeniz gerekir.