bier hier bier hier - 1 month ago 5
React JSX Question

How to display the component with webpack?

I am trying to implement HMR for react/webpack/gulp, this is my component:

import React from 'react';

class main extends React.Component {

constructor(props) {
super(props);

}
render() {

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

export default main;


This is my index.js:

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


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


When I change a file I get:

[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.


The questions is why I cant see anything rendered on the page?
See also here

Answer

React Component names must always begin with Capital letters otherwise they are treated a regular HTML tags. Also You are importing your main component as App and using it as main again, which is incorrect.

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')
);