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
4 answers
solution1
1 2017-02-02 03:36:11
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>
solution2
0 2017-02-02 05:00:24
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.
solution3
0 2017-02-02 13:30:36
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')
);
solution4
0 2017-08-22 09:01:37
use JSX loader as below in your loader.config.js file :
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.