Ruby on Rails
Reagire con Rails usando gemme react-rails

Reagire sull'installazione di Rails usando la gemma rails_react

Aggiungi reatt-rails al tuo Gemfile:

gem 'react-rails'

E installare:

bundle install

Quindi, esegui lo script di installazione:

rails g react:install

Questo sarà:

crea un file manifest di components.js e una directory app / assets / javascripts / components /, dove inserirai i tuoi componenti nel tuo application.js:

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

Utilizzo di react_rails all'interno dell'applicazione

Build React.js

Puoi scegliere quale build React.js (sviluppo, produzione, con o senza componenti aggiuntivi) da servire in ogni ambiente aggiungendo una configurazione. Ecco i valori predefiniti:

# 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

Per includere componenti aggiuntivi, usa questa configurazione:

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

Dopo aver riavviato il server Rails, // = require react fornirà la build di React.js specificata dalle configurazioni.

react-rails offre alcune altre opzioni per versioni e build di React.js. Vedi VERSIONS.md per maggiori informazioni sull'utilizzo della gemma react-source o sulla tua copia di React.js.

JSX

Dopo aver installato react-rails, riavvia il tuo server. Ora, i file .js.jsx verranno trasformati nella pipeline degli asset.

BabelTransformer opzioni

Puoi usare i trasformatori Babel e plugin personalizzati e passare le opzioni al transpiler Babel aggiungendo le seguenti configurazioni:

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]
}

Sotto il cofano, le rotaie reagenti utilizzano il transpiler rubino-babele , per la trasformazione.

Rendering e montaggio

react-rails include un helper di visualizzazione (react_component) e un discreto driver JavaScript (react_ujs) che lavorano insieme per mettere i componenti React sulla pagina. Dovresti richiedere il driver UJS nel tuo manifest dopo aver reagito (e dopo i turbolinks se usi Turbolinks).

L'helper di vista inserisce un div nella pagina con la classe di componente richiesta e gli oggetti di scena. Per esempio:

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

Durante il caricamento della pagina, il driver react_ujs eseguirà la scansione della pagina e monterà i componenti utilizzando la classe data-react e gli oggetti reattivi ai dati.

Se Turbolinks è presente, i componenti sono montati sulla pagina: cambia evento e smontato alla pagina: prima di scaricare. Turbolinks> = 2.4.0 è consigliato perché espone eventi migliori.

In caso di chiamate Ajax, il montaggio UJS può essere attivato manualmente chiamando da javascript:

ReactRailsUJS.mountComponents () La firma dell'helper di visualizzazione è:

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

component_class_name è una stringa che identifica una classe componente accessibile a livello globale. Potrebbe avere punti (es. "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 può includere: tag: per utilizzare un elemento diverso da un div per incorporare oggetti di tipo data-react e dati-react-props. prerender: true per rendere il componente sul server. **other Eventuali altri argomenti (ad es. classe :, id :) vengono passati a content_tag.