CODEWITHSUNDEEP
ruby-on-railsreactjsundefinedreact-rails
Rares Mardare
Rares Mardare

Reputation: 273

Rails - React is not defined

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

Upvotes: 1

Views: 1908

Answers (1)

dev404
dev404

Reputation: 1098

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.

Upvotes: 2

Related Questions