Sendagaya.rb #114に来たので、目標のブログ記事を書いてた。
今日はsendagaya.rbへ行ってブログ記事を一本仕上げるのが目標。
— Koshikawa Naoto (@ppworks) August 10, 2015今日は、React.jsの会なので、RailsからReact.jsをざっくり使って見る準備をしてみます。
目指すもの
- sprocketsのままとりあえず進む
- jsのライブラリをnpmで管理したい
- React.jsをES6で書きたいし、JSX書きたい
- herokuで動かすぞ！
- react-railsは使いたくない
方針
sprocketsと共存するために、browserify-railsを利用し、ES6はBabelを利用します。ライブラリはそのまま、npmで管理します。
npmを入れます
もし入っていなければnpmを入れましょうね。
brew install npm
package.jsonの準備
browserify-railsにある例のまま記載します。
package.json
{ "name": "sendagayarb", "dependencies" : { "browserify": "~> 10.2.4", "browserify-incremental": "^3.0.1" }, "license": "MIT", "engines": { "node": ">= 0.10" } }
npm install --save
更に今回は、babelifyとreactを入れます。
npm install babelify --save npm install react --save
するとこんな感じの、package.jsonになりますね。
package.json
{ "name": "sendagayarb", "dependencies": { "babelify": "^6.1.3", "browserify": "~> 10.2.4", "browserify-incremental": "^3.0.1", "react": "^0.13.3" }, "license": "MIT", "engines": { "node": ">= 0.10" } }
.gitignoreの設定
node_modulesディレクトリをgit管理対象外とします。
.gitignore
node_modules
browserify-railsを入れる
Gemfile
gem 'browserify-rails'
browserify-railsの設定を入れます。今回は、babelifyを使ってます。
config/application.rb
config.browserify_rails.commandline_options = '-t babelify --extensions .es6'
herokuの準備
Gemfile
group :production, :staging do gem 'rails_12factor' en
heroku create sendagayarb
node.jsとrubyを利用するために、multi buildpackの設定をします。
.buildpacks
https://github.com/heroku/heroku-buildpack-nodejs https://github.com/heroku/heroku-buildpack-ruby
herokuへpush
git push heroku master
React.jsのサンプル
ホント意味ないほどのサンプルです。
app/javascripts/application.js
//= require jquery //= require jquery_ujs window.onload = function() { require('./top.es6'); };
jquery_ujsは、railsのヘルパー使いたいシーンもあるので置いてあります。
app/javascripts/top.es6
import React from 'react' React.render( <div>hoge</div>, document.getElementById('target') )
app/views/pages/top.html.erb
<div id="target"></div>
app/controllers/pages_controller.rb
class PagesController < ApplicationController end
config/routes.rb
Rails.application.routes.draw do root to: 'pages#top' end
ソースとか
まとめ
とりあえず出来たぞ！
