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/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>
);
}
});
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./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>
);
}
});
2 Answers
Reset to default 2Try 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.
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 ponents
The line that mention "ponents" depends on the folder you actually puts your react ponent files.