React on Rails で hello world してみる

お久しぶりです。

最近は、Vue.js を触っていましたが React.js というやつも触れてみたかったのでやってみました。

今回は環境を作って、hello world をするところまでです。

やりたいことリスト

• React を使う（Rails の中で）
• ES6 も使う（JSXも触ってみたい）
• Sprockets でコンパイルする
• npm で JSライブラリを管理する

---

Gem 追加

Sprockets で ES6 もいい感じにコンパイルしてもらうために、browserify-rails という gem を追加します。

Gemfile

gem 'browserify-rails'

config/application.rb

config.browserify_rails.commandline_options = '-t babelify --extensions .es6'

npm (package.json) の準備

{
  "name": "react_on_rails",
  "dependencies": {
    "babelify": "^6.4.0",
    "browserify": "^13.1.1",
    "browserify-incremental": "^3.1.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

※最新版の babelify(7.3.0) では、うまく動かなかったので 6.4.0 のバージョンを指定

$ npm install

土台つくる　

$ bin/rails g controller pages top

修正していく

config/route.rb

Rails.application.routes.draw do
  root to: 'pages#top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

app/controllers/pages_controller.rb

class PagesController < ApplicationController
end

app/views/pages/top.html.erb

<div id="target"></div>

app/assets/javascripts/application.js

window.onload = function() {
  require('./top.es6');
};

app/assets/javascripts/top.es6

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>hello world</div>,
  document.getElementById('target')
)

起動

$ bin/rails s

トップ画面で、hello world が表示されてること確認できました。

ログをみると開発環境では、初回のロード時に babelify してくれてるのがわかります。

Browserify: /Users/7kaji/Dev/rr/node_modules/.bin/browserifyinc -t babelify --extensions .es6 --list --cachefile=/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/output20161025-72290-1too9up" -
Browserify: /Users/7kaji/Dev/rr/node_modules/.bin/browserifyinc -t babelify --extensions .es6 --cachefile=/Users/7kajiDev/rr/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/output20161025-72290-28pg6y" -
Completed 200 OK in 3598ms (Views: 3590.3ms | ActiveRecord: 0.0ms) 

今後

Sprockets4 では、 ES6、npm もサポートされるような話なのでもっと簡単に JS周りの整備できそうです。 界隈では、Sprockets は捨てられがちですが v4 がでれば解決することも多くありそうですね。

NPM support: Add support for resolving main from npm's package.json by guilleiguaran · Pull Request #405 · rails/sprockets · GitHub

github.com

REF

ppworks.hatenablog.jp

ppworks さんの記事をほぼほぼコピペさせていただきましたmm