Ruby on Rails
Réagir avec les rails en utilisant la pierre de réaction

Réagir à l'installation pour Rails à l'aide de rails_react gem

Ajouter des rails de réaction à votre Gemfile:

gem 'react-rails'

Et installer:

bundle install

Ensuite, exécutez le script d'installation:

rails g react:install

Cette volonté:

Créez un fichier manifeste components.js et un répertoire app / assets / javascripts / components /, où vous placerez vos composants dans les champs suivants de votre application.js:

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

Utiliser react_rails dans votre application

React.js construit

Vous pouvez choisir quel React.js compile (développement, production, avec ou sans add-ons) pour servir dans chaque environnement en ajoutant une configuration. Voici les valeurs par défaut:

# 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

Pour inclure des modules complémentaires, utilisez cette configuration:

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

Après avoir redémarré votre serveur Rails, // = require react fournira la version de React.js spécifiée par les configurations.

react-rails propose quelques autres options pour les versions et les builds de React.js. Voir VERSIONS.md pour plus d’informations sur l’utilisation du joyau de react-source ou sur vos propres copies de React.js.

JSX

Après avoir installé react-rails, redémarrez votre serveur. Maintenant, les fichiers .js.jsx seront transformés dans le pipeline des ressources.

Options BabelTransformer

Vous pouvez utiliser les transformateurs et les plug-ins personnalisés de babel, et passer les options au babel transpiler en ajoutant les configurations suivantes:

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

Sous le capot, react-rails utilise ruby-babel-transpiler pour la transformation.

Rendu et montage

react-rails inclut une aide de vue (react_component) et un pilote JavaScript discret (react_ujs) qui fonctionnent ensemble pour placer les composants de React sur la page. Vous devriez exiger le pilote UJS dans votre manifeste après la réaction (et après les turbolinks si vous utilisez Turbolinks).

L'aide de vue place un div sur la page avec la classe de composant et les accessoires demandés. Par exemple:

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

Lors du chargement de la page, le pilote react_ujs analysera la page et montera les composants à l'aide de data-react-class et de data-react-props.

Si Turbolinks est présent, les composants sont montés sur la page: changez l'événement et démonté sur la page: avant-décharger. Turbolinks> = 2.4.0 est recommandé car il expose de meilleurs événements.

En cas d'appels Ajax, le montage UJS peut être déclenché manuellement en appelant à partir de javascript:

ReactRailsUJS.mountComponents () La signature de l'assistant de vue est:

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

component_class_name est une chaîne qui nomme une classe de composants accessible globalement. Il peut avoir des points (par exemple, "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 peut inclure: tag: utiliser un élément autre qu'un div pour incorporer data-react-class et data-react-props prerender: true pour rendre le composant sur le serveur. **other Tout autre argument (par exemple, class :, id :) est transmis à content_tag.