ReactJs CreateClass is not a function

var React = require('react');
    
module.exports=React.createClass({
   render:function(){
   return(
    	<div>
    	   <h1> the list  </h1>
    	</div>   
   )}
})

When I run the above code I get the following error :

app.js:4 Uncaught TypeError: React.createClass is not a function

Is this because of a version difference or a typo ?

package.json-I have included create-react-class as seen here but not in the bower.json file 


 {
    "dependencies": {
        "browser-sync": "^2.18.13",
        "browserify": "^14.4.0",
        "create-react-class": "^15.6.2",
        "ejs": "^2.5.7",
        "express": "^4.16.0",
        "gulp": "^3.9.1",
        "gulp-live-server": "0.0.31",
        "react": "^16.0.0",
        "reactify": "^1.1.1",
        "vinyl-source-stream": "^1.1.0"
      }
    }

gulpfile.js -Am I missing some dependency in this file

var gulp= require('gulp');
var LiveServer= require('gulp-live-server');
var browserSync=require('browser-sync');
var browserify = require('browserify');
var reactify= require('reactify');
var source = require('vinyl-source-stream');

gulp.task('live-server', function(){

	var server= new LiveServer('server/main.js');
	server.start();
})

gulp.task('bundle',function(){
  return browserify({
  	entries:'app/main.jsx',
  	debug:true,
  })
  .transform(reactify)
  .bundle()
  .pipe(source('app.js'))
  .pipe(gulp.dest('./.tmp'))

})


gulp.task('serve',['bundle','live-server'],function(){
	browserSync.init(null,{
		proxy: "http://localhost:7777",
		port:9001
	})
})

And my main.jsx has the following

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

var GroceryItemList=require('./components/GroceryItemsList.jsx');

React.render(<GroceryItemList/>,app);

the groceryitems.jsx has the following

var React = require('react');
var createReactClass = require('create-react-class');
module.exports=React.createReactClass({
	
		render:function(){
			return(
				<div>
					<h1> Grocery Listify </h1>
				</div>

			)

		}
})    
  

When I add the createReactClass I get an error: createReactClass is not a function and when I add import and ES6 syntax I get 'illegal import deceleration ' Thank you,

Naveen

This is surely a version problem, If you are starting fresh, I would suggest you to create a React component by extending React.Component rather than using React.createClass since its deprecated from version 16.0 onwards and has been moved to a separate package 'create-react-class' as @Dream_Cap also mention

Also go with the ES6 syntax for imports. You would modify your code to

import React from 'react';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}

Per the documents, you need to get the npm create react class package. From the command line of your project's file path, you need to do npm install create-react-class --save, and then modify the code like this:

var React = require('react');
//You need this npm package to do createReactClass
var createReactClass = require('create-react-class');

    module.exports=createReactClass({
            render:function(){
                return(
                    <div>
                        <h1> the list  </h1>
                    </div>   
                )
            }

You also need React DOM to render the components like this:

npm install react react-dom
var ReactDOM = require('react-dom');
ReactDOM.render(<GroceryItemList/>,app);

If you're getting an Error stating that React.creatClass is an undefined function it's because the newer versions of React don't support that.

You can try the below steps.

Install the create-react-class npm package:

npm install --save-dev create-react-class

Then create a new variable under the ReactDom variable:

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

Now instead of using React.createClass() for the components use the createReactClass() var.

Example: Replace this:

var TodoComponent = React.createClass({
    render: function() {
        return(`<h1>`Helloooo`</h1>`);
    }
});

With this:

var TodoComponent = createReactClass({
    render: function() {
        return(`<h1>`Helloooo`</h1>`);
    }
});

Thanks for all the help .This is how the final answer looks like:

1. use react-dom to render

   var ReactDOM = require('react-dom'); var List=require('./components/List.jsx'); ReactDOM.render(,app);

2. use create-react-class (not react) and export it 'module.exports= createReactClass({.... instead of module.exports=React.createReactClass (this gives an error 'createReactClass' is not a function

Thank you all again! '

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const App = function(){};
App.prototype = Object.create(Component.prototype);
App.prototype.render = function(){
     return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
     )
   }
export default App;

In this way you could avoid Class keyword

React.createClass is not listed in updated documentation, You have to go for createComponent with ECMA6 Class

Try npm install first it could be that your devependencies in package.json is not fully installed.