React.createClass is not a function, may be webpack compling error

Question

I used webpack to set react envirement, and run the code using this line:

webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234

The cmd runs some builds, and than shows the line:

webpack: Compiled successfully.

instead of :

webpack: bundle is now VALID

like I saw in the example.

and than it says on the browser console:

Uncaught TypeError: React.createClass is not a function

What could it be?

my dependencies:

"dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
 },
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1",
   "webpack": "^3.8.1",
   "webpack-dev-server": "^2.9.4"
 }

my code:

var React = require('react');
var ReactDOM = require('react-dom');

// Create component
var TodoComponent = React.createClass({
  render: function () {
    return(
      <h1>Hello!!</h1>
    );
  }
});

// put component into html page

ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));

By the way, this is my first question here, so please forgive me for starters mistakes.. ;)

Answer 1

In version 16.x of React, React.createClass has been moved to its own package named create-react-class .

Documentation here: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging

So, you should do npm i create-react-class --save .

And then adjust your code:

var React = require('react');
var ReactDOM = require('react-dom');
var createClass = require('create-react-class');

// Create component
var TodoComponent = createClass({
  render: function () {
    return(
      <h1>Hello!!</h1>
    );
  }
});

// put component into html page

ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));

Otherwise, you should use the ES6 class Component, which is more idiomatic in react:

var React = require('react');
var ReactDOM = require('react-dom');

// Create component
class TodoComponent extends React.Component {
    render() {
        return(
            <h1>Hello!!</h1>
        );
    }
}

// put component into html page

ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));