react_rails
- 2. 自己紹介 近藤 茂(twitter: @subcigel, github: cncgl) フリーエンジニア 主にバックエンドとフロントエンド 10年ぐらいのブランクがある（ほぼ新人）
- 3. Reactとは Facebook製JavaScript UI ライブラリ 単一方向データフロー Virtual DOM JSXシンタックス
- 4. react_railsとは Rails で React を扱いやすくする
- 6. 使い方(Rails) $ rails new react-rails-sample —bundle-skip $ cd react-rails-sample $ vim Gemfile gem ‘react_rails’, ‘~>1.2.0’ $ bundle install —path vendor/bundle
- 7. 使い方（React） $ rails g react:install create app/assets/javascripts/components create app/assets/javascripts/ components/.gitkeep insert app/assets/javascripts/application.js insert app/assets/javascripts/application.js insert app/assets/javascripts/application.js create app/assets/javascripts/components.js
- 8. React Component 生成 $rails g react:component CommentBox create app/assets/javascripts/components/ comment_box.js.jsx
- 9. JSX 修正 $ vim app/assets/javascripts/components/comment_box.js.jsx var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } });
- 10. controller & view $ rails g controller comments $ vim app/views/comments/index.html.erb <%= react_component(‘CommentBox’) %>
- 11. Routing $ vim config/routes.rb root ‘comments#index’ localhost:3000 でアクセスして表示されれば 成功
- 12. Server Rendering index.html.erb で使用した react_component() において { prerender: true } を渡すことにより server 側で rendering できるようになる(少 し、条件がある)。
- 13. まとめ Rails で React するなら react_rails が便利 react_rails にはサーバーサイドレンダリング の機能があり、SEOに優れている