render_react

RendErAct

Eine LO-FI-Möglichkeit, Client- und serverseitige React-Komponenten von Ruby zu rendern:

 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 >

Es bringt Ihr eigenes Werkzeug mit : React ist weder enthalten, noch irgendwelche ES6 -Transpiler oder Modulbundler. Sie erwarten, dass Sie die JavaScript -Bundle -Datei in einem bestimmten Format vorbereiten, das React und alle Ihre Komponenten enthalten muss.

Wenn Sie nach Alternativen auf höherer Ebene suchen, reagieren Sie die Kasse react_on_rails oder react-rails.

Aufstellen

Fügen Sie zu Ihrer Gemfile hinzu:

 gem 'render_react'

JavaScript -Quellenvorbereitung

RendErAct erwartet, dass das JavaScript -Bundle eine globale Variable namens RenderReact mit den folgenden Inhalten enthält:

 {
  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 ] ,
    ...
  }
}

• Wo ist reagiert ? Siehe Erster Absatz von https://facebook.github.io/react/docs/react-api.html
• Wo ist Reaktomie ? Siehe Erster Absatz von https://facebook.github.io/react/docs/react-dom.html
• Wo ist Reactdomserver ? Siehe Erster Absatz von https://facebook.github.io/react/docs/react-dom-server.html

Sie können zwei verschiedene JavaScript -Bundle -Dateien haben - eine für die Serverwiedergabe und eine für Client -Rendering.

• Das Client -Bundle muss mit einer Methode Ihrer Wahl in Ihre Anwendung aufgenommen werden. Sie können das Passing in ReactDOMServer für das Client -Bundle überspringen
• Das Serverpaket muss an RenderReact übergeben werden (siehe Gebrauchsabschnitt). Sie können das Passing in ReactDOM für das Serverpaket überspringen

Beispiel (mit ES6 -Modulen)

 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
  }
}

Wird als RenderReact importiert

Beispiel (mit Browser -Globalen)

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

Verwendung

Erstellen Sie einen RendErAct- Kontext, indem Sie Ihr serverseitiges JavaScript-Bundle übergeben:

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

Sie können es ohne ein serverseitiges Bundle verwenden, indem Sie keine Dateiquelle übergeben.

Der optionale mode: Keyword -Argument kann eines der folgenden Werte haben

• :client_and_server (Standard) - Komponente wird serverseitig gerendert und im Client montiert
• :client - Komponente wird im Client montiert
• :server - Komponente wird statisch gerendert

Sie können dann eine Komponente mit rendern

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

Es ist möglich, den Kontext-Rendering-Modus mit spezifischen Render-Methoden zu überschreiben:

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

MIT -Lizenz

Copyright (c) 2017 Jan Lelis https://janlelis.com. Unter der MIT -Lizenz veröffentlicht.

React ist BSD lizenziert.