for Ruby Maizuru

1. react_rails
Ruby舞鶴2015.8.23

2. 自己紹介
近藤 茂(twitter: @subcigel, github: cncgl)
フリーエンジニア
主にバックエンドとフロントエンド
10年ぐらいのブランクがある（ほぼ新人）

3. Reactとは
Facebook製JavaScript UI ライブラリ
単一方向データフロー
Virtual DOM
JSXシンタックス

4. react_railsとは
Rails で React を扱いやすくする

5. 元記事
Qiita: “react-railsを使ってReactのTutorialを
やってみる” @joe-re

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に優れている