React.jsを使いたいRailsおじさんがJavaScriptライブラリをそれっぽく管理しながら入門する

IT技術関連

Sendagaya.rb #114に来たので、目標のブログ記事を書いてた。

今日は、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

ソースとか

まとめ

とりあえず出来たぞ！