CODEWITHSUNDEEP
reactjswebpackbabeljs
trogne
trogne

Reputation: 3552

React component not rendering on with latest version

My react component was not rendering, so I suspected many things until I noticed that it only works with an older React version : 

npm install --save [email protected]

Component was not rendering with latest React (version 16).

What should be changed to make this work with React 16 ?

webpack.config.js : 

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

.babel.rc : 

{
    "presets": [
        ["es2015"],
        "react"
    ],
    "plugins": [
        "babel-plugin-transform-class-properties"
    ]
}

app-client.js : 

var React = require('react');
var APP = require('./components/APP');

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

app-server.js : 

var express = require('express');

var app = express();

app.use(express.static('./public'));
app.use(express.static('./node_modules/bootstrap/dist'));

app.listen(3000);
console.log("Polling server is running at 'http://localhost:3000'");

components/APP.js : 

var React = require('react');

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

module.exports = APP;

Upvotes: 0

Views: 441

Answers (3)

trogne
trogne

Reputation: 3552

The solution is to use "create-react-class" (thanks to @pwolaq and @Victor), and to render with ReactDOM instead of with React :

APP.js :

var React = require('react');
var createReactClass = require('create-react-class');

var io = require('socket.io-client');

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

module.exports = APP;

app-client.js:

var React = require('react');
var ReactDOM = require('react-dom');
var APP = require('./components/APP');

//React.render(<APP />, document.getElementById('react-container'));
ReactDOM.render(<APP />, document.getElementById('react-container'));

Upvotes: 0

Victor
Victor

Reputation: 14593

According to the Upgrade Guide, React.creaateClass is now available as a separate package, react-create-class. This is why you’re code is not working most likely.

Also, instead of React.render, you have to use ReactDOM.render

Upvotes: 1

pwolaq
pwolaq

Reputation: 6381

React.createClass is deprecated for a long time. My guess is that it isn't supported since version 16.0 (actually, I am correct)

So, since you asked what can you do to fix this, these are the options:

  • stick to version < 16.0 (I wouldn't recommend that)
  • use create-react-class package (I wouldn't recommend that either)
  • migrate to class components (in my opinion this is the best choice)

Upvotes: 3

Related Questions