2016-03-18 10 views
5

के साथ काम नहीं कर रहा है मैं प्रतिक्रिया-रेल मणि का उपयोग कर रहा हूं और मैं इस तरह दिखने वाले ES6 में कुछ घटक लिखने की कोशिश कर रहा हूं।रेल-प्रतिक्रिया 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 को संकलित नहीं कर रहा है?

उत्तर

2

वहाँ आप दृश्यपटल सेटअप करने के लिए webpack का उपयोग करें और babel इस्तेमाल कर सकते हैं,

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

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

अन्यथा उत्पन्न आदेश में एक विकल्प है।

+0

मुझे लगता है कि मुझे आरटीएफएम और हाहा चाहिए: पी धन्यवाद, यह सही –

0

आम तौर पर प्रतिक्रिया कोड "संकलित" होना चाहिए, आमतौर पर बेबेल के साथ।

चूंकि यह "आरओआर" चिंता नहीं है, इसलिए मैं रेल और रिएक्ट को अलग रखने की सलाह दूंगा, आरओआर के अंदर अतिरिक्त जेएस परतों को भ्रमित करना, डीबग करना और अनावश्यक करना मुश्किल है।

आपको वेबपैक के साथ एक bundle.js फ़ाइल जेनरेट करनी होगी और इसे अपने रेल लेआउट से कॉल करना होगा, इस तरह RoR और React एक-दूसरे को प्रदूषित नहीं करते हैं। पहले की तरह NPM साथ संकुल आप की जरूरत को स्थापित:

$ 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 का उपयोग करें - डब्ल्यू "तो जब आप अपनी .jsx फ़ाइलों में परिवर्तन करते हैं, तो bundle.js स्वचालित रूप से अपडेट हो जाता है।

आपको अपने कोड को डीबग करने के लिए अपने ब्राउज़र पर सक्रिय स्रोत-मानचित्र की आवश्यकता होगी।

+0

था क्योंकि जावास्क्रिप्ट आपके वेब एप्लिकेशन का हिस्सा है, मेरे पास एक अलग राय है और कहें कि यह एक आरओआर चिंता है। संपत्ति फिंगरप्रिंटिंग के बारे में क्या? कॉफीस्क्रिप्ट को शामिल करना क्यों चाहते हैं, आरओआर में एसएएस संकलन किसी भी अलग-अलग संपत्ति संकलन प्रक्रिया में प्रतिक्रिया शामिल करना चाहते हैं? मैं यह नहीं कह रहा हूं कि यह आसान है - मैं जो कह रहा हूं वह है कि मैं बल्कि मेरा रिएक्ट ऐप रेल के अंदर रहता हूं - मैं इसे वेबसाइट पारिस्थितिकी तंत्र के हिस्से के रूप में देखता हूं, और इस तरह इसे बनाए रखने के लिए समाधान पसंद करेंगे। –

 संबंधित मुद्दे