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="{"name":"John"}"></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.