Ruby on Rails
Reageer met rails met behulp van react-rails gem

Reactie installatie voor Rails met behulp van rails_react gem

Voeg react-rails toe aan je Gemfile:

gem 'react-rails'

En installeer:

bundle install

Voer vervolgens het installatiescript uit:

rails g react:install

Dit zal:

maak een component.js-manifestbestand en een app / assets / javascripts / components / directory, waar u uw componenten plaatst, plaats het volgende in uw application.js:

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

React_rails gebruiken in uw applicatie

React.js bouwt

U kunt kiezen welke React.js bouwen (ontwikkeling, productie, met of zonder add-ons) om in elke omgeving te dienen door een configuratie toe te voegen. Dit zijn de standaardwaarden:

# 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

Gebruik deze configuratie om add-ons op te nemen:

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

Na het herstarten van uw Rails-server, zal // = vereisen reageren de build van React.js leveren die werd gespecificeerd door de configuraties.

react-rails biedt een paar andere opties voor versies en builds van React.js. Zie VERSIONS.md voor meer informatie over het gebruik van de edelsteen van de react-source of het plaatsen van je eigen exemplaren van React.js.

JSX

Nadat u react-rails hebt geïnstalleerd, start u de server opnieuw op. Nu worden .js.jsx-bestanden getransformeerd in de activapijplijn.

BabelTransformer-opties

U kunt de transformatoren en aangepaste plug-ins van babel gebruiken en opties doorgeven aan de babel-transpiler door de volgende configuraties toe te voegen:

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

Onder de motorkap gebruiken react-rails ruby-babel-transpiler , voor transformatie.

Rendering & montage

react-rails bevat een view-helper (react_component) en een onopvallend JavaScript-stuurprogramma (react_ujs) die samenwerken om React-componenten op de pagina te plaatsen. U moet de UJS-driver in uw manifest nodig hebben na reageren (en na turbolinks als u Turbolinks gebruikt).

De view helper plaatst een div op de pagina met de gevraagde componentklasse & rekwisieten. Bijvoorbeeld:

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

Bij het laden van de pagina scant het stuurprogramma react_ujs de pagina en koppelt het componenten met behulp van data-react-class en data-react-props.

Als Turbolinks aanwezig is, worden componenten op de pagina gemount: gebeurtenis wijzigen en op pagina ontkoppeld: vóór verwijdering. Turbolinks> = 2.4.0 wordt aanbevolen omdat het betere gebeurtenissen blootstelt.

In het geval van Ajax-oproepen, kan de UJS-koppeling handmatig worden geactiveerd door te bellen vanuit JavaScript:

ReactRailsUJS.mountComponents () De handtekening van de weergavehelper is:

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

component_class_name is een tekenreeks die een wereldwijd toegankelijke componentklasse benoemt. Het kan stippen bevatten (bijvoorbeeld "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 kunnen zijn: tag: om een ander element dan een div te gebruiken om data-react-class en data-react-props in te sluiten. prerender: true om het onderdeel op de server weer te geven. **other Alle andere argumenten (bijv. class :, id :) worden doorgegeven aan content_tag.