Ruby on Rails
Reagiere mit Rails mit Reaktiver Gleis gem

Reaktiver Einbau für Rails mithilfe von schienen_reakt gem

Fügen Sie React-Rails zu Ihrem Gemfile hinzu:

gem 'react-rails'

Und installiere:

bundle install

Führen Sie dann das Installationsskript aus:

rails g react:install

Dieser Wille:

Erstellen Sie eine Manifest-Datei components.js und ein Verzeichnis app / assets / javascripts / components /, in das Sie Ihre Komponenten einfügen und Folgendes in Ihre application.js einfügen:

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

Verwenden von react_rails in Ihrer Anwendung

React.js baut auf

Sie können auswählen, welche React.js-Builds (Entwicklung, Produktion, mit oder ohne Add-Ons) in jeder Umgebung bereitgestellt werden sollen, indem Sie eine Konfiguration hinzufügen. Hier sind die Standardeinstellungen:

# 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

Verwenden Sie diese Konfiguration, um Add-Ons einzubinden:

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

Nach dem Neustart Ihres Rails-Servers stellt // = requir reag den Build von React.js bereit, der in den Konfigurationen angegeben wurde.

React-Rails bietet einige weitere Optionen für Versionen und Builds von React.js. In VERSIONS.md finden Sie weitere Informationen zur Verwendung des React-Source-Gem oder zum Ablegen eigener React.js-Kopien.

JSX

Starten Sie Ihren Server nach der Installation von React-Rails neu. Jetzt werden .js.jsx-Dateien in die Asset-Pipeline umgewandelt.

BabelTransformer-Optionen

Sie können die Transformatoren und benutzerdefinierten Plug-Ins von Babel verwenden und Optionen an den Babel-Transpiler übergeben, indem Sie die folgenden Konfigurationen hinzufügen:

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

Reactive-Rails verwenden unter der Haube einen Ruby-Babel-Transpiler für die Transformation.

Rendern & Montieren

React react-rails enthalten einen View Helper (react_component) und einen unauffälligen JavaScript-Treiber (Reakt_Ujs), die zusammenarbeiten, um React-Komponenten auf der Seite zu platzieren. Sie sollten den UJS-Treiber in Ihrem Manifest nach dem Reaktivieren (und nach Turbolinks, wenn Sie Turbolinks verwenden) benötigen.

Der View-Helfer fügt auf der Seite ein div mit der angeforderten Komponentenklasse und den entsprechenden Requisiten hinzu. Zum Beispiel:

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

Beim Laden der Seite scannt der Treiber reagiert die Seite und stellt die Komponenten mithilfe der Datenreaktionsklasse und der Datenreaktionspropeller bereit.

Wenn Turbolinks vorhanden ist, werden Komponenten auf der Seite installiert: Ereignis ändern und auf Seite entladen: Vor dem Entladen. Turbolinks> = 2.4.0 werden empfohlen, da hier bessere Ereignisse auftreten.

Im Falle von Ajax-Aufrufen kann das UJS-Mounten manuell durch Aufrufen von Javascript ausgelöst werden:

ReactRailsUJS.mountComponents () Die Signatur des View Helper lautet:

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

component_class_name ist eine Zeichenfolge, die eine global zugreifbare Komponentenklasse benennt. Es kann Punkte enthalten (z. B. "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 kann html_options umfassen: tag: Verwenden eines anderen Elements als div zum Einbetten von data html_options und data -react-props. prerender: true , um die Komponente auf dem Server prerender: true . **other Alle anderen Argumente (zB class:, id :) werden an content_tag übergeben.