Uncaught ReferenceError: React не определен
Привет, я знаю, что этот вопрос задавался довольно много раз, но я не мог получить ответ.
Я пытаюсь написать пример React hello world. У меня есть только два файла: один app.jsx и еще одна homepage.jsx. Я использую webpack для связывания файлов.
Но когда я запускаю код, я получаю 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, где мне нужна домашняя страница.
Но когда я добавляю var React = require ('response') в app.jsx, он отлично работает.
Я не понимаю этого. Я включил реакцию на homepage.jsx, где я его использую. В app.jsx мне требуется только реагировать, потому что я не использую React. Тогда почему он дает ошибку в app.jsx.
Помощь Pls!
Ответы
Ответ 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()
, поэтому в сфере действия требуется React. Итак, вы используете React
в app.js
.
Используется для импорта, когда вы используете JSX или прямые вызовы React.*
.
Ответ 2
Вы можете получить его, не требуя его в своем коде.
Добавить в webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
"React": "react",
}),
],
См. http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin