未捕获的引用错误：React未定义。

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行会抛出“未捕获的引用错误：React未定义”。

但是，当我在app.jsx中添加var React = require('react')时，它就可以正常工作。 我不明白这个问题。我已经在homepage.jsx中包含了React并在其中使用它。在app.jsx中，我只需要react-dom，因为我不使用React。 那么为什么在app.jsx中会出现错误？

请帮忙！！

- Aniket

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.*调用时，请习惯导入它。

- Andreyco

---

我对这方面还有点新，但您能否解释一下为什么 require('react-dom') 不会引入 React？ - Doddie

react-dom只是一个“渲染器”，它将React元素转换为DOM节点/元素。看看React Native，它不需要react-dom，因为它有自己的渲染器，根据平台将React元素转换为本地元素。在早期，React包含了现在存在的react-dom中提取出来的代码。 - Andreyco

@Andreyco 当我使用上面的代码时，我遇到了这个错误 ReferenceError: require未定义 var React = require('react'); 请帮帮我，谢谢。 - mja

看起来很混乱（需要导入React，尽管代码没有展示使用它，但编译正常）。这是唯一需要做类似操作的时候吗？ - georaldc

Answer 2

你可以在代码中不需要显式地引入它。

将以下内容添加到 webpack.config.js 文件中：

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

请参阅https://webpack.js.org/plugins/provide-plugin/#root

- MiF