[RUBY] [Mit Backtricks] So stellen Sie React to the simple Rails vor

Die Rails + React- oder Vue-Konfiguration ist in modernen Webunternehmen sehr beliebt. Dieses Mal werden wir React to Rails einführen, das mit der Einführung von "hook" an Dynamik gewinnt.

Ausführungsumgebung

ruby 2.6.3p62 Rails 6.0.2.2

Installieren Sie Gem

Sie müssen Gem installieren, um "Helper" verwenden zu können. Fügen Sie der Gemfile und der Bundle-Installation Folgendes hinzu

• Für die Rails 5-Serie ist auch "gem'webpacker" erforderlich.

Gemfile

gem 'react-rails'
#Die Rails 5-Serie hat außerdem Folgendes hinzugefügt
gem 'webpacker'

Installieren Sie React

Führen Sie den folgenden Befehl im Terminal aus.

terminal

$ bin/rails wepacker:install:react
$ bin/rails g react:install

#Führen Sie in der Rails 5-Serie außerdem Folgendes aus
$ bin/rails webpacker:install

Dann werden die folgenden Änderungen hinzugefügt.

** App / Javascript / Komponenten / Verzeichnis hinzugefügt ** Hier werden Reaktionsdateien erstellt.

** Verarbeitung zum Einbetten von React in app / javascript / packs / application.js hinzugefügt **

app/javascript/packs/application.js

//Der folgende Code wird am Ende hinzugefügt
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

** Serverseitiges Rendering (SSR) zu app / javascript / packs / server_rendering.js hinzugefügt **

app/javascript/packs/server_rendering.js

//Der folgende Code wird am Ende hinzugefügt
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

• Für Rails 5-Serien muss Folgendes in der Kopfzeile von app / views / layouts / applicationi.html.erb beschrieben werden (6 wird standardmäßig beschrieben).

ruby:app/views/layouts/applicationi.html.erb

<%= javascript_pack_tag 'application' %>

Die Vorbereitung ist abgeschlossen.

Erstellen einer Komponente

Erstellen Sie als Test eine Komponente namens HelloWorld. Führen Sie den folgenden Befehl aus.

terminal

$ bin/rails g react:component HelloWorld greeting:string
Running via Spring preloader in process 12477
      create  app/javascript/components/HelloWorld.js

Begrüßung: Zeichenfolge ist der Name bzw. Typ des Arguments. Dann wird die folgende Datei generiert.

app/javascript/components/HelloWorld.js

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

Rails vorgestellt

Fügen Sie den folgenden Code zu dem Teil der Rails-Erb-Datei hinzu, in dem Sie die Komponente anwenden möchten, und fertig! <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

Tricks!

Der Code, der bei der Installation von React automatisch zu "app / javascript / packs / application.js" hinzugefügt wird, ist ** das Lesen des React-Codes auf allen Seiten **, sodass er auf Seiten angewendet werden kann, auf denen React nicht installiert ist. Und die Antwort wird reduziert. Löschen Sie den automatisch hinzugefügten Teil ** nur auf der Seite, auf der React installiert ist ** <%= javascript_pack_tag 'server_rendering.js' %> Sie können dies vermeiden, indem Sie hinzufügen.