決定學習React + Rails。我想呈現一個簡單的組件，它看起來像這樣：使用React in Rails無法正常工作的組件呈現

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

視圖/反應/ index.html.erb

<%= react_component 'App' %>

我相信這足以在我的屏幕上顯示文字。我越來越：

的routes.rb

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

而且我使用的react-rails寶石。

從服務器（本地）我得到（顯然有地方一個語法錯誤）：

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/[email protected]/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_source.erb (5.1ms) 
    Rendered /Users/siaw/.rvm/gems/[email protected]/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (5.0ms) 
    Rendered /Users/siaw/.rvm/gems/[email protected]/gems/actionpack-4.2.6/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (0.8ms) 
    Rendered /Users/siaw/.rvm/gems/[email protected]/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)

來源

2016-07-15 Emanuel

看起來你的jsx沒有轉換爲javascript。嘗試玩'config.react.jsx_transform_options' –

嘗試重命名app.js到app.jsx。另外，無需手動安裝組件和，同時使用react_component。

來源

2016-07-15 05:28:56

使用React in Rails無法正常工作的組件呈現

app.js

react_controller.rb

視圖/反應/ index.html.erb

的routes.rb

回答

相關問題