ReactJs CreateClass is not a function
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! '
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);
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>
)
}
}
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>`);
}
});