render_react下载 - render_react源代码下载

render_react

三方组件

1.0.0

下载

反应

一种渲染客户端和服务器端的React组件的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转侧或模块捆绑器。它希望您以特定格式准备JavaScript捆绑文件，该文件必须包含React和所有组件。

如果您正在寻找更高级别的替代方案，请查看React_on_rails或React-Rails。

设置

添加到您的Gemfile ：

 gem 'render_react'

JavaScript源准备

反应期望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 ] ,
    ...
  }
}

反应在哪里？请参阅https://facebook.github.io/react/docs/react-api.html的第一段
反应在哪里？请参阅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
  }
}

用法

通过传递服务器端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