Ruby on Rails
Reaguj z Railsami za pomocą klejnotu React-Rails

Reaktywuj instalację Railsów, używając klejnotu rails_react

Dodaj szyny reakcyjne do swojego Gemfile:

gem 'react-rails'

I zainstaluj:

bundle install

Następnie uruchom skrypt instalacyjny:

rails g react:install

Spowoduje to:

utwórz plik manifestu components.js i katalog app / asset / javascripts / components /, w którym umieścisz komponenty w pliku application.js:

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

Korzystanie z reaguje w aplikacji

Kompilacje React.js

Możesz wybrać, która kompilacja React.js (programowanie, produkcja, z dodatkami lub bez) ma być wyświetlana w każdym środowisku, dodając konfigurację. Oto ustawienia domyślne:

# 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

Aby dołączyć dodatki, użyj tej konfiguracji:

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

Po zrestartowaniu serwera Railsowego // = wymaga reakcji dostarczy kompilację React.js, która została określona przez konfiguracje.

React-Rails oferuje kilka innych opcji dla wersji i kompilacji React.js. Zobacz VERSIONS.md, aby uzyskać więcej informacji na temat używania klejnotu reagującego na źródło lub umieszczania własnych kopii pliku React.js.

JSX

Po zainstalowaniu szyn reakcyjnych uruchom ponownie serwer. Teraz pliki .js.jsx zostaną przekształcone w potoku zasobów.

Opcje BabelTransformer

Możesz używać transformatorów babel i niestandardowych wtyczek oraz przekazywać opcje do transpilatora babel, dodając następujące konfiguracje:

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

Pod maską szyny reagujące wykorzystują do transformacji transpilator ruby-babel .

Renderowanie i montaż

react-rails zawiera pomocnika widoku (react_component) oraz dyskretne sterownik JavaScript (react_ujs), które współpracują ze sobą, aby umieścić React elementów na stronie. Powinieneś wymagać sterownika UJS w swoim manifeście po reakcji (i po turbolinkach, jeśli używasz turbolinków).

Pomocnik widoku umieszcza div na stronie z żądaną klasą komponentu i rekwizytami. Na przykład:

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

Podczas ładowania strony sterownik reag_ujs przeskanuje stronę i zamontuje komponenty za pomocą danych-reaguje na klasy i danych-reaguje na rekwizyty.

Jeśli Turbolinks jest obecny, komponenty są montowane na stronie: zmień zdarzenie i odmontowane na stronie: przed rozładowaniem. Turbolinki> = 2.4.0 są zalecane, ponieważ odsłaniają lepsze zdarzenia.

W przypadku wywołań Ajax montowanie UJS można uruchomić ręcznie, wywołując z javascript:

ReactRailsUJS.mountComponents () Podpis pomocnika widoku to:

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

component_class_name to ciąg znaków, który określa globalnie dostępną klasę składników. Może zawierać kropki (np. „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 może zawierać: tag: do użycia elementu innego niż div do osadzenia danych-zareaguj-klasy i danych-zareaguj-rekwizytów. prerender: true aby renderować komponent na serwerze. **other Wszelkie inne argumenty (np. klasa :, id :) są przekazywane do content_tag.