render_react

RenderReAct

Uma maneira lo-fi de renderizar componentes de reação do lado do cliente e do servidor do 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 >

É trazer suas próprias ferramentas : o React não está incluído, nem transpilers ES6 ou pacotes de módulos. Ele espera que você prepare o arquivo JavaScript Bundle em um formato específico, que deve conter o React e todos os seus componentes.

Se você estiver procurando por alternativas de nível superior, checkout react_on_rails ou railos de reação.

Configurar

Adicione ao seu Gemfile :

 gem 'render_react'

Preparação da fonte JavaScript

RenderReAct espera que o pacote JavaScript inclua uma variável global chamada RenderReact com os seguintes conteúdos:

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

• Onde está react ? Veja o primeiro parágrafo de https://facebook.github.io/react/docs/react-api.html
• Onde está o Reactdom ? Veja o primeiro parágrafo de https://facebook.github.io/react/docs/react-dom.html
• Onde está o reactdomserver ? Veja o primeiro parágrafo de https://facebook.github.io/react/docs/react-dom-server.html

Você pode ter dois arquivos de pacote JavaScript diferentes - um para renderização do servidor e outro para renderização de clientes.

• O pacote do cliente deve ser incluído em seu aplicativo por um método de sua escolha. Você pode pular a passagem do ReactDOMServer para o pacote do cliente
• O pacote do servidor deve ser passado para RenderReact (consulte a seção de uso). Você pode pular a passagem de ReactDOM para o pacote do servidor

Exemplo (com 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
  }
}

É importado como RenderReact

Exemplo (com globais de navegador)

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

Uso

Crie um contexto RenderErAct , passando seu pacote JavaScript do lado do servidor:

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

Você pode usá-lo sem um pacote do lado do servidor por não passar nenhuma fonte de arquivo.

O mode: o argumento da palavra -chave pode ter um dos seguintes valores

• :client_and_server (padrão) - O componente será renderizado no lado do servidor e montado no cliente
• :client - O componente será montado no cliente
• :server - o componente será renderizado estaticamente

Você pode renderizar um componente com

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

É possível substituir o modo de renderização de contexto usando métodos de renderização especificada:

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

MIT Licença

Copyright (c) 2017 Jan Lelis https://janlelis.com. Liberado sob a licença do MIT.

O React é licenciado em BSD.