CODEWITHSUNDEEP
ruby-on-railsrubyreactjs
emi
emi

Reputation: 2950

Component rendering with React in Rails not working

Decided to learn React+Rails. I want to render a simple component that looks like this:

app.js

var App = React.createClass({
  render: function() {
    return (
      <div>
        Hello React first component.
      </div>
    );
  }
});
ReactDOM.render(
  <App />, 
  document.getElementById('content')
);

react_controller.rb

class ReactController < ApplicationController
  def index
    render component: 'App'
  end
end

view/react/index.html.erb

<%= react_component 'App' %>

I believe this is enough to show text on my screen. I'm getting:

enter image description here

routes.rb

Rails.application.routes.draw do
  root 'react#index'
end

And I'm using the react-rails gem.

From the server (local) I get (apparently there's a syntax error somewhere): 

Started GET "/" for ::1 at 2016-07-15 07:06:30 +0200
Processing by ReactController#index as HTML
Completed 500 Internal Server Error in 439ms (ActiveRecord: 0.0ms)

ExecJS::RuntimeError (/private/var/folders/86/mvj6bh4j2k94f52_s9xflmf00000gn/T/execjs20160715-4782-pustjs:22203
      <div>
      ^
SyntaxError: Unexpected token <
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:511:25)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:159:18)
    at node.js:444:3
):
  app/controllers/react_controller.rb:3:in `index'


  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1@global/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_source.erb (5.1ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1@global/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (5.0ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1@global/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (0.8ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1@global/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/diagnostics.html.erb within rescues/layout (73.6ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/_markup.html.erb (1.3ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/_inner_console_markup.html.erb within layouts/inlined_string (1.1ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/_prompt_box_markup.html.erb within layouts/inlined_string (0.9ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/style.css.erb within layouts/inlined_string (0.4ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/console.js.erb within layouts/javascript (64.8ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/main.js.erb within layouts/javascript (0.4ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/error_page.js.erb within layouts/javascript (0.4ms)
  Rendered /Users/siaw/.rvm/gems/ruby-2.3.1/gems/web-console-2.3.0/lib/web_console/templates/index.html.erb (144.0ms)

Upvotes: 1

Views: 2277

Answers (1)

Hubert Łępicki
Hubert Łępicki

Reputation: 684

Try renaming app.js to app.jsx. Also, no need to manually mount component and use react_component at the same time.

Upvotes: 1

Related Questions