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') 时它工作正常。

我不明白这个。我在 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.* 调用时导入它。

Answer 2

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

添加到webpack.config.js:

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

见https://webpack.js.org/plugins/provide-plugin/#root

Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: React is not defined

reactjs

webpack

react-dom