Reagieren Komponente nicht Rendering auf DOM

Ich gehe durch ein React Tutorial bei http://andrewhfarmer.com/build-your-own-starter/#0-intro und die Counter Komponente wird nicht auf der Seite angezeigt. Die html kommt wie folgt aus:Reagieren Komponente nicht Rendering auf DOM

<html> 
<head> 
    <script src="/bundle.js" ></script> 
</head> 
<body> 
    <div id="mount"></div> 
</body> 
</html>

main.js

console.log('Hello World!'); 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Counter from './Counter'; 


ReactDOM.render(
    React.createElement(Counter), 
    document.getElementById('mount') 
);

Counter.js

import React from 'react'; 


class Counter extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      count: 0, 
     }; 
    } 

    render() { 
     return (
      <button 
       onClick={() => { 
        this.setState({ count: this.state.count + 1 }); 
       }} 
      > 
       Count: {this.state.count} 
      </button> 
     ); 
    } 
} 

export default Counter;

webpack.config.js

var path = require('path'); 

var config = { 
    context: path.join(__dirname, 'src'), 
    entry: [ 
    './main.js', 
    ], 
    output: { 
    path: path.join(__dirname, 'www'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader'], 
     }, 
    ], 
    }, 
    resolveLoader: { 
    root: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
    resolve: { 
    root: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
}; 
module.exports = config;

Wir betreiben Server:

[email protected]:~/CodeTutorials/build-react-starter$ node server.js 
in the component 
in the tester 
in the component 
in the tester 
Example app listening at http://:::3000 
Hash: d51a7c75081bea020fb1 
Version: webpack 1.14.0 
Time: 1297ms 
    Asset Size Chunks    Chunk Names 
bundle.js 744 kB  0 [emitted] main 
chunk {0} bundle.js (main) 707 kB [rendered] 
    [0] multi main 28 bytes {0} [built] 
[179] ./src/Counter.js 2.63 kB {0} [built] 
webpack: bundle is now VALID.

Seite Refreshing zeigt nichts im Terminal, aber Entwickler-Tools-Konsole zeigt die Hello World! auf jedem refresh

Es scheint Vorlage wird nicht gerendert wird, aber das letzte Mal, mein Freund, das Tutorial hat es wie gearbeitet (die public Aspekt in der Middleware könnte es gedient haben)

Warum liefert dieser Server Dateien von / nicht?

Der Code ist bei https://bitbucket.org/servandoavila1/codetutorials

Danke

Quelle

2017-02-02 Servando Avila

nichts in der Konsole? – patrick

Ich habe die Konsole oben hinzugefügt, es macht die Drucke, die Sie erwarten würden. Die Chrome-Konsole druckt die 'Hallo Welt!', Wenn Sie Seite aktualisieren –

Es gibt keine Notwendigkeit für Sie ist document.addEventListener('DOMContentLoaded', function() { zu verwenden.

class Counter extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     this.state = { 
 
      count: 0, 
 
     }; 
 
    } 
 

 
    render() { 
 
     return (
 
      <button 
 
       onClick={() => { 
 
        this.setState({ count: this.state.count + 1 }); 
 
       }} 
 
      > 
 
       Count: {this.state.count} 
 
      </button> 
 
     ); 
 
    } 
 
} 
 

 

 
    ReactDOM.render(
 
     React.createElement(Counter), 
 
     document.getElementById('mount') 
 
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="mount"></div>

Quelle

2017-02-02 03:36:11

Wissen Sie, warum das bricht? –

Ich habe es auf Ihre Art und Weise und überraschend funktioniert nicht. Mit Google Chrome, habe ich hart aufgefrischt.Keine Fehler auf dem Server oder Frontend –

Es macht keinen Unterschied, aber könnten Sie versuchen anstelle von React.createElement –

Wann haben Sie das letzte Mal laufen npm run compile?

Ich habe gerade das Tutorial selbst gemacht und stieß auf das gleiche Problem, das Sie getan haben. Ich konnte es beheben, indem ich npm run compile wieder nach dem Hinzufügen der React-Zeug ausgeführt.

Es scheint, dass das Tutorial einen Schritt fehlt, da bundle.js nach dem Hinzufügen von React erneut kompiliert werden muss.

Quelle

2017-02-02 05:00:24 ZOAN

versuchen, die publicPath auf webpack config gesetzt

var config = { 
    ... 
    output: { 
    path: path.join(__dirname, 'www'), 
    publicPath: '/', 
    filename: 'bundle.js', 
    }, 
    ... 
}

Und stellen Sie sicher, dass Sie ['es2015', 'react'] Presets auf Ihrem .babelrc

Tipps:

ReactDOM.render(
    <Counter />, 
    document.getElementById('mount') 
);

so machen Sie auf main.js können

Quelle

2017-02-02 13:30:36

Verwenden Sie den JSX-Loader wie folgt in der Datei loader.config.js:

loaders: [ 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 

     query: { 
      presets: ['es2015', 'react'] 
     } 
    } 
    ]

Quelle

2017-08-22 09:01:37

Reagieren Komponente nicht Rendering auf DOM

Antwort

Verwandte Themen