[JAVA] Einführung in React to Rails mit React-Rails

Hallo allerseits, diesmal zeige ich euch, wie man React to Rails mit einem Edelstein namens "React-Rails" einführt. Es gibt mehrere Möglichkeiten, React in Rails bereitzustellen, aber ich habe es gewählt, weil es wahrscheinlich einfach und üblich ist. Als Einschränkung hängt es von Rails ab, also denke ich, dass es dir gefällt oder nicht.

Auf das offizielle Dokument kann übrigens über die folgende URL zugegriffen werden. URL der React-Rails: https://github.com/reactjs/react-rails#server-side-rendering

Ich werde es gemäß dem folgenden Ablauf einführen.

--Prämisse

• Einführung von Reaktionsschienen
• Komponente erstellen
• Ausgabe mit Ansicht

Annahme

(1) Eine App wurde bereits mit Rails-New erstellt. ② Verwenden Sie Schienen 5.0 oder höher

Einführung von Reaktionsschienen

Schreiben Sie Folgendes in die Gemfile.

gem 'webpacker'
gem 'react-rails'

• Abhängig von der Version der Schienen kann "Webpacker" standardmäßig enthalten sein. Bitte überprüfen Sie dies im Voraus. Bitte wechseln Sie mit dem Befehl cd in das Zielanwendungsverzeichnis. Führen Sie als Nächstes die folgenden Befehle der Reihe nach aus.

$ bundle install
/*①*/ $ rails webpacker:install
/*②*/ $ rails webpacker:install:react
$ rails generate react:install

Beachten Sie, dass die Befehle ① und ② nur ausgeführt werden können, wenn Rails 5.0 oder höher ist!

Jetzt können Sie loslegen! !!

Komponente erstellen

Um React zu beschreiben, werden häufig Dateien in einem Verzeichnis namens Components erstellt. Es ist in Ordnung, es manuell zu erstellen, aber lassen Sie es uns gemäß der offiziellen Dokumentation erstellen. Führen Sie den folgenden Befehl im Terminal usw. aus.

$ rails g react:component HelloWorld greeting:string

Dann wird die folgende Datei erstellt.

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

Damit ist die Dateierstellung abgeschlossen.

Ausgabe im Blick

Lassen Sie uns den Inhalt von React aus der erstellten Komponente ausgeben.

app/views/posts/index.html.erb

<%= react_component('HelloWorld', greeting: 'Mike') %>

Sehen wir uns den Ausgabeinhalt im Browser an. Sie sollten "Gruß: Mike" sehen.

Neben dem Komponentenverzeichnis können Sie übrigens auch ein eigenes Verzeichnis erstellen. Führen Sie den folgenden Befehl aus.

$ rails g react:component my_subdirectory/HelloWorld greeting:string

Dann wurde die js-Datei unter dem Komponentenverzeichnis in dem zuvor ausgeführten Befehl erstellt, diesmal jedoch wie folgt.

app/javascript/my_subdirectory/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

Ich konnte eine js-Datei unter "my_subdirectory" erstellen, die im Befehl angegeben ist. Beschreiben Sie Folgendes, wenn Sie zur Ansicht aufrufen.

app/views/posts/index.html.erb

<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>

Wenn Sie Ihren Browser überprüfen, sollte "Begrüßung: Hallo von React-Rails" angezeigt werden.

Dies ist praktisch, da es mit der Methode react_component einfach aufgerufen werden kann. Ich habe es gerade vorgestellt, also werde ich damit herumspielen.

Abgesehen davon ist es heutzutage kälter geworden. Ich bin zu wütend und drücke mit meinen schaufensterpuppenartigen Händen auf die Tastatur. (Wenn Sie die Heizung einschalten, ja ...)

Vielen Dank für das Lesen bis zum Ende! !!