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