reactjs - Uncaught ReferenceError : React is not defined

Question

您好，我知道此类问题已被问过很多次，但我无法得到答案。

我正在尝试编写一个 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('react') 时，它工作正常。

我不明白这个。我已将 React 包含在我正在使用的 homepage.jsx 中。在app.jsx中，我只需要react-dom，因为我不使用React。那么为什么它在 app.jsx 中给出错误。

请帮忙!!

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() 调用，因此范围内需要 React。所以，是的，您正在 app.js 中使用 React。习惯在使用 JSX 或直接 React.* 调用时导入它。