ReactJs CreateClass is not a function

Question

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

Answer 1

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>   
        )
     }
}

Answer 2

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);

Answer 3

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>`);
    }
});

Answer 4

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(<List/>,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! '

Answer 5

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

Answer 6

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

Answer 7

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