react-railsとreact_on_railsについてのメモ
個人用の調べたことや思ったことメモ。
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
その他
- Hypernova
ExecJSとは
Rubyからjavascriptを実行できるようにするためのもの。
各javascriptランタイムを抽象化して同じインターフェースで利用できるようにする。
ランタイム
- therubyracer
- Gemfileでデフォルトで入っていたやつ
- メモリ使用量が多いのが難点
- インストールも苦労するのだが
- 最近はmini_racer推奨
- Node.js
- いわずとしれたサーバサイドでも使えるjavascript
- mini_racer
- therubyracerよりも高速、安定、省メモリ
- therubyracerが抱えていた古いV8エンジンの問題も解決