Reagieren-code nicht angezeigt im browser
Ich bin mit Webpack zu bündeln, einige Reagieren geschriebenen code in JSX-format. Ich habe alles eingerichtet und läuft soweit kompilieren geht und wie es aussieht, wenn alles richtig ist in der bundle.js
Ausgabe-Datei. Wenn ich importieren Sie es in eine HTML-Datei und versuchen Sie auf die Anzeige Reagieren-code es nicht zeigen, bis aus irgendeinem Grund. Ich habe ein regulärer javascript-Datei enthalten und es in die main.js
so, dass es auch in der Webpack-Ausgabe-Datei bundle.js
- und dies zeigen, nicht im browser. Also, wenn die bundle.js
verwendet wird in meiner html-Datei bekomme ich nur den text "Hello, im befindet sich in einer separaten Datei" und nicht die Elemente Reagieren.
Reagieren-Code(main.js)
require('./extra.js');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Regelmäßige JS-Datei(extra.js)
document.write("Hello, im located in a seperate file");
Output-Datei nach dem ausführen 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-Datei, die im mit Sie das Skript in
<!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>
- Ich denke, dass der erste code-block ist abgeschnitten; Geist beheben?
- Tut mir Leid, dass es korrigiert wurde.
- Warum gibt es Aufrufe an
React.render
undReactDOM.render
? Gibt es irgendwelche Fehler in der Konsole? Gibt es Einfuhren für diese beiden (ich weiß nicht sehen Sie in Ihrem code)? Wo istmountNode
definiert? - Sie waren nur zwei Beispiele, die ich zog die Reagieren homepage ich habe es vereinfacht. Es gibt keine Fehler, nirgendwo.
- Wenn Sie schauen in Richtung der Unterseite des
bundle.js
- Datei neben__webpack__require__
es hat (1) daneben. Bedeutet das, dass es fehlt, ist eine Anforderung möglich? - Bitte zeigen Sie die gesamte
main.js
. Ich bin nicht zu sehen, jegliche Einfuhr und es kann nicht funktionieren, ohne Importe. Und auf jeden Fall nutzenReactDOM.render
. - Ich nehme an, erforderlich ist äquivalent zu importieren. Ich habe aktualisiert, mit Ihrem Vorschlag, und ich habe versucht, mit Hilfe bedürfen je zuvor Reagieren die Webseiten Abschnitt erste Schritte immer noch nicht funktioniert hat, dies ist meine gesamte main-Datei.
- Lassen Sie uns weiterhin diese Diskussion im chat.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beispiele auf den Reagieren die homepage sind nicht autark, sondern minimale Beispiele Reagieren selbst. Hier ist, wie das Beispiel verwenden Sie Aussehen könnte, beginnend mit
index.js
:Und Ihre
index.html
:Beachten Sie, dass es ist erforderlich, ein Skript namens
bundle.js
und unsere Quelle ist genanntindex.js
. Für die Transformation der JSX und Verpacken unsere Quelle in der bündeln, können wir Webpack mit diesem basic-config:müssen Sie entweder zu setzen, das Skript-tag am Ende des Körpers, oder der Ausführung von code auf dem Dokument bereit. wenn das Skript ausgeführt wird, in den Kopf, es gibt ein div mit der id = app auf dem Dokument noch