mmyoji's diary

プログラミングとか日々のどうでもいいこととか

Rails + React + ES6を使う最小構成

ES6を使うとか書きましたが、 import, export が使えないというかなり中途半端な感じなのであくまでシンタックスレベルで「使える」という話です。

import, export使えないんですが、Reactって基本的にcomponentの親子がはっきりしているので、 別にassets pipelineの //= require module でお互いを管理してもそんなに問題ないかなーと思ってこれ書きました

参考

セットアップ

Gemfile

gem "sprockets"
gem "sprockets-es6", require "sprockets/es6"
$ bundle install

$ npm init -y

$ npm i -S react # react-rails使ってもいいですがserverside renderingにこだわりなければnpmで管理

app/assets/javascripts/application.js

//= require react/dist/react.min
//= require components
// require_tree . は消してしまっておk

app/assets/javscripts/components.js

/* 
 * components ディレクトリを用意してそこから一番親のcomponentのみここにrequireする
 * 今回はappというcomponentが一番上位のcomponentとする
*/
//= require ./components/app

適当にrootのcontroller, viewを生成

$ rails g controller Dashboard index

config/routes.rb

  root to: "dashboard#index"

app/views/dashboard/index.html.erb

<div id="app"></div>

es6で書きたいファイルの拡張子*.es6 に!

app/assets/javascripts/components/app.es6

var App = React.createClass({
  render() {
    return (
        <div>
          <h2>{this.props.message}</h2>
        </div>
    )
  }
})


document.addEventListener("DOMContentLoaded", () => {
  React.render(<App message="FOOOOO" />, document.getElementById("app"))
})

こんな感じで app/assets/javascripts/components/*.es6 をいっぱい作って、子componentは親componentで普通のjsファイルと同様に //= require ./foo とかってしてrequireしていけばいい感じに書けるんじゃないでしょうか。

おしまい。

追記

componentsだけじゃなくて他に各コンポーネントで利用したいmoduleなどが出てくると思うのでそうなっちゃうとやっぱり依存関係気にしながら書かないといけなかったりするので、やっぱassets pipelineの外で管理した方がいいですかねー。気にせず application.js とか components.js とかでまるっとrequireしてglobalにアクセスできるようにしておくのも豪快でいい?かもですが、複数人開発ならきついかなー