lookininward lookininward - 9 months ago 29
Javascript Question

Why doesn't React component doesn't render even though webpack doesn't throw any errors?

app-client.js

var React = require('react');
var APP = require('./components/APP');
React.render(<APP />, document.getElementById('react-container'));


App.js (component)
var React = require('react');

var APP = React.createClass({
render() {
return (<h1>Hello World form React</h1>);
}
});

module.exports = APP;


webpack.config.js I had issues with webpack but solved that with presets added. It runs fine now.

module.exports = {
entry: "./app-client.js",
output: {
filename: "public/bundle.js"
},
module: {
loaders: [
{
exclude: /(node_modules|app-server.js)/,
loader: "babel-loader",
query: {
presets: [
'es2015',
'react'
]
}
}
]
}
};


Index.html:

<div id="react-container" class="container">
<h1>Live Polling</h1>
</div>
<script type="text/javascript" src="bundle.js"></script>


Folder structure:

app-client.js
app-server.js
components
- app.js
public
- bundle.js
- index.html
- style.css
webpack.config.js
package.json


I run webpack, then start up the server but the contents inside the div "react-container" don't get overwritten with those of the component (app.js).

Answer Source

React render function was moved from React module to ReactDOM so please try this:

var React = require('react');
var ReactDOM = require('react-dom').
var APP = require('./components/APP');
ReactDOM.render(<APP />, document.getElementById('react-container'));