render_reactダウンロードrender_reactソースコードのダウンロード

render_react

サードパーティ製コンポーネント

1.0.0

ダウンロード

renderreAct

Rubyからクライアントおよびサーバー側の反応コンポーネントをレンダリングするLO-Fiの方法：

 class ExampleComponent extends React . Component {
  render ( ) {
    return < marquee > Hello Ruby { this . props . example } </ marquee >
  }
}

RenderReact.on_client_and_server("ExampleComponent", { example: "!" })
# = >
< div id =" RenderReact-caac405e-1714-495e-aeb4-77b42be42291 " >
  < marquee data-reactroot ="" data-reactid =" 1 " data-react-checksum =" 441921122 " >
    <!-- react-text: 2 --> Hello Ruby <!-- /react-text --> <!-- react-text: 3 --> ! <!-- /react-text -->
  </ marquee >
</ div >
< script >
  RenderReact . ReactDOM . render (
    RenderReact . React . createElement (
      RenderReact . components . ExampleComponent , { "example" : "!" }
    ) ,
    document . getElementById ( 'RenderReact-caac405e-1714-495e-aeb4-77b42be42291' )
  )
</ script >

それはあなた自身のツールをもたらします：Reactは含まれていませんし、ES6トランスピラーやモジュールのバンドラーも含まれていません。 JavaScriptバンドルファイルを特定の形式で準備することを期待しています。これには、Reactとすべてのコンポーネントを含む必要があります。

高レベルの代替品を探している場合は、React_on_railsまたはReact-Railsをチェックアウトしてください。

設定

Gemfileに追加：

 gem 'render_react'

JavaScriptソースの準備

RenderreActは、JavaScriptバンドルに、次の内容を持つRenderReactと呼ばれるグローバル変数を含めることを期待しています。

 {
  React : [ variable which contains React ] ,
  ReactDOM : [ variable which contains ReactDOM ] ,
  ReactDOMServer : [ variable which contains ReactDOMServer ] ,
  components : {
    ComponentIdentifier1 : [ variable which contains the component 1 ] ,
    ComponentIdentifier2 : [ variable which contains the component 2 ] ,
    ...
  }
}

どこに反応しますか？ https://facebook.github.io/react/docs/react-api.htmlの最初の段落を参照してください
Reactdomはどこにありますか？ https://facebook.github.io/react/docs/react-dom.htmlの最初の段落を参照してください
Reactdomserverはどこにありますか？ https://facebook.github.io/react/docs/react-dom-server.htmlの最初の段落を参照してください

2つの異なるJavaScriptバンドルファイルを使用できます。1つはサーバーレンダリング用、もう1つはクライアントレンダリング用です。

クライアントバンドルは、選択した方法でアプリケーションに含める必要があります。クライアントバンドルのReactDOMServerを通過するスキップができます
サーバーバンドルをRenderReactに渡す必要があります（使用法セクションを参照）。サーバーバンドルのReactDOMをスキップすることができます

例（ES6モジュール付き）

 import React from 'react'
import ReactDOM from 'react-dom'
import ReactDOMServer from 'react-dom/server'

import ExampleComponent from './components/example_component'

export default {
  React : React ,
  ReactDOM : ReactDOM ,
  ReactDOMServer : ReactDOMServer ,
  components : {
    ExampleComponent : ExampleComponent
  }
}

RenderReactとしてインポートされます

例（ブラウザグローバルを使用）

 window . RenderReact = {
  React : React ,
  ReactDOM : ReactDOM ,
  ReactDOMServer : ReactDOMServer ,
  components : {
    ExampleComponent : ExampleComponent
  }
}

使用法

サーバー側のJavaScriptバンドルを渡すことにより、 RenderreActコンテキストを作成します。

 RenderReact . create_context! File . read ( 'path/to/your/server-bundle.js' ) , mode : :client_and_server

ファイルソースを渡さないことにより、サーバー側のバンドルなしで使用できます。

オプションmode:キーワード引数は、次の値のいずれかを持つことができます

:client_and_server （デフォルト） - コンポーネントはサーバー側にレンダリングされ、クライアントにマウントされます
:client - コンポーネントはクライアントにマウントされます
:server - コンポーネントは静的にレンダリングされます

その後、コンポーネントをレンダリングできます

 RenderReact . ( "ExampleComponent" , { example : "prop" } )

Specfic Renderメソッドを使用して、コンテキストレンダリングモードを上書きすることができます。

 RenderReact . on_client_and_server ( "ExampleComponent" ) # server- and client-side
RenderReact . on_client ( "ExampleComponent" ) # only client-side
RenderReact . on_server ( "ExampleComponent" ) # only static