1

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)
1
  • Looks like your jsx are not transformed to javascript. Try to play with config.react.jsx_transform_options Commented Jul 15, 2016 at 5:11

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.