Uncaught ReferenceError: React is not defined

[official_dulin]

问题： Uncaught ReferenceError: React is not defined

Home/index.js是一个SFC:

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

export default Home;

这里稍具迷惑性，虽然看起来stateless functional component是一个普通的箭头函数，好像没有用到React，不用引入React模块，但是别忘了，SFC中的"html标签"并不是浏览器环境中的html标签。而是JSX，JSX会经过babel-preset-react和babel-preset-es2015等预设集的解析转换，最后编译出来的代码是这样的:

exports.default = function () {
    return React.createElement(
        "div",
        null,
        React.createElement(
            "h2",
            null,
            "Home"
        )
    );
};

调用了React.createElement方法，所以是需要引入React模块的。

正确写法：

import React from "react";

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

export default Home;

有一种情况，在SFC文件中没有显示导入react，而是通过webpack的ProviderPlugin，在使用模块的时候自动加载模块，而不必到处import或require。