Rails - React is not defined

Question

First of all, this is not a duplicate! It's the same 'not defined' error but follows exactly the github (https://github.com/reactjs/react-rails) guide and still not working

Gemfile:

gem 'rails'
gem 'pg', '~> 0.15'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'therubyracer'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'sprockets-rails'
gem 'react-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc

application.js:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components

application.html:

<!DOCTYPE html>
<html>
<head>
  <title>project</title>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= javascript_include_tag 'react' %>
  <%= csrf_meta_tags %>
</head>
<body>

components/app.js.jsx:

// var React = window.ReactRailsUJS;

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

ReactDOM.render(
    <Hello />,
    document.getElementById("react-msg")
);

console.log(1);

html file:

<style type="text/css">
  h1, h3 {
    font-weight: bold;
  }
</style>

<div class="container">
  <h1>React JS</h1>
  <h3 id="react-msg"></h3>
</div>

development.rb:

Rails.application.configure do
...

# config/environments/development.rb
config.react.variant = :development

# to include react add-ons
config.react.addons = true # defaults to false

end

When I visit the page it says

ReferenceError: React is not defined

What I did wrong?

If I uncomment the following

var React = window.ReactRailsUJS;

it says createClass is not a function and same for every other React function

Yes, still not working. I tried the same thing on Cloud9 on other project so it's not a "project bug" either — Rares Mardare
– Rares Mardare, Commented Feb 11, 2016 at 20:10
guessing your browser had not been aware of react at the time you had called it — Drew
– Drew, Commented Feb 11, 2016 at 20:10
@Drew is right. javascript_include_tag 'application' should come after the javascript_include_tag 'react' line — Shiva Nandan
– Shiva Nandan, Commented Feb 11, 2016 at 21:44

dev404 · Accepted Answer · 2017-11-23 22:47:04Z

2

For anyone that runs onto this issue and lands here, apparently it is a problem beginning with version 16 onward of React. The reason is cause React.createClass is deprecated. Instead, you're supposed to use createReactClass.

Much of the (now old) documentation provided an example like this:

var HelloMessage = React.createClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

Instead, you should use this:

var HelloMessage = createReactClass({
  render: function() {
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

I can only assume they didn't update their examples, and many of them are still showing up when you search for react-rails as of Nov-2017.

answered Nov 23, 2017 at 22:47

dev404

1,09416 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rails - React is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related