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