React is not defined

Question

I just started to play around with the react gem but I seem to running into issues. With the code below, whenever I get routed to my react example page, I notice in the browser developer console, it will say "React is not defined." It's referring to this line:

var react_example = React.createClass({

which is in the react_example.js.jsx file (see below).

Gemfile

#... as well as other gems...
gem 'nokogiri'
gem 'react-rails' #<------ React
gem 'less-rails'
gem 'therubyracer'
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

development.rb

config.react.variant = :development
config.react.addons = true

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>React example</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "react" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

react_example.js.jsx

/** @jsx React.DOM */

var react_example = React.createClass({
  render: function () {
    return (
      <div>
        <h5>React</h5>
      </div>
    );
  }
});

score 2 · Answer 1 · answered Jul 26 '14 at 19:29

2

Try switching your JS includes:

<%= javascript_include_tag "react" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Since you use React in your application JS, it needs to be defined first.

answered Jul 26 '14 at 19:29

Sophie Alpert

139,698
36
220
238

That seemed to do the trick, but now my html is not actually rendering my react component. React is loaded, as well as my script, but nothing is being shown on my page. – theStig Jul 26 '14 at 19:59
You need a call to `React.renderComponent` or the Rails view helper `render_component` somewhere. See the React tutorial and react-rails README for more details. – Sophie Alpert Jul 26 '14 at 20:21

score 1 · Accepted Answer · answered May 10 '15 at 11:14

That's actually not the best way to do it, unless you really wanna load react apart from your application.

The documentation states clearly you should do this inside your application.js manifest file:

//= require react
//= require react_ujs
//= require components

The line that mention "components" depends on the folder you actually puts your react component files.

React is not defined

2 Answers2

Linked