Zenn
🙌

ReactとRailsの関係性がわかるサンプルアプリ集

2020/10/27に公開
Rails
React
フロント
flux
tech

RailsフロントエンドのJSフレームワーク（ライブラリ）として、ReactJSの使用を検討。ReactとRailsの関係にはいくつかのパターンがあるかもしれないので、それらのパターンを紹介したいと思います。重要なのは、ReactとRailsの間の緊密な接続です。それは大きく次の3つのモードに分けることができます。

RailsビューにReactを埋め込む方法

  • react-railsと呼ばれるgemがリリースされているので、それを使用する方が良いです。

  • react-railsが行う主なことは次のとおりです。

    • アセットパイプラインで .js.jsxを変換します。
    • ビューで、 react_componentヘルパーを使用してReactコンポーネントをレンダリングします。
    • サーバー側のレンダリングは、 prerender：true オプションを使用して実行することもできます。

  • この場合、ReactのJS（JSX）ファイルもRailsのasset_pipelineを使用してコンパイルされます。

Rails -> React：サーバー側のレンダリング

  • Railsによってレンダリングされたビューにjsonを埋め込み、サーバー側でJSを実行して初期表示を行うことができます。
  • いわゆるサーバー側レンダリングを使用して、初期ロード時間を短縮し、SEOをサポートできます。

サンプルアプリケーション

bensmithett/sample-react-rails-app · GitHub

Rails + React + Flux

  • react-railsに基づいていますが、RailsプロジェクトにFluxアーキテクチャの例を組み込んでいます -この例では、「alt」がFluxの実装に使用されています。
  • 資産管理に rails-assets を使用。

サンプルアプリケーション

zhubert/react-flux-rails-demo
goatslacker/alt

ReactのフロントエンドアプリケーションをRailsプロジェクトに埋め込む方法

Rails + React

  • フロントエンドアプリケーションを構築するためにRailsの「asset-pipeline」メカニズムを使用する必要はありません。
    • もちろん、 react-railsは使用しないでください。
    • webpackなどを使用してリアクティブアセットをコンパイルします。
      -ただし、Railsプロジェクトの clientディレクトリなどをカットして管理しています。
  • アプリケーションとして分離されていますが、プロジェクトとしてアプリケーションに含めることができるため、3よりも開発が容易です。
  • これは、npmモジュールを使用したりES6で記述したりできるので便利ですが、フロントエンド開発環境をセットアップするのは困難です。
  • ロントエンドサーバーとサーバー側サーバーを同時に起動する必要があります。

サンプルアプリケーション

justin808/react-webpack-rails-tutorial · GitHub

RailsAPIとReactフロントエンドアプリケーションを分離する方法

  • RailsはAPIの使用を主張し、jsonのみを返します。
  • Reactは、ビューのルーティングとレンダリングを担当します。
  • この場合、ReactはFluxアーキテクチャで使用する必要があると思います。
  • サーバー側のレンダリングを考慮しない場合は、フロントエンドとサーバーを明確に分離できます。
  • 完全に独立したプロジェクトとして機能できますが、開発のオーバーヘッドが高くなります
  • すべてのAPIベースのアプリケーションと同様に、以下を個別に検討する必要があります。
    • API認証（トークンベース/ Cookieベース）
    • CORS

サンプルアプリケーション

FancyPixel/small-frontend · GitHub
React + Flux backed by Rails API - Part 1 | Fancy Pixel
React + Flux backed by Rails API - Part 2 | Fancy Pixel
React + Flux backed by Rails API - Part 3 | Fancy Pixel

見積もり

  • この素晴らしい記事を読んだ後、それだけですが、サンプルアプリケーションで整理したいので、記事にします。
  • React + Railsの他のサンプルアプリケーションがある場合は、お知らせください。

サンプルアプリケーション

3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations
react-rails // Speaker Deck
React and Rails

Discussion