Ruby on Rails
Реагировать с рельсами, используя камень с ребрами

Реагировать на установку Rails с использованием rails_react gem

Добавьте ретрансляционные рельсы в ваш Gemfile:

gem 'react-rails'

И установите:

bundle install

Затем запустите сценарий установки:

rails g react:install

Это будет:

создайте файл манифеста components.js и каталог app / assets / javascripts / components /, где вы поместите свои компоненты в свое приложение application.js:

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

Использование response_rails в вашем приложении

React.js строит

Вы можете выбрать, какие сборки React.js (разработка, производство, с или без надстроек) для обслуживания в каждой среде, добавив конфигурацию. Вот настройки по умолчанию:

# 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

Чтобы включить надстройки, используйте эту конфигурацию:

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

После перезапуска сервера Rails // = require response предоставит сборку React.js, которая была задана конфигурациями.

Реактивные рельсы предлагают несколько других вариантов для версий и сборок React.js. См. VERSIONS.md для получения дополнительной информации об использовании драгоценного камня с реактивными источниками или о том, как использовать его в своих копиях React.js.

JSX

После установки реактивных рельсов перезагрузите сервер. Теперь файлы .js.jsx будут преобразованы в конвейер активов.

Параметры BabelTransformer

Вы можете использовать трансформаторы Babel и пользовательские плагины, а также передавать параметры транспилерам babel, добавляя следующие конфигурации:

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

Под капотом реактивные рельсы используют трансилер ruby-babel-transpiler для трансформации.

Рендеринг и монтаж

(react_component) react-rails включает в себя помощник вида (react_component) и ненавязчивый JavaScript-драйвер (react_ujs), которые работают вместе, чтобы помещать компоненты React на страницу. Вы должны потребовать драйвер UJS в манифесте после реагирования (и после турбовинтовых, если вы используете Turbolinks).

Помощник вида помещает div на страницу с запрошенным классом компонентов и реквизитами. Например:

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

При загрузке страницы драйвер response_ujs сканирует страницу и монтирует компоненты с помощью реквизитов для обработки данных и обработки данных.

Если присутствуют Turbolinks, компоненты устанавливаются на странице: изменение события и размонтирование на странице: перед выгрузкой. Turbolinks> = 2.4.0 рекомендуется, поскольку он предоставляет лучшие события.

В случае вызовов Ajax установка UJS может запускаться вручную, вызывая из javascript:

ReactRailsUJS.mountComponents () Подпись помощника вида:

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

component_class_name - это строка, которая называет глобально доступный класс компонентов. Он может иметь точки (например, «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 могут включать в себя: tag: использовать элемент, отличный от div, для встраивания обработчиков данных и реагирования на данные. prerender: true для рендеринга компонента на сервере. **other Любые другие аргументы (например, class :, id :) передаются в content_tag.