Rails - React is not defined

Question

Rails - React is not defined

1.8k Views Asked by Rares Mardare At 19 October 2024 at 16:29

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

Original Q&A

There are 1 best solutions below

**dev404** · Answer 1

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.

Rails - React is not defined

There are 1 best solutions below

Related Questions in RUBY-ON-RAILS

Related Questions in REACTJS

Related Questions in UNDEFINED

Related Questions in REACT-RAILS

Trending Questions

Popular # Hahtags

Popular Questions