These are the docs for React on Rails 12. To see the version 11 docs, click here.

News

October 14, 2020: RUBY ROGUESRR474:React on Rails V12–そのヤクを剃るな！ ジャスティン-ゴードンと2020年10月1日：SSRをサポートするrails/webpacker gemを介したwebpackの簡単な設定については、spec/dummy example repoを参照してください。2020年8月2日：SSR、HMR fast refresh、TypeScriptを使用したReact on Railsチュートリアルのサンプルレポを参照して、SSRバンドルの作成をrails/webpackerで設定する

2020年7月8日：React on Railsのv12をリリースしました。

主な改善

1. トップレベルコンポーネントのReact Hooksサポート
2. Typescriptバインディング
3. rails/webpackerはデフォルトでReact on Railsで「動作する」だけです。
4. I18n JSファイルではなくJSONファイルを生成するためのサポート。

必ず確認してくださいCHANGELOG.md そして、アップグレードの手順を読んでください：docs/basics/upgrading-react-on-rails。JustinのRailsConfトークを参照してください：Webpacker、それはちょうど動作しますが、どのように？.

Facebookについて

React on Railsは、FacebookのReactフロントエンドフレームワークと（サーバーレンダリング）を統合しています。

このプロジェクトは、ソフトウェアコンサルティング会社ShakaCodeによって維持されています。 私たちは、多くの場合、TypeScriptやReasonMLを使用して、Reactフロントエンドを持つRuby on Railsアプリケーションに焦点を当てています。 また、ギャツビーサイトも構築しています。 私達がすることの例のための私達の最近の仕事を見なさい。

react-routerによるコード分割や、サーバー側レンダリングによるloadable-componentsなど、React on Railsのwebpackセットアップを最適化することに興味がありますか？私たちはPopmenuのためにこれを行い、Herokuのコストを20-25％下げ、平均応答時間を73％減少させました。

ジャスティン*ゴードンに連絡すること自由に感じ、[email protected]詳細については、React on Railsのメンテナ。クリックしてReact+Rails Slackに参加してください。

プロジェクトの目的

特にSEOの向上とパフォーマンスの向上のためのReactサーバー側のレンダリングに関して、Webpacker gemを介してRuby on RailsとReactを統合す

機能となぜRails上で反応するのですか？rails/webpackergemがすでに基本的なReact統合を提供していることを考えると、なぜ「React on Rails」を使用するのでしょうか？RailsビューをロードしてからAPIに別の要求を行うのではなく、railsビューからReactコンポーネントに直接小道具を簡単に渡すことができます。

1. 1. 1. 2. rails/webpackerとの緊密な統合。
         3. SEOクローラーのインデックス作成とUXパフォーマンスによく使用されるサーバー側レンダリング(SSR)は、rails/webpackerによって提供されていません。
         4. ReduxとサーバーサイドレンダリングとのReact Routerの統合。
         5. 国際化（I18N）と（ローカライズ）
         6. 支援コミュニティ。 このウェブ検索は、ライブの公開サイトがReact on Railsをどのように使用しているかを示しています。
         7. 理由MLのサポート。他のgemとの比較については、Rails/Webpacker React統合オプションを参照してください。実際の実装とコードの例については、react-webpack-rails-tutorialを参照してください。
            

            ShakaCode Forumプレミアムコンテンツ

            無料アカウントを作成する必要があります。

            • クライアントとサーバーのレンダリングのためのファイルの異なるバージョンを使用する方法
            • 条件付きでデバイスの種類に基づいてサーバー側Ruby on Rails>=5およびrails/webpacker4.2+。ReactOnRailsの使い方を理解するための最良の方法は、いくつかの簡単な例を勉強することです。 既存のアプリまたは新しいRailsアプリで、簡単なデモ設定を行うことができます。/p>
              1. クイックチュートリアルを実行します。
              2. React on Railsを指示に従って既存のRailsアプリに追加します。
              3. spec/dummy、単純な、DBのない例を見てください。
              4. 見てみてください。
              5. github.com/shakacode/react-webpack-rails-tutorialでのフル機能の例のライブです。www.reactrails.com.

              基本インストール

              既存のRailsアプリにインストールする手順も参照してください。p>

              1. react_on_railsgemをGemfileに追加します:p>

                 bundle add react_on_rails --strict

              2. これをgitにコミットします（または、オプション--ignore-warningsを渡さない限り、ジェネレータを実行することはできません）。/p>

                 rails s

              3. ジェネレータを実行します。

                 rails generate react_on_rails:install

              4. アプリを起動します。

                 rails s

              5. 訪問http://localhost:3000/hello_world。上記のReact on Railsジェネレータを実行しているコードでサーバーレンダリングをオンにする

                 :P>

                 1. app/views/hello_world/index.html.erbprerendertrueに設定します。
                 2. ページを更新します。以下は、prerenderをtrueに設定してサーバーレンダリングをオンにする行です。

                    <%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

                    “ReferenceError:window is not defined”に関するコンソールでエラーが発生した場合は、config/webpacker.ymlhmr: falseinline: false。この問題の修正については、rails/webpacker PR2644を参照してください。

                    基本的な使用法

                    設定

                    • 設定config/initializers/react_on_rails.rb。 いくつかの必要な設定とデフォルトを調整できます。 すべての設定オプションのドキュメントについては、docs/basics/configuration.mdファイルを参照してください。
                    • 設定config/webpacker.yml。 ジェネレータとデフォルトのwebpacker設定を使用した場合は、このファイルをタッチする必要はありません。 設定をカスタマイズする場合は、spec/dummy/config/webpackerを参照してください。ymlの例または公式のデフォルトのwebpacker。yml。
                      • ヒント: 常にウォッチプロセスでコンパイルすることがわかっている場合は、開発用にcompile: falseを設定します。 それ以外の場合は、すべてのリクエストがコンパイルが必要かどうかをチェックします。
                      • バンドルのpublic_output_pathカスタムWebpack設定と一致する必要があります。output。
                      • 本番環境でのみcache_manifesttrueに設定します。

                    ReactコンポーネントをRailsビューに含める

                    • ReactコンポーネントはRailsビューを介してレンダリングされます。 ERBのサンプルは次のとおりです:

                      <%= react_component("HelloWorld", props: @some_props) %>

                    • サーバー側のレンダリング：reactコンポーネントは最初にサーバー上でHTMLにレンダリングされます。 Prerenderオプションを使用します。

                      <%= react_component("HelloWorld", props: @some_props, prerender: true) %>

                    • component_nameパラメータは、Reactコンポーネントをグローバルに公開するために使用した名前に一致する文字列です。 したがって、上記の例では、”HelloWorld”という名前のReactコンポーネントがある場合は、次の行で登録します:このようにコンポーネントを公開することは、React on RailsがRailsビューからコンポーネントを参照できる方法です。 名前が衝突しない限り、好きなだけ多くのコンポーネントを公開できます。 React_on_rails webpack設定を介してコンポーネントを公開する方法の詳細については、以下を参照してください。 あなたは何度もReactOnRails.registerを呼び出すことができます。

                    • @some_propsハッシュまたはJSON文字列のいずれかになります。 これはオプションを渡す必要がないと仮定したオプションの引数です（prerender: trueのようなオプションを渡したいが、プロパティを渡したくな これにより、コンポーネントでデータを使用できるようになります。

                       # Rails View <%= react_component("HelloWorld", props: { name: "Stranger" }) %>

                    • これはあなたのHelloWorldです。jsファイルが含まれている可能性があります。 RailsContextは、Reactコンポーネントで常に使用できるようにする任意のパラメータで常に使用できます。 それはReact Contextの概念とは何の関係もありません。 このトピックの詳細については、”Render-Functions”および”RailsContext”を参照してください。

                      import React from 'react';export default (props, railsContext) => { // Note wrap in a function to make this a React function component return () => ( <div> Your locale is {railsContext.i18nLocale}.<br/> Hello, {props.name}! </div> );};

                    react_componentreact_component_hashの詳細については、View Helpers APIを参照してください。

                    Reactコンポーネントをグローバルに公開

                    React on Railsビューヘルパー用react_componentReactコンポーネントを使用するには、JavaScriptコードに登録する必要RailsなしでWebpackやReactを使用するときと同じようにモジュールを使用してください。 違いは、React.renderを使用してReactコンポーネントを要素に直接マウントするのではなく、コンポーネントをReactOnRailsに登録し、railsビュー内のヘルパーを使用してマこれは、コンポーネントをreact_componentビューヘルパーに公開する方法です。

                     // app/javascript/packs/hello-world-bundle.js import HelloWorld from '../components/HelloWorld'; import ReactOnRails from 'react-on-rails'; ReactOnRails.register({ HelloWorld });

                    異なるサーバー側のレンダリングコード（およびサーバー固有のバンドル）

                    サーバー側とクライアント側を実行しているサーバレンダリングコンポーネントに異なるコードが必要な場合があります。 たとえば、コンポーネントが表示されたときに実行されるアニメーションがある場合は、サーバーレンダリング時にそれをオフにする必要があります。 これを処理する1つの方法は、if (window) { doClientOnlyCode() }ような条件付きコードです。別の方法は、’serverRegistration’のような別のサーバー側のエントリファイルを使用できる別のwebpack設定ファイルを使用することです。’clientRegistrationとは対照的に、js’。js”を発表した。’それはサーバーレンダリングのための別のコードを設定します。

                    クライアントレンダリングとサーバーレンダリングに異なるコードを使用する手法の詳細については、次を参照してください: クライアントとサーバーのレンダリングに異なるバージョンのファイルを使用する方法。 （無料アカウントの作成が必要です。直接登録するか、render-functionsを使用します。

あなたの反応コンポーネントを指定するには、二つの方法があります。 Reactコンポーネント（関数またはクラスコンポーネント）を直接登録するか、「render-function」の名前を使用してReactコンポーネントを返す関数を作成することができます。 レンダリング関数を作成すると、

1. railsContextにアクセスできます。 なぜ必要なのかについては、railsContextのドキュメントを参照してください。 アクセスするにはRender-Functionが必要ですrailsContext。渡された小道具を使用してreduxストアを初期化したり、react-routerを設定したりすることができます。
2. 小道具の内容に応じて、さまざまなコンポーネントを返すことができます。

Render-Functionの戻り値は、React関数またはクラスコンポーネント、またはサーバーレンダリング結果を表すオブジェクトのいずれかでなければなりません。React要素（JSX）を返しません。

ReactOnRailsは、関数が1つ以上のパラメータを取るという事実によって、登録されたRender-Functionを自動的に検出します。 つまり、そこにあるコンポーネントを返す関数を提供する機能が必要な場合は、少なくとも2番目のパラメータを指定する必要があります。 これはrailsContextです。このパラメータを使用していない場合は、未使用のパラメータで関数を宣言します。

const MyComponentGenerator = (props, _railsContext) => { if (props.print) { // This is a React FunctionComponent because it is wrapped in a function. return () => <H1>{JSON.stringify(props)}</H1>; }}

したがって、React関数コンポーネントまたはクラ”ちょうどReactOnRails.registerを呼び出します。

react_component_hash for Render-Functions

Render-Functionを使用するもう一つの理由は、サーバーレンダリング、特にReact Routerでは、ReactDOMServerを呼び出した結果を返す必要があることです。renderToString(要素)。 これを行うには、{renderedHtml、redirectLocation、error}という形状のオブジェクトを返すことができます。 この関数をreact_component_hashで使用してください。サーバーレンダリングの場合、Render-Functionから複数のHTML文字列を返したい場合は、単一のトップレベルプロパティrenderedHtmlを持つRender-Functionからオブジェク このオブジェクト内に、componentHtmlというキーを他の必要なキーと一緒に配置します。 このシナリオの例は、React Helmetのような副作用ライブラリを使用している場合です。 Rubyコードは、このオブジェクトをキー componentHtmlと追加した他のカスタムキーを含むハッシュとして取得します:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

react-helmetでのreact_component_hashの使用の詳細については、react-helmetのドキュメントを参照してください。

エラー処理

• ReactOnRailsからのすべてのエラーはReactOnRails::Error型になります。
• プレレンダリング(サーバーレンダリング)エラーは、デバッグを容易にするためにHoneyBadgerとSentryのコンテキスト情報を取得します。React on Railsは、Rails*.yml*.jsonまたは`に自動変換するオプションを提供します。js”を発表した。I18Nの追加の概要については、”How to add I18N”を参照してください。
  

  詳細

  要約目次のリンクを参照してください。

  次の記事を読むことを強くお勧めします。

  1. React on Railsの仕組み
  2. Webpackの設定
  3. ビューヘルパー API
  4. キャッシュとパフォーマンス:React on Rails Pro。
  5. 展開します。

  サポート

  クリックしてReact+Rails Slackに参加します。

  コミュニティリソース

  ジャスティン*ゴードンとShakaCodeと連絡を取り合うために購読するためにクリックしてください。 私はReact on Railsの新しいリリースと私たちの最新のブログ記事とチュートリアルの発表を送るつもりです。

  

  • Slack Room:ShakaCode Slack roomへの招待についてはお問い合わせください！ あなたが貢献したい場合はお知らせください。
  • forum.shakacode.com：あなたの質問を投稿
  • Twitterで@railsonmaui
  • ライブ、オープンソース、この宝石の例については、参照してくださいwww.reactrails.com.
  • React on Railsの使用プロジェクトと賞賛を参照してください。 あなたを提出してください！ いずれかのページを編集するか、私達に電子メールを送信し、我々はあなたの情報を追加してくださ それは私たちが新しいユーザーや貢献者を誘致するのに役立ちますように私たちはまた、星を愛しています。
  • を参照してくださいNEWS.md 時間をかけてより多くのノートのために。

  貢献

  バグレポートとプルリクエストは大歓迎です。 “はじめにへの貢献”と、ヘルプの必要な問題のリストを参照してください。

  React on Rails Pro

  GithubのスポンサーになることでReact on Rails proの開発をサポートし、これらの利点を得ます。

  React on Rails Proには、ノードサーバーレンダリング、フラグメントキャッシュ、コード分割、およびReact on Railsのその他のパフォーマンスの強化が含まれています。 ケーススタディについては、React on Rails Proのhvmnによるサーバー応答時間の90％削減の記事を参照してください。 Wikiには詳細が含まれています。2018-09-11_10-31-11

  React on Rails Proのサポートプランが役立ちます！loadable-componentsを使用したコード分割を含むReact on Rails用の最新のWebpackにwebpack設定を最適化します。

• スプロケットアセットパイプラインをスキップする現在のrails/webpackerセットアップを使用するようにアプリをアップグレードします。
• より良いパフォーマンスクライアントとサーバー側。
• 多くの生産プロジェクトで6年以上のReact on Railsの経験に基づくベストプラクティス。
• React on RailsでReasonを使用する（または使用せずに）。

ShakaCodeはまた、カスタムソフトウェア開発のニーズのお手伝いをすることができます。 私たちは、RailsとReactの両方を利用するmarketplaceとeコマースアプリケーションに特化しています。 私たちが所有しているのでHiChee.comアプリのコードを活用することができます！

ジャスティンゴードンにメールしてください[email protected]詳細については、React on Railsのメンテナ。

Pro

Pro: Fragment Caching

Fragment cachingはReact on Rails Proの機能です。 フラグメントキャッシュは、あなたのアプリのための巨大なパフォーマンスブースターです。 cached_react_componentcached_react_component_hashを使用します。 APIはreact_componentreact_component_hashと同じですが、2つの違いがあります。

1. cache_keyは、任意のRailsと同じパラメータを取りますcacheビューヘルパー。
2. propsはブロックを介して渡されるため、キャッシュが壊れていない限り、propsの評価は行われません。 Props計算をsome_slow_method_that_returns_props:

<%= cached_react_component("App", cache_key: , prerender: true) do some_slow_method_that_returns_propsend %>

このようなフラグメントキャッシングは、WEBサーバーのCPU作業を節約し、要求時間を大幅に短縮します。 それは完全に評価コストをスキップします：

1. propsを計算するためのデータベース呼び出し。
2. シリアル化props値は、javascriptをサーバレンダーに評価するためのJSON文字列にハッシュします。
3. RubyコードからJavaScriptを評価することに関連するコスト。
4. 小道具とサーバーでレンダリングされたJavaScriptコードを含むHTML文字列を作成します。

注、サーバーレンダリングがなくても（上記の手順3なしで）、フラグメントキャッシュはまだ効果的です。

Pro：ノードとの統合。サーバーレンダリング用js

デフォルトのサーバーレンダリングはExecJSによって行われます。 ノードを使用する場合。サーバーレンダリング、電子メールのパフォーマンスを向上させるためのjsサーバー [email protected]は、React on Rails Proの一部であるプレミアムノードレンダリングサーバーを構築しました。

Shakacodeのお客様の声

Hvmnのお客様の声、Paul Benigeri、October12、2018

私たちが相談+React on Rails proライセンスのために支払った価格は、すでにホスティング料金だけから数回戻ってきています。 私たちのコアチームは、そのスプリント中に新しい機能を出荷することに集中することができました。Justinと彼のチームは、react on railsアプリケーションへの移行のための設計基盤と標準を設定する際に私たちを支援するのに尽力しました。 Shaka codeのチームとの作業はわずか三ヶ月で、アプリケーションサーバーサイドレンダリングのメインページを指数関数的に改善された速度で持っています。p>

ジョエル*フック、共同創設者、チーフオタクからegghead.io2017年1月30日:p>

より多くのお客様の声については、ライブプロジェクトと賞賛を参照してください。

サポーター

以下の企業がこのオープンソースプロジェクトをサポートしており、ShakaCodeは自社製品を使用しています！ JustinはRubymineでReact on Railsを書いています。 私たちは、ライブパフォーマンスを監視するためにScoutを使用しHiChee.com,Rails AutoScaleはHiCheeのdynosをスケーリングします,browserstackは奇妙なブラウザの問題を解決します.P>

あなたがReact on Railsをサポートしたい場合は、あなたの会社JustinとShakaCodeチームからのアロハと最高の願い！

私たちと一緒に働く