Ruby on Rails
Reacciona con los rieles usando la gema reaccion-rails.

Reactuar la instalación para los rieles usando rails_react gema

Agregue react-rails a su Gemfile:

gem 'react-rails'

E instalar:

bundle install

A continuación, ejecute el script de instalación:

rails g react:install

Esta voluntad:

cree un archivo de manifiesto components.js y un directorio app / asset / javascripts / components /, donde colocará sus componentes en su application.js:

//= require react
//= require react_ujs
//= require components

Usando react_rails dentro de tu aplicación

React.js construye

Puede elegir qué compilación React.js (desarrollo, producción, con o sin complementos) para servir en cada entorno agregando una configuración. Aquí están los valores por defecto:

# config/environments/development.rb
MyApp::Application.configure do
  config.react.variant = :development
end


# config/environments/production.rb
MyApp::Application.configure do
  config.react.variant = :production
end

Para incluir complementos, use esta configuración:

MyApp::Application.configure do
  config.react.addons = true # defaults to false
end

Después de reiniciar su servidor Rails, // = require react proporcionará la compilación de React.js que fue especificada por las configuraciones.

react-rails ofrece algunas otras opciones para versiones y compilaciones de React.js. Consulte VERSIONS.md para obtener más información sobre el uso de la gema reaccion-source o cómo descargar sus propias copias de React.js.

JSX

Después de instalar react-rails, reinicie su servidor. Ahora, los archivos .js.jsx se transformarán en la canalización de activos.

Opciones de BabelTransformer

Puede usar los transformadores y los complementos personalizados de Babel, y pasar las opciones al transpiler de Babel agregando las siguientes configuraciones:

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options[enter link description here][1]
}

Bajo el capó, react-rails utiliza ruby-babel-transpiler , para la transformación.

Renderizado y montaje

react-rails incluye un asistente de vista (react_component) y un controlador de JavaScript discreto (react_ujs) que trabajan juntos para poner los componentes de React en la página. Debería requerir el controlador UJS en su manifiesto después de reaccionar (y después de turbolinks si usa Turbolinks).

El asistente de visualización coloca un div en la página con la clase de componente y accesorios solicitados. Por ejemplo:

<%= react_component('HelloMessage', name: 'John') %>
<!-- becomes: -->
<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>

En la carga de la página, el controlador react_ujs escaneará la página y montará los componentes usando data-react-class y data-react-props.

Si Turbolinks está presente, los componentes se montan en la página: evento de cambio y se desmontan en la página: antes de la descarga. Se recomienda Turbolinks> = 2.4.0 porque expone mejores eventos.

En el caso de llamadas Ajax, el montaje UJS puede activarse manualmente llamando desde javascript:

ReactRailsUJS.mountComponents () La firma del ayudante de vista es:

react_component(component_class_name, props={}, html_options={})

component_class_name es una cadena que nombra una clase de componente accesible globalmente. Puede tener puntos (por ejemplo, "MyApp.Header.MenuItem").

   `props` is either an object that responds to `#to_json` or an    already-stringified JSON object (eg, made with Jbuilder, see note    below).

html_options puede incluir: tag: para usar un elemento distinto de un div para incrustar data-reaccion-class y data-reac-props. prerender: true para representar el componente en el servidor. **other Cualquier otro argumento (por ejemplo, clase :, id :) se pasa a content_tag.