Naveen DINUSHKA Naveen DINUSHKA - 3 years ago 888
React JSX Question

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

Answer Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download