Ruby on Rails
反応レールの宝石を使ってレールと反応する

rails_react gemを使用したRailsのインストール

あなたのGemfileに反応レールを追加する：

gem 'react-rails'

インストール：

bundle install

次に、インストールスクリプトを実行します。

rails g react:install

この意志：

components.jsマニフェストファイルとapp / assets / javascripts / components /ディレクトリを作成します。ここでコンポーネントをapplication.jsに配置します：

//= require react
//= require react_ujs
//= require components

あなたのアプリケーション内でのreact_railsの使用

React.jsビルド

設定を追加することで、React.jsのビルド（開発、プロダクション、アドオンの有無にかかわらず）を各環境で提供することができます。デフォルトは次のとおりです：

# config/environments/development.rb
MyApp::Application.configure do
  config.react.variant = :development
end


# config/environments/production.rb
MyApp::Application.configure do
  config.react.variant = :production
end

アドオンを含めるには、この設定を使用します。

MyApp::Application.configure do
  config.react.addons = true # defaults to false
end

Railsサーバーを再起動した後、// reactを要求すると、構成によって指定されたReact.jsのビルドが提供されます。

反応レールは、React.jsのバージョンとビルドにいくつかのオプションを提供します。反応元の宝石を使用する方法や、React.jsのコピーをドロップする方法については、VERSIONS.mdを参照してください。

JSX

リアレールを取り付けたら、サーバーを再起動します。これで、.js.jsxファイルがアセットパイプラインで変換されます。

BabelTransformerのオプション

babelの変圧器とカスタムプラグインを使用して、以下の設定を追加してbabel transpilerにオプションを渡すことができます：

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options[enter link description here][1]
}

フードの下では、反応レールは変換のためにルビー - バベル - トランスバイラを使用します。

レンダリングとマウント

react-railsは、ビューヘルパー(react_component)と邪魔にならないJavaScriptドライバ（react_ujs）が含まれています。反応後（およびターボリンクを使用する場合はターボリンクの後）マニフェストにUJSドライバが必要です。

ビューヘルパーは、要求されたコンポーネントクラスと小道具を持つページにdivを配置します。例えば：

<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>

ページが読み込まれると、react_ujsドライバはdata-react-classとdata-react-propsを使用してページをスキャンし、コンポーネントをマウントします。

Turbolinksが存在する場合、コンポーネントはページ：変更イベントにマウントされ、ページ：アンロード前にアンマウントされます。 Turbolinks> = 2.4.0を推奨します。なぜなら、より良いイベントを表示するからです。

Ajaxの呼び出しの場合、UJSのマウントはjavascriptから呼び出すことで手動で起動できます：

ReactRailsUJS.mountComponents（）ビューヘルパーの署名は次のとおりです。

react_component(component_class_name, props={}, html_options={})

component_class_nameは、グローバルにアクセス可能なコンポーネントクラスの名前を指定する文字列です。ドットがある場合があります（例： "MyApp.Header.MenuItem"）。

   `props` is either an object that responds to `#to_json` or an    already-stringified JSON object (eg, made with Jbuilder, see note    below).

html_optionsは以下が含まれます： tag: data-react-classとdata-react-propsを埋め込むためにdiv以外の要素を使用する。 prerender: trueサーバー上のコンポーネントをレンダリングするprerender: trueです。 **otherその他の引数（class：、id :)は、content_tagに渡されます。