असीमित संदर्भ त्रुटि: प्रतिक्रिया को परिभाषित नहीं किया गया है

Question

हाय मुझे पता है कि इस प्रकार के प्रश्न से कुछ बार पूछा गया है लेकिन मुझे जवाब नहीं मिला।

मैं एक प्रतिक्रिया हैलो विश्व उदाहरण लिखने की कोशिश कर रहा हूं। मेरे पास केवल दो फाइलें हैं एक app.jsx और दूसरा मुखपृष्ठ.जेएसएक्स। मैं फ़ाइलों को बंडल करने के लिए वेबपैक का उपयोग कर रहा हूं।

लेकिन मैं Uncaught ReferenceError: React is not defined

मेरे homepage.jsx इस

"use strict"; 

var React = require('react'); 

var Home = React.createClass({ 
    render : function() { 
     return (
      <div className="jumbotron">     
       <h1> Hello World</h1> 
      </div> 
     ); 
    } 
}); 

module.exports = Home; 

मेरे app.js इस

var ReactDOM = require('react-dom'); 

var Home = require('./components/homePage'); 

ReactDOM.render(
    <Home/>, 
    document.getElementById('app') 
); 

ब्राउज़र में फेंक देता है Uncaught ReferenceError: React is not defined तरह लग रहा है की तरह लग रहा प्राप्त जब मैं कोड को चलाने लाइन 7 पर यानी जहां मुझे होमपेज की आवश्यकता है।

लेकिन जब मैं app.jsx में var React = आवश्यकता ('प्रतिक्रिया') जोड़ता हूं तो यह ठीक काम करता है।

मुझे यह समझ में नहीं आता है। मैंने homepage.jsx में प्रतिक्रिया शामिल की है जहां मैं इसका उपयोग कर रहा हूं। App.jsx में मुझे केवल प्रतिक्रिया-डोम की आवश्यकता होती है क्योंकि मैं प्रतिक्रिया का उपयोग नहीं करता हूं। तो यह app.jsx में त्रुटि क्यों दे रहा है।

Pls मदद !!

Answer 1

बदलें अपने app.js इस

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var Home = require('./components/homePage'); 

ReactDOM.render(
    <Home/>, 
    document.getElementById('app') 
); 

को JSX React.createElement() कॉल में तब्दील हो जाता है, इस प्रकार प्रतिक्रिया दायरे में आवश्यक है। तो हाँ, आप app.js में उपयोग कर रहे हैं। जब भी आप जेएसएक्स का उपयोग करते हैं या सीधे React.* कॉल का उपयोग करते हैं तो इसे आयात करने के लिए उपयोग करें।

Answer 2

आप इसे अपने कोड में बिना आवश्यकता के प्राप्त कर सकते हैं।

webpack.config.js में जोड़ें:

plugins: [ 
    new webpack.ProvidePlugin({ 
    "React": "react", 
    }), 
], 

http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin