render_react 다운로드 render_react 소스 코드 다운로드

render_react

타사 구성 요소

1.0.0

다운로드

렌더 리 레인

Ruby의 클라이언트 및 서버 측 React 구성 요소를 렌더링하는 LO-FI 방법 :

 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 >

자체 툴링을 가져옵니다 . React가 포함되어 있지 않거나 ES6 트랜스 필러 또는 모듈 배틀러가 포함되어 있지 않습니다. JavaScript 번들 파일을 특정 형식으로 준비 할 것으로 예상되며, 여기에는 React 및 모든 구성 요소가 포함되어야합니다.

더 높은 수준의 대안을 찾고 있다면 Checkout 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
  }
}

용법

서버 측 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 Render 메소드를 사용하여 컨텍스트 렌더링 모드를 덮어 쓸 수 있습니다.

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