javascript - React is not defined - Stack Overflow

I just started to play around with the react gem but I seem to running into issues. With the code below

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>
    );
  }
});
Share Improve this question asked Jul 26, 2014 at 18:58 theStigtheStig 6101 gold badge13 silver badges33 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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.

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744692564a4588295.html

相关推荐

  • javascript - React is not defined - Stack Overflow

    I just started to play around with the react gem but I seem to running into issues. With the code below

    1天前
    60

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信