ReactJs CreateClass is not a function

reactjs

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

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! '

ReactJs CreateClass is not a function

Related

Recent Posts