パパエンジニアのアウトプット帳

30歳に突入した１児のパパエンジニアのブログ

react-railsとreact_on_railsについてのメモ

Rails react

個人用の調べたことや思ったことメモ。

RailsでReactを利用するのに使われる2大Gem。 どちらもSSRに対応している。

webpackerでreactやるんではダメなん？

webpacker:install:reactのこと。 やれなくはないと思う。

しかし、今回はSPAではなく一部分に導入(ボタン等)したかったので、react_componentのようなヘルパーメソッドがほしかった(部分適用が楽)

下記のようにやる必要があるので、部分適用で箇所が多くなるとツライと思う。。

document.addEventListener("DOMContentLoaded", e => {
  ReactDOM.render(<Hello name="React" />, document.getElementById("ターゲットのid"))
})

react-rails

https://github.com/reactjs/react-rails

  • react登場の初期の頃からある認識
  • execjs依存
  • 単体利用だとコンポーネントをグローバルに紐付ける
    • webpackerをサポートしたので、webpackerを利用していればグローバルではなくなる
  • CSRFトークンをpropで渡す必要がある
  • デフォルトはsprockets利用
    • レールに乗ったままいける
    • 確か内部でreact.jsを持っている(バージョンがちょっと古い)
      • reactのaddonsの利用をサポートしているから？
    • すぐにnpm使いたくなる
      • 今はwebpackerと組み合わせる方法がある
      • 他はbrowserify-rails使う方法かRailsAssets.orgかな？

react_on_rails

https://github.com/shakacode/react_on_rails

  • execjs依存
  • Railsと疎結合でReactを利用できる
    • Rails側で使いやすいようにヘルパーやnpmのライブラリを提供している
  • CSRFはnpmでライブラリが用意されている
    • ReactOnRailsで取得可能
  • 非SPAだと重厚すぎないか？
csrfToken = ReactOnRails.authenticityToken();

// compose Rails specific request header as following { X-CSRF-Token: csrfToken, X-Requested-With: XMLHttpRequest }
header = ReactOnRails.authenticityHeaders(otherHeader);
  • 利用例はr7kamuraさんのamakanが秀逸

http://r7kamura.hatenablog.com/entry/2016/10/10/173610

その他

ExecJSとは

Rubyからjavascriptを実行できるようにするためのもの。

各javascriptランタイムを抽象化して同じインターフェースで利用できるようにする。

ランタイム

  • therubyracer
    • Gemfileでデフォルトで入っていたやつ
    • メモリ使用量が多いのが難点
    • インストールも苦労するのだが
    • 最近はmini_racer推奨
  • Node.js
    • いわずとしれたサーバサイドでも使えるjavascript
  • mini_racer
    • therubyracerよりも高速、安定、省メモリ
    • therubyracerが抱えていた古いV8エンジンの問題も解決