Загрузка render_react - render_react исходный код скачать

render_react

Сторонние компоненты

1.0.0

Скачать

Renderreact

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 >

Это принесло ваш собственный инструмент : 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 ] ,
    ...
  }
}

Где реагировать ? См. Первый абзац 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

Пример (с браузерами Globals)

 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" } )

Можно перезаписать режим контекстного расторжения с помощью методов специфического рендеринга:

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