在浏览器中未显示React代码

我正在使用Webpack捆绑一些以JSX格式编写的React代码。编译完成后，我已经完成并运行了所有内容，并且看起来好像bundle.js输出文件中的所有内容都是正确的。当我将它导入HTML文件并尝试显示React代码时，由于某种原因它不显示。我制作了一个常规的JavaScript文件，并将其包含在main.js中，以便它也包含在Webpack输出文件bundle.js中，并且这在浏览器中显示。所以当我的html文件中使用bundle.js时，我只是得到文本“Hello，im位于一个单独的文件中”而不是React元素。在浏览器中未显示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>

来源

2016-01-14 After_Sunset

我认为你的第一个代码块被切断了;修理它？ –

对不起，它已被更正。 –

为什么要调用'React.render'和'ReactDOM.render'？控制台中是否有错误？是否有这些进口（我没有在你的代码中看到它们）？ 'mountNode'在哪里定义？ –

在React homepage的例子是不能自给自足，反倒是最小的例子阵营本身。下面是你使用的例子如下，首先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' ], 
     } 
    ], 
    }, 
};

来源

2016-01-14 20:11:51

谢谢，这工作/帮助。 –

你要么需要把这个脚本标签在身体的结束，或者在文件准备执行代码。当该脚本在运行的头，心不是使用id =应用一个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>

来源

2016-01-14 19:31:54 PhilVarg

有效的点，但它仍然无法正常工作。 –

@After_Sunset一定要检查div id，并确保它与您的代码完全匹配。 –

@bebraw感谢您的建议，同时尝试调试这是一个问题。自那以后，我想出了几个问题，并会写出详细的答案。 –

在浏览器中未显示React代码

回答

相关问题