React component not rendering on DOM

Question

I'm walking through a react tutorial at http://andrewhfarmer.com/build-your-own-starter/#0-intro and the Counter component won't show up on the page. The html comes out like this:

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

We run server:

cchilders@cchilders-Latitude-E7240:~/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.

Refreshing page shows nothing in terminal, but developer tools console shows the Hello World! on each refresh

It seems template isn't being rendered, but the last time my friend did the tutorial it worked as is (the public aspect in the middleware might have served it)

Why is this server not serving files from /?

The code is at https://bitbucket.org/servandoavila1/codetutorials

Thank you

I added console above, it does the prints you'd expect. The Chrome console prints the Hello world! when you refresh page — Servando Avila
– Servando Avila, Commented Feb 2, 2017 at 3:47

Shubham Khatri · Accepted Answer · 2017-02-02 03:36:11Z

1

There is no need for you to use document.addEventListener('DOMContentLoaded', function() {.

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>

answered Feb 2, 2017 at 3:36

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Servando Avila Over a year ago

do you know why that breaks it?

Servando Avila Over a year ago

I did it your way and surprisingly doesn't work. Using google chrome, have hard refreshed. No errors on server or frontend

Shubham Khatri Over a year ago

It doesnt make any difference but could you try <Counter/> instead of React.createElement

zoan · Accepted Answer · 2017-02-02 05:00:24Z

0

When did you last run npm run compile?

I just did the tutorial myself and ran into the same issue that you did. I was able to resolve it by running npm run compile again after adding the React stuff.

It seems that the tutorial may be missing a step, since bundle.js needs to be compiled again after React is added.

answered Feb 2, 2017 at 5:00

zoan

4114 silver badges5 bronze badges

Comments

Alfred Crosby · Accepted Answer · 2017-02-02 13:30:36Z

0

try to set the publicPath on your webpack config

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

And make sure you have ['es2015', 'react'] presets on your .babelrc

Tips: on main.js you can do like this

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

answered Feb 2, 2017 at 13:30

Alfred Crosby

1361 silver badge9 bronze badges

Comments

love-for-coding · Accepted Answer · 2017-08-22 09:01:37Z

0

use JSX loader as below in your loader.config.js file :

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

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

answered Aug 22, 2017 at 9:01

love-for-coding

2272 silver badges8 bronze badges

Collectives™ on Stack Overflow

React component not rendering on DOM

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related