未捕获的ReferenceError:未定义React

时间:2016-02-11 14:27:28

标签: reactjs webpack react-dom

嗨,我知道这类问题已被问过很多次,但我无法得到答案。

我正在尝试编写一个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')
);

在浏览器中,它会在第7行抛出Uncaught ReferenceError: React is not defined,即我需要主页。

但是当我在app.jsx中添加var React = require(&#39; react&#39;)时,它运行正常。

我不明白这一点。我在homepage.jsx中包含了反应,我正在使用它。在app.jsx我只需要反应,因为我不使用React。那么为什么它会在app.jsx中给出错误。

请帮助!!

2 个答案:

答案 0 :(得分:38)

将您的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.*调用,都习惯导入它。

答案 1 :(得分:8)

您可以在代码中使用它而不需要它。

添加到 webpack.config.js

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

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