Rails-React không hoạt động với ES6

Question

Tôi đang sử dụng đường kính phản ứng - và tôi đang cố gắng viết một vài thành phần trong ES6 giống như thế này.

My link_list.js.jsx tập tin

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

tôi tiếp tục nhận được Uncaught ReferenceError: require is not defined này và một lỗi mà nói 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).

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

này một vấn đề với tôi là mã hoặc là nó là một vấn đề với đá quý không biên dịch ES6 phải không?

Answer 1

Có một tùy chọn trong tạo lệnh

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

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

Nếu không, bạn có thể sử dụng để thiết lập webpack front-end và sử dụng babel.

Answer 2

Thông thường Mã phản ứng phải được "biên dịch", thường là với Babel.

Vì đây không phải là mối quan tâm "R Ro R" ", tôi khuyên bạn nên giữ Rails và React tách biệt, thêm các lớp JS bên trong RoR là khó hiểu, khó gỡ lỗi và không cần thiết.

Bạn phải tạo tệp bundle.js với webpack và gọi nó từ bố cục đường ray của bạn, theo cách này, RoR và React không gây ô nhiễm lẫn nhau. Đầu tiên cài đặt các gói bạn cần với NPM như:

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

sau đó biên dịch bundle.js

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

webpack hiện tại của tôi file:

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

sử dụng tùy chọn "webpack - w "vì vậy khi bạn thực hiện thay đổi trong tệp .jsx, bundle.js sẽ tự động được cập nhật.

Bạn sẽ cần kích hoạt nguồn bản đồ trên trình duyệt để gỡ lỗi mã của mình.