render_react

RenderReAct

Cara lo-fi untuk membuat komponen reaksi sisi klien dan server dari 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 >

Ini membawa perkakas Anda sendiri : Bereaksi tidak termasuk, atau transpiler ES6 atau bundler modul. Ini mengharapkan Anda untuk menyiapkan file bundel JavaScript dalam format tertentu, yang harus berisi React dan semua komponen Anda.

Jika Anda mencari alternatif tingkat lebih tinggi, checkout react_on_rails atau react-rails.

Pengaturan

Tambahkan ke Gemfile Anda:

 gem 'render_react'

Persiapan Sumber JavaScript

RenderReact mengharapkan bundel JavaScript untuk memasukkan variabel global yang disebut RenderReact dengan konten berikut:

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

• Dimana bereaksi ? Lihat paragraf pertama https://facebook.github.io/react/docs/react-api.html
• Dimana reaktom ? Lihat paragraf pertama https://facebook.github.io/react/docs/react-dom.html
• Dimana reactdomserver ? Lihat paragraf pertama https://facebook.github.io/react/docs/react-dom-server.html

Anda dapat memiliki dua file bundel JavaScript yang berbeda - satu untuk rendering server, dan satu untuk rendering klien.

• Bundel klien harus dimasukkan ke dalam aplikasi Anda dengan metode pilihan Anda. Anda dapat melewatkan lewat di ReactDOMServer untuk bundel klien
• Bundel server harus diteruskan ke RenderReact (lihat bagian penggunaan). Anda dapat melewatkan passing di ReactDOM untuk bundel server

Contoh (dengan modul 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
  }
}

Diimpor sebagai RenderReact

Contoh (dengan browser global)

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

Penggunaan

Buat konteks renderreak dengan melewati bundel JavaScript sisi server Anda:

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

Anda dapat menggunakannya tanpa bundel sisi server dengan tidak mengeluarkan sumber file apa pun.

mode: Argumen kata kunci dapat memiliki salah satu dari nilai berikut

• :client_and_server (default) - Komponen akan dirender sisi server dan dipasang di klien
• :client - Komponen akan dipasang di klien
• :server - komponen akan dirender secara statis

Anda kemudian dapat membuat komponen dengan

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

Dimungkinkan untuk menimpa mode rendering konteks dengan menggunakan metode render specfic:

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

Lisensi MIT

Hak Cipta (C) 2017 Jan Lelis https://janlelis.com. Dirilis di bawah lisensi MIT.

Bereaksi berlisensi BSD.