Wie wird die Komponente mit Webpack angezeigt?

Question

Ich versuche HMR zu implementieren für reagieren/webpack/Zug, das ist meine Komponente:

import React from 'react'; 

class main extends React.Component { 

    constructor(props) { 
     super(props); 

    } 
    render() { 

     return (
      <div>Hi this is fdsfdsfs</div> 
     ); 
    } 
} 

export default main; 

Das ist mein index.js ist:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './main'; 


ReactDOM.render(
    <main/> 
, 
    document.getElementById('root') 
); 

Wenn ich eine Datei zu ändern, erhalte ich:

[HMR] Waiting for update signal from WDS... 
client:37 [WDS] Hot Module Replacement enabled. 
2client:37 [WDS] App updated. Recompiling... 
client:37 [WDS] App hot update... 
only-dev-server.js:69 [HMR] Checking for updates on the server... 
log-apply-result.js:20 [HMR] Updated modules: 
log-apply-result.js:22 [HMR] - 245 
only-dev-server.js:55 [HMR] App is up to date. 

Die Frage ist, warum kann ich nichts auf der Seite gerendert sehen? Siehe auch here

Answer 1

Reagieren Komponentennamen müssen immer mit Großbuchstaben beginnen, andernfalls werden sie als reguläre HTML-Tags behandelt. Außerdem importieren Sie Ihre Hauptkomponente als App und verwenden sie erneut als Hauptkomponente, was nicht korrekt ist.

import React from 'react'; 

class Main extends React.Component { 

    constructor(props) { 
     super(props); 

    } 
    render() { 

     return (
      <div>Hi this is fdsfdsfs</div> 
     ); 
    } 
} 

export default Main; 

Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Main from './main'; 


ReactDOM.render(
    <Main/> 
, 
    document.getElementById('root') 
);