react_railsRuby舞鶴2015.8.23

自己紹介

近藤　茂(twitter: @subcigel, github: cncgl)

フリーエンジニア

主にバックエンドとフロントエンド

10年ぐらいのブランクがある（ほぼ新人）

Reactとは

Facebook製JavaScript UI ライブラリ

単一方向データフロー

Virtual DOM

JSXシンタックス

react_railsとは

Rails で React を扱いやすくする

元記事

Qiita: “react-railsを使ってReactのTutorialを

やってみる” @joe-re

使い方(Rails)

$ rails new react-rails-sample —bundle-skip

$ cd react-rails-sample

$ vim Gemfilegem ‘react_rails’, ‘~>1.2.0’

$ bundle install —path vendor/bundle

使い方（React）$ rails g react:install

create app/assets/javascripts/components create app/assets/javascripts/components/.gitkeepinsert app/assets/javascripts/application.js insert app/assets/javascripts/application.js insert app/assets/javascripts/application.js create app/assets/javascripts/components.js

React Component 生成

$rails g react:component CommentBox create app/assets/javascripts/components/comment_box.js.jsx

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> ); }});

controller & view

$ rails g controller comments

$ vim app/views/comments/index.html.erb<%= react_component(‘CommentBox’) %>

Routing

$ vim config/routes.rb root ‘comments#index’localhost:3000 でアクセスして表示されれば

成功

Server Rendering

index.html.erb で使用した react_component()

において { prerender: true } を渡すことにより

server 側で rendering できるようになる(少

し、条件がある)。

まとめ

Rails で React するなら react_rails が便利

react_rails にはサーバーサイドレンダリング

の機能があり、SEOに優れている