1
React + Rails를 배우기로 결심했습니다. I는 다음과 같습니다 간단한 구성 요소를 렌더링 할 :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)
jsx가 (가) javascript로 변환되지 않았습니다. 'config.react.jsx_transform_options'를 가지고 놀아보십시오. –