0

I just started working in ReactJS and I was going through a basic React tutorial.

I have created a project and added Babel, React, ReactDOM, Webpack, Express as the dependencies.

Now I have this Counter.js :

import React, {Component} from 'react';

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

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

And the main.js (which is defined as the entry point of the application in webpack.config.js file):

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter.js';

ReactDOM.render(<Counter/>,document.getElementById("warbox"));

The PROBLEM is that when I start up the application, the component is not rendered on the page AND also the React DevTool Chrome extension doesn't light up (if that makes any sense).

Can't seem to figure out the problem exactly. Any help is appreciated. Apologies if its too basic.

The index.html :

<!DOCTYPE html>
<html>
<head>

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

UPDATE : Solved. I think I should update what made it work for others to see. Heres the problem I had : Apparently the bundle.js needs to be updated by running the webpack explicitly. After making the changes, I had to stop the server and run the webpack and restart the server. It WORKED!

chunkybyte
  • 34
  • 2
  • 8
  • remove `""` around `""` it will work, i think its a typo so marking the ques as a simple typo error. – Mayank Shukla Sep 14 '17 at 19:49
  • @MayankShukla Thanks for the miss but its still not working :( – chunkybyte Sep 14 '17 at 19:54
  • check console are you getting any error? update the ques and put the changes that you tried and it didn't help you. – Mayank Shukla Sep 14 '17 at 19:56
  • Just to rule out the obvious... you have an element with id="warbox" on the page, right? – Jake Haller-Roby Sep 14 '17 at 20:01
  • @MayankShukla No, the console shows no error. I have no clue why the `main,js` is not linking with the `index.html`... have checked the IDs for typo error and still nothing. – chunkybyte Sep 14 '17 at 20:04
  • @gravityplanx Yes – chunkybyte Sep 14 '17 at 20:05
  • @chunkybyte can you show `index.html` file? – Mayank Shukla Sep 14 '17 at 20:06
  • @MayankShukla added `index.html` to the problem statement – chunkybyte Sep 14 '17 at 20:10
  • @chunkybyte you must get the error that "Target container is not a DOM element", check the console solution is put the script after the `
    ` it will work.
     – Mayank Shukla Sep 14 '17 at 20:12
  • presumably you ran webpack, it produced no errors, and generated "bundle.js" for you? – Jared Goguen Sep 14 '17 at 20:13
  • check [this answer for more details](https://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem) – Mayank Shukla Sep 14 '17 at 20:14
  • @MayankShukla Okay... I did that... I have put the script after the container `
     – chunkybyte Sep 14 '17 at 20:16
  • Could you try to remove the `.js` extension from your import? `import Counter from './Counter';` This might not be an issue i'm not sure however it's definitely not usual to write so. – Zoltán Tamási Sep 14 '17 at 20:21
  • @JaredGoguen It's working... I stopped the server, now I ran the compile command again and restarted the server. It worked. Thanks for the tip. Although I thought the webpack auto ran itself with the `npm start` command and I didn't have to do it explicitly. – chunkybyte Sep 14 '17 at 20:23
  • @MayankShukla thanks dude for all the help but it was the webpack bundle.js the whole time I guess coz it worked after running the webpack explicitly and restarting the server. – chunkybyte Sep 14 '17 at 20:25
  • 1
    You can use `webpack-dev-server` that will serve the static files in your build folder. It’ll watch your source files, and recompile the bundle whenever they are changed. – Taras Yaremkiv Sep 15 '17 at 06:52

0 Answers0