Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
react_rails
Ruby舞鶴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 Gemfile

gem ‘react_rails’, ‘~>1.2.0’
...
使い方(React)
$ rails g react:install

create app/assets/javascripts/components

create app/assets/javascripts/
components/.g...
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(...
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に優れている
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Rubyの基礎@Webビギナーズ
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

react_rails

Download to read offline

for Ruby Maizuru

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

react_rails

  1. 1. react_rails Ruby舞鶴2015.8.23
  2. 2. 自己紹介 近藤 茂(twitter: @subcigel, github: cncgl) フリーエンジニア 主にバックエンドとフロントエンド 10年ぐらいのブランクがある(ほぼ新人)
  3. 3. Reactとは Facebook製JavaScript UI ライブラリ 単一方向データフロー Virtual DOM JSXシンタックス
  4. 4. react_railsとは Rails で React を扱いやすくする
  5. 5. 元記事 Qiita: “react-railsを使ってReactのTutorialを やってみる” @joe-re
  6. 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. 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. 8. React Component 生成 $rails g react:component CommentBox
 create app/assets/javascripts/components/ comment_box.js.jsx
  9. 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. 10. controller & view $ rails g controller comments $ vim app/views/comments/index.html.erb
 <%= react_component(‘CommentBox’) %>

  11. 11. Routing $ vim config/routes.rb
 root ‘comments#index’
 
 localhost:3000 でアクセスして表示されれば 成功
  12. 12. Server Rendering index.html.erb で使用した react_component() において { prerender: true } を渡すことにより server 側で rendering できるようになる(少 し、条件がある)。
 

  13. 13. まとめ Rails で React するなら react_rails が便利 react_rails にはサーバーサイドレンダリング の機能があり、SEOに優れている

for Ruby Maizuru

Views

Total views

258

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×