Rails and React - React.createClass / React.createReactClass is not a function

Question

I am trying to use React within a Rails application. I am using Rails 5.2.1 and Ruby 2.4.1. I also installed react-rails gem version 2.4.4 and also tried in 2.4.7. I have a

sites_controller.rb

class SitesController < ApplicationController

  def index
  end
end

views/sites/index.html.erb

<%= react_component 'Main' %>

app/assets/javascripts/components/_main.js.jsx

var Main = React.createReactClass({
render() {
 return (
      <div>
        <Header />
      </div>    
   )
  }
})

app/assets/javascripts/components/_header.js.jsx

var Header = React.createReactClass({
 render() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

});

I first tried createClass and as it did not work and some links said createClass has been rmoved from React JS v16, I tried createReactClass. I get the following error

  Uncaught TypeError: React.createReactClass is not a function
at _header.self- 
(anonymous) @ _header.self- 
 f50926322cbfc16ac78826d5bfa8a3f192af29cac5125c3955f9bef3355b54d9.js? 
  body=1:1
_main.self-1ed2e3a6d11c77d50ab4dd84f59f619d3ae85141ee36949c34885bb6b90992c4.js?body=1:1 Uncaught TypeError: React.createClass is not a function
at _main.self-1ed2e3a6d11c77d50ab4dd84f59f619d3ae85141ee36949c34885bb6b90992c4.js?body=1:1
(anonymous) @ _main.self-1ed2e3a6d11c77d50ab4dd84f59f619d3ae85141ee36949c34885bb6b90992c4.js?body=1:1
  react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:313 Uncaught Error: Cannot find component: 'Main'. Make sure your component is available to render.
    at Object.mountComponents (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:313)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:350)
    at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6)
    at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7)
    at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6

score 1 · Answer 1 · answered Oct 31 '18 at 11:45

1

This seems to be a version problem. I had to use the following syntax to get this working.

class Main extends React.Component{
  render() {
    return (
      <div>
        <Header />
      </div>    
    )
  }
}

answered Oct 31 '18 at 11:45

Suganya Selvarajan

962
1
11
33

score 0 · Accepted Answer · answered Oct 31 '18 at 11:55

Relevant docs are here:

https://reactjs.org/docs/react-without-es6.html

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

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

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

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

The API of ES6 classes is similar to createReactClass() with a few exceptions.

Rails and React - React.createClass / React.createReactClass is not a function

2 Answers2