Uncaught TypeError: React.createClass is not a function exception

Question

I did a html page like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React project</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="react.js" type="text/babel"></script>
  </body>
</html>

And the file react.js like this

var Comp1 = React.createClass({
  render: function() {
    return(
      <h1> Comp1 </h1>
    );
  }
});


ReactDOM.render(
  <div>
    <Comp1/>
  </div>,
  document.getElementById("root")
);

But, I got "Uncaught TypeError: React.createClass is not a function" exception, why?

Possible duplicate of ["Uncaught TypeError: React.createClass is not a function" in Render.js file (electron app)](https://stackoverflow.com/questions/46556011/uncaught-typeerror-react-createclass-is-not-a-function-in-render-js-file-ele) — Allen, Apr 30 '18 at 03:23

Rohith Murali · Answer 1 · 2018-04-30T02:32:45.863

Normally you would define a React component as a plain JavaScript class:

class Comp1 extends React.Component {
  render() {
    return <h1> Comp1 </h1>;
  }
}

If you don’t use ES6 yet, you may use the create-react-class module instead:

var createReactClass = require('create-react-class');
var Comp1= createReactClass({
  render: function() {
    return <h1> Comp1 </h1>;
  }
});

Or,

import React from 'react';

const Contacts = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

Uncaught TypeError: React.createClass is not a function exception

1 Answers1