反应代码未在浏览器中显示答案

【问题标题】：React code not showing in browser反应代码未在浏览器中显示
【发布时间】：2016-04-20 06:23:12
【问题描述】：

我正在使用 Webpack 捆绑一些以 JSX 格式编写的 React 代码。就编译而言，我已经启动并运行了所有内容，看起来bundle.js 输出文件中的所有内容都是正确的。当我将它导入 HTML 文件并尝试显示 React 代码时，由于某种原因它没有显示出来。我制作了一个常规的 javascript 文件并将其包含在 main.js 中，因此它也包含在 Webpack 输出文件 bundle.js 中，并且确实显示在浏览器中。因此，当在我的 html 文件中使用 bundle.js 时，我只会得到文本“你好，我位于一个单独的文件中”，而不是 React 元素。

反应代码（main.js）

require('./extra.js');

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

常规 JS 文件（extra.js）

document.write("Hello, im located in a seperate file");

运行 webpack(bundle.js) 后的输出文件

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);

    React.render(React.createElement(
        "h1",
        null,
        "hello world"
    ), document.getElementById("app"));

    var HelloMessage = React.createClass({
        displayName: "HelloMessage",

        render: function () {
            return React.createElement(
                "div",
                null,
                "Hello ",
                this.props.name
            );
        }
    });
    ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

/***/ },
/* 1 */
/***/ function(module, exports) {

    /**
     * Created by sf on 1/14/2016.
     */

    document.write("Hello, im located in a seperate file");

/***/ }
/******/ ]);

使用脚本中的 HTML 文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="example"></div>

<script src="bundle.js" type="text/javascript"></script>
</body>
</html>

【问题讨论】：

我认为你的第一个代码块被切断了；介意修一下吗？
抱歉，已更正。
为什么会同时调用React.render 和ReactDOM.render？控制台中是否有任何错误？这两个都有导入（我在您的代码中没有看到它们）？ mountNode 定义在哪里？
它们只是我从 React 主页中提取的两个示例，我已经对其进行了简化。任何地方都没有错误。
如果您查看bundle.js 文件的底部，在__webpack__require__ 旁边，它旁边有 (1)。这是否意味着它可能缺少需求？

标签： html reactjs webpack react-jsx

【解决方案1】：

您要么需要将该脚本标记放在正文的末尾，要么在准备好的文档上执行代码。当该脚本在头部运行时，文档上还没有 id = app 的 div

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <div id="app"></div>

  <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

【讨论】：

@After_Sunset 请务必检查该 div id 是否与您的代码完全匹配。
@bebraw 感谢您的建议，在尝试调试时，这曾经是一个问题。从那以后，我发现了几个问题，并将写一个详细的答案。

【解决方案2】：

React homepage 上的示例不是自给自足的，而是 React 本身的最小示例。以下是您使用的示例的外观，以 index.js 开头：

var React = require( 'react' );
var ReactDOM = require( 'react-dom' );

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var mountNode = document.getElementById( 'app' );
ReactDOM.render(<HelloMessage name="John" />, mountNode);

还有你的index.html：

<html>
  <body>
    <div id="app"></div>
    <script src="./build/bundle.js"></script>
  </body>
</html>

请注意，它需要一个名为 bundle.js 的脚本，而我们的源代码名为 index.js。要转换 JSX 并将我们的源代码打包到包中，我们可以使用 Webpack 和这个基本配置：

var webpack = require( 'webpack' );

module.exports = {
  context: __dirname + '/src',
  entry: './index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loaders: [ 'babel-loader?presets[]=react' ],
      }
    ],
  },
};

【讨论】：