render_react Téléchargement - render_react Code source Télécharger

render_react

Composants tiers

1.0.0

Télécharger

Rendez-vous

Une manière LO-Fi de rendre les composants de réaction côté client et serveur 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 >

Il apporte votre propre outillage : React n'est pas inclus, ni aucun transpille ES6 ou bundlers de modules. Il s'attend à ce que vous prépariez le fichier de bundle JavaScript dans un format spécifique, qui doit contenir React et tous vos composants.

Si vous recherchez des alternatives de niveau supérieur, vérifiez React_on_Rails ou React-Rails.

Installation

Ajoutez à votre Gemfile :

 gem 'render_react'

Préparation de la source JavaScript

Renderract s'attend à ce que le bundle JavaScript inclue une variable globale appelée RenderReact avec le contenu suivant:

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

Où est React ? Voir premier paragraphe de https://facebook.github.io/react/docs/react-api.html
Où est Reactdom ? Voir premier paragraphe de https://facebook.github.io/react/docs/react-dom.html
Où est ReactdomServer ? Voir premier paragraphe de https://facebook.github.io/react/docs/react-dom-server.html

Vous pouvez avoir deux fichiers de bundle JavaScript différents - un pour le rendu du serveur et un pour le rendu client.

Le bundle client doit être inclus dans votre application par une méthode de votre choix. Vous pouvez sauter en passant dans ReactDOMServer pour le bundle client
Le bundle du serveur doit être transmis à RenderReact (voir la section d'utilisation). Vous pouvez sauter en passant dans ReactDOM pour le bundle du serveur

Exemple (avec des modules 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
  }
}

Est importé en tant que RenderReact

Exemple (avec le navigateur global)

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

Usage

Créez un contexte RenderRerraact en passant votre bundle JavaScript côté serveur:

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

Vous pouvez l'utiliser sans bundle côté serveur en ne faisant passer aucune source de fichier.

Le mode: l'argument des mots clés peut avoir l'une des valeurs suivantes

:client_and_server (par défaut) - Le composant sera rendu côté serveur et monté dans le client
:client - Le composant sera monté dans le client
:server - Le composant sera rendu statiquement

Vous pouvez ensuite rendre un composant avec

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

Il est possible d'écraser le mode de rendu de contexte en utilisant des méthodes de rendu SpecFIC:

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