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

Question

我正在使用 Webpack 捆绑一些以 JSX 格式编写的 React 代码。就编译而言，我已经准备好了所有东西运行，看起来 bundle.js 输出文件中的每件事都是正确的。当我将它导入 HTML 文件并尝试显示 React 代码时，由于某种原因它没有显示。我制作了一个常规 javascript 文件并将其包含在 main.js 中，因此它也包含在 Webpack 输出文件 bundle.js 中，并且它确实显示在浏览器中。因此，当在我的 html 文件中使用 bundle.js 时，我只得到文本 "Hello, im located in a seperate file" 而不是 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 文件 im 使用

中的脚本

<!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>

Answer 1

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

<!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>

Answer 2

React homepage 上的示例不是 self-sufficient，而是 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 并将我们的源代码打包到 bundle 中，我们可以使用具有以下基本配置的 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' ],
      }
    ],
  },
};

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

React code not showing in browser

html

reactjs

webpack

react-jsx