ดาวน์โหลด render_react - render_react ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

render_react

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

RENDERREACE

วิธี LO-FI ในการแสดงส่วนประกอบปฏิกิริยาไคลเอนต์และฝั่งเซิร์ฟเวอร์จาก 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 >

มันเป็น การนำเครื่องมือของคุณมาเอง : ไม่รวมการตอบสนองและไม่รวม ES6 transpilers หรือ bundlers โมดูลใด ๆ คาดว่าคุณจะเตรียมไฟล์ Bundle JavaScript ในรูปแบบเฉพาะซึ่งจะต้องมีปฏิกิริยาและส่วนประกอบทั้งหมดของคุณ

หากคุณกำลังมองหาทางเลือกระดับที่สูงขึ้นให้ชำระเงิน React_on_Rails หรือ React-Rails

การตั้งค่า

เพิ่มไปยัง Gemfile ของคุณ:

 gem 'render_react'

การเตรียมแหล่งที่มาของ JavaScript

RenderReact คาดว่ากลุ่ม JavaScript จะรวมตัวแปรทั่วโลกที่เรียกว่า RenderReact พร้อมเนื้อหาต่อไปนี้:

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

React อยู่ที่ไหน? ดูย่อหน้าแรกของ https://facebook.github.io/react/docs/react-api.html
Reactdom อยู่ที่ไหน ดูย่อหน้าแรกของ https://facebook.github.io/react/docs/react-dom.html
ReactDomserver อยู่ที่ไหน ดูย่อหน้าแรกของ https://facebook.github.io/react/docs/react-dom-server.html

คุณสามารถมีไฟล์ชุด JavaScript ที่แตกต่างกันสองไฟล์ - หนึ่งไฟล์สำหรับการเรนเดอร์เซิร์ฟเวอร์และอีกไฟล์หนึ่งสำหรับการเรนเดอร์ไคลเอนต์

ชุดไคลเอนต์จะต้องรวมอยู่ในแอปพลิเคชันของคุณด้วยวิธีที่คุณเลือก คุณสามารถข้ามผ่าน ReactDOMServer สำหรับชุดไคลเอนต์
ชุดเซิร์ฟเวอร์จะต้องส่งผ่านไปยัง RenderReact (ดูส่วนการใช้งาน) คุณสามารถข้ามผ่าน ReactDOM สำหรับชุดเซิร์ฟเวอร์

ตัวอย่าง (ด้วยโมดูล 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
  }
}

ได้รับการนำเข้าเป็น RenderReact

ตัวอย่าง (กับเบราว์เซอร์โกลเดอร์)

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

การใช้งาน

สร้างบริบท RenderReact โดยผ่านชุด JavaScript ฝั่งเซิร์ฟเวอร์ของคุณ:

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

คุณสามารถใช้งานได้โดยไม่ต้องรวมกลุ่มฝั่งเซิร์ฟเวอร์โดยไม่ผ่านแหล่งข้อมูลใด ๆ

mode: อาร์กิวเมนต์คำหลักสามารถมีหนึ่งในค่าต่อไปนี้

:client_and_server (ค่าเริ่มต้น) - ส่วนประกอบจะแสดงผลด้านเซิร์ฟเวอร์และติดตั้งในไคลเอนต์
:client - ส่วนประกอบจะถูกติดตั้งในไคลเอนต์
:server - ส่วนประกอบจะแสดงผลแบบคงที่

จากนั้นคุณสามารถแสดงส่วนประกอบด้วย

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

เป็นไปได้ที่จะเขียนทับโหมดการเรนเดอร์บริบทโดยใช้วิธีการเรนเดอร์ specfic:

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