Ruby on Rails
Reagera med Rails med hjälp av rea-rails pärla

Reagera installationen för Rails med hjälp av rails_react gem

Lägg till rea-rails till din Gemfile:

gem 'react-rails'

Och installera:

bundle install

Kör sedan installationsskriptet:

rails g react:install

Det här kommer att:

skapa en komponenter.js manifestfil och en app / tillgångar / javascripts / komponenter / katalog, där du placerar dina komponenter placerar följande i din applikation.js:

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

Använda react_rails i din applikation

React.js bygger

Du kan välja vilken React.js-byggnad (utveckling, produktion, med eller utan tillägg) som ska serveras i varje miljö genom att lägga till en config. Här är standardvärdena:

# 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

För att inkludera tillägg använder du denna konfigurering:

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

Efter att du har startat om din Rails-server, kommer // = kräva reaktion att bygga upp React.js som specificerades av konfigurationerna.

react-rails erbjuder några andra alternativ för versioner & builds av React.js. Se VERSIONS.md för mer information om hur du använder rea-source-pärla eller släpper i dina egna kopior av React.js.

JSX

Starta om servern efter installation av rea-rails. Nu .js.jsx-filer kommer att transformeras i tillgångsrörledningen.

BabelTransformer-alternativ

Du kan använda Babel-transformatorer och anpassade plugins och skicka alternativ till babel-transpileraren och lägga till följande konfigurationer:

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

Under huven använder reagensskenor rubin-babel-transpiler , för transformation.

Rendering & montering

react-rails innehåller en visningshjälpare (react_component) och en diskret JavaScript-drivrutin (react_ujs) som fungerar tillsammans för att sätta React-komponenter på sidan. Du måste kräva UJS-drivrutinen i ditt manifest efter reaktion (och efter turbolinks om du använder Turbolinks).

Visningshjälpen sätter en div på sidan med den begärda komponentklassen och rekvisita. Till exempel:

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

Vid sidbelastning skannar drivrutinen för react_ujs sidan och monterar komponenter med hjälp av datareakt-klass och datareakt-rekvisita.

Om Turbolinks finns finns komponenter monterade på sidan: ändra händelse och avmonteras på sidan: före lossning. Turbolinks> = 2.4.0 rekommenderas eftersom det visar bättre händelser.

Vid Ajax-samtal kan UJS-montering triggas manuellt genom att ringa från javascript:

ReactRailsUJS.mountComponents () Visningshjälparens signatur är:

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

component_class_name är en sträng som namnger en globalt tillgänglig komponentklass. Det kan ha prickar (t.ex. "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 kan innehålla: tag: att använda ett annat element än en div för att bädda in datareakt-klass och datareakt-props. prerender: true att återge komponenten på servern. **other Eventuella andra argument (t.ex. klass:, id :) överförs till content_tag.