Uncaught ReferenceError: React nie jest zdefiniowany

Question

Witam Wiem, że tego typu pytanie zostało zadane kilka razy, ale nie mogłem uzyskać odpowiedzi.

Próbuję napisać przykład React hello world. Mam tylko dwa pliki: jeden app.jsx i inny plik homepage.jsx. Używam webpacka do pakowania plików.

Ale kiedy uruchomić kod otrzymuję Uncaught ReferenceError: React is not defined

Moja homepage.jsx wygląda następująco

"use strict"; 

var React = require('react'); 

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

module.exports = Home; 

Moi app.js wygląda to

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

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

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

W przeglądarce rzuca Uncaught ReferenceError: React is not defined w linii 7, tj. w miejscu, gdzie potrzebuję strony głównej.

Ale kiedy dodaję var React = require ('react') w app.jsx działa dobrze.

Nie rozumiem tego. Uwzględniłem reakcję na stronie głównej.jsx, z której korzystam. W app.jsx wymagam tylko reakcji-dom, bo nie używam React. To dlaczego podaje błąd w app.jsx.

Pls help !!

Answer 1

zmienić app.js do tego

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

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

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

JSX przekształca React.createElement() połączeń, a tym samym React jest wymagane w zakresie. Więc tak, używasz React w app.js. Zaimportuj go za każdym razem, gdy używasz JSX lub bezpośrednich połączeń React.*.

Answer 2

Możesz go mieć bez wymagania go w swoim kodzie.

Dodaj do webpack.config.js:

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

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