render_react

Renderreact

Una forma de LO-Fi de representar componentes reaccionados del lado del cliente y el servidor de Ruby:

 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 >

Lleva su propia herramienta : React no está incluido, ni ningún transpilador ES6 o agrupadores de módulos. Espera que prepare el archivo de paquete JavaScript en un formato específico, que debe contener React y todos sus componentes.

Si está buscando alternativas de nivel superior, consulte React_on_Rails o React Rails.

Configuración

Agregue a su Gemfile :

 gem 'render_react'

Preparación de la fuente de JavaScript

Renderreact espera que el paquete de JavaScript incluya una variable global llamada RenderReact con los siguientes contenidos:

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

• ¿Dónde está React ? Ver primer párrafo de https://facebook.github.io/react/docs/react-api.html
• ¿Dónde está Reactdom ? Ver primer párrafo de https://facebook.github.io/react/docs/react-dom.html
• ¿Dónde está Reactomserver ? Ver primer párrafo de https://facebook.github.io/react/docs/react-dom-server.html

Puede tener dos archivos de paquete de JavaScript diferentes, uno para la representación del servidor y otro para la representación del cliente.

• El paquete del cliente debe incluirse en su aplicación mediante un método de su elección. Puede omitir el paso en ReactDOMServer para el paquete del cliente
• El paquete del servidor debe pasar a RenderReact (ver sección de uso). Puede omitir el paso en ReactDOM para el paquete de servidor

Ejemplo (con módulos 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
  }
}

Se importa como RenderReact

Ejemplo (con Browser Globals)

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

Uso

Cree un contexto de RenderReact pasando su paquete JavaScript del lado del servidor:

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

Puede usarlo sin un paquete del lado del servidor al no pasar ninguna fuente de archivo.

El mode: el argumento de palabras clave puede tener uno de los siguientes valores

• :client_and_server (predeterminado): el componente se presentará del lado del servidor y se montará en el cliente
• :client : el componente se montará en el cliente
• :server : el componente se presentará estáticamente

Luego puede representar un componente con

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

Es posible sobrescribir el modo de renderizado de contexto mediante el uso de métodos de renderizado de SpectFIC:

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

Licencia de MIT

Copyright (c) 2017 Jan Lelis https://janlelis.com. Liberado bajo la licencia MIT.

React tiene licencia BSD.