2015-08-16 6 views
9

मैं अपने स्वयं के सर्वर (अपाचे) और सुझाए गए HTML फ़ाइल और ट्यूटोरियल उदाहरणों की क्रियात्मक प्रतिलिपि का उपयोग कर प्रतिक्रिया प्रतिक्रिया ट्यूटोरियल के माध्यम से काम कर रहा हूं ...सिंटेक्स त्रुटि "अभिव्यक्ति की अपेक्षा, मिल गया '<'" प्रतिक्रियाओं को चलाने की कोशिश करते समय tuturial

सबसे सरल उदाहरण मेरे सर्वर पर विफल रहता है लेकिन JSFiddle पर काम करता है ..

स्क्रिप्ट के साथ मेरे HTML फ़ाइल नीचे दिखाया गया है ..

स्क्रिप्ट में प्रस्तुत करना एक वाक्य रचना त्रुटि के साथ विफल: function() {..

फ़ायरफ़ॉक्स में त्रुटि संदेश और सफारी (मैक संस्करण, नवीनतम) ..

"" "सिंटैक्स त्रुटि: उम्मीद एक्सप्रेशन, '<' मिल गया React.render (, document.getElementById ('कंटेनर') " "" [मेरे फ़ाइल]

<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

</head> 
<script> 
var Hello = React.createClass({ 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
}); 

React.render(<Hello name="World" />, document.getElementById('container')); 

</script> 

<body> 

    <div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 


</body> 
</html> 
+0

शरीर के अंदर करने के लिए '' टैग ले जाने का प्रयास। जेएसएक्स ट्रांसफॉर्मर स्क्रिप्ट को लोड करने के लिए समय चाहिए। – Harangue

उत्तर

13

आपके द्वारा पोस्ट किए गए कोड के साथ दो समस्याएं हैं।

पहला यह है कि जेएसएक्स ट्रांसफार्मर आपके कोड को बदल नहीं रहा है क्योंकि उचित type विशेषता script टैग पर मौजूद नहीं है।

बदलें

<script> 
var Hello = React.createClass({ 
... 

<script type="text/jsx"> 
var Hello = React.createClass({ 
... 

दूसरी बात करने के लिए, आप document.getElementById('container') कॉल कर रहे हैं इससे पहले कि कि div वास्तव में पृष्ठ पर मौजूद है, div के बाद अंतिम script टैग और इसकी सामग्री को स्थानांतरित करें (उदा।, body के नीचे)।

आप कोड है कि यह कैसे ट्यूटोरियल में दिखाया गया है के समान है के साथ खत्म करना चाहिए:

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/jsx"> 
     // Your code here 
    </script> 
    </body> 
</html> 
+0

धन्यवाद - मैं अब देखता हूं .. यह इस तरह से काम करता है और पूरी तरह से समझ में आता है कि यह – steelliberty

+1

से पहले क्यों काम नहीं कर सका यह मेरे लिए काम नहीं करता था। मुझे खाली स्क्रीन मिलती है। कोई कंसोल त्रुटियां नहीं। –

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

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