Tipps zur Integration von React und Ruby on Rails

React.js ist ein Javascript-Framework, das für seine Einfachheit bekannt ist. Während andere Frameworks einen vollständigen Model-View-Controller-Ansatz verwenden, nutzt React nur Views.

Hier bei Sloboda Studio praktizieren wir eine große Anzahl von möglichen React + Rails Kombinationen. In diesem Artikel werden wir beschreiben, wie Sie zwei separate Anwendungen mit Ruby on Rails und React erstellen können.

Hier bei Sloboda Studio praktizieren wir eine große Anzahl möglicher React + Rails-Kombinationen, aber lassen Sie uns die häufigsten Optionen für einen schnellen Start überprüfen:

React-Rails, React_on_Rails, und Ruby-Gems zusammen mit Webpacker.

Wir werden beschreiben, wie Sie zwei separate Anwendungen für das Frontend auf React und das Backend auf Rails erstellen können.

Warum ist Ruby im Jahr 2024 so beliebt?

Auch im Jahr 2024 ist Ruby eine beliebte Sprache für Entwickler, da sie den Prozess der Anwendungsentwicklung rationalisieren kann. Nehmen Sie diese Sprache also in Ihren Dienstplan auf!

Die Syntax von Ruby, die für ihre Lesbarkeit bekannt ist, die der natürlichen Sprache nahe kommt, ermöglicht es Entwicklern, Code zu erstellen, der leichter zu verstehen und zu pflegen ist. Dies führt zu schnelleren Entwicklungszyklen und ermöglicht die Einbindung in das umfangreiche Ökosystem von Bibliotheken und Edelsteinen, die das Ruby on Rails-Framework bietet.

Diese vorgefertigten Codemodule fungieren als Bausteine, mit denen Entwickler mit nur wenigen Codezeilen Funktionen und Merkmale erstellen und hinzufügen können. Mit einer starken und unterstützenden Community, die Entwicklern dabei helfen kann, neue Edelsteine zu erstellen und hinzuzufügen und die Sprache auf dem neuesten Stand zu halten, ermöglicht Ruby Entwicklern, sich auf Innovationen zu konzentrieren.

Dies ermöglicht es ihnen, robuste Anwendungen zu erstellen. So können sie komplexe Funktionen mithilfe eines speziellen Befehlstyps erstellen und hinzufügen oder Funktionen durch den Import eines vorhandenen Gems hinzufügen – das ist der 10-fache Entwicklungsschub, den Ruby bietet.

Auch die ersten Schritte mit Ruby sind ein Kinderspiel. Mit einem einzigen Befehl können Entwickler eine neue Rails-Anwendung erstellen, komplett mit der grundlegenden Dateistruktur für Controller, Modelle und Ansichten. Diese Komponenten dienen als Bausteine Ihrer Anwendung und ermöglichen es Ihren Entwicklern, Zeilen zum Code hinzuzufügen. Aber Ruby on Rails bietet noch mehr Komfort. Mit einem einfachen Befehl können Sie die Struktur Ihrer Anwendung weiter anpassen. Mit einem anderen Befehl können Sie beispielsweise neue Controller, Mode+ls oder Views erzeugen, um bestimmte Funktionen innerhalb Ihrer Anwendung zu verwalten. Der Befehl kann nicht nur Zeit sparen, sondern auch die Konsistenz Ihrer gesamten Codebasis sicherstellen. Schließlich kann ein Befehl Ihre Anwendung, Ihre Datenbank und Migrationen verwalten und sicherstellen, dass Ihre Datenstrukturen mit den sich entwickelnden Anforderungen Ihrer Anwendung synchron bleiben. Dieser Fokus auf eine rationalisierte Entwicklung durch einen gut definierten Befehl macht Ruby on Rails zu einem Favoriten unter Entwicklern.

Ruby on Rails bietet einen strukturierten Ansatz für die App-Entwicklung mit einer Reihe von Kerndateien. Nach einem Befehl können Sie mit Rails die benötigte Datei erzeugen, die die Grundlage für Ihre Anwendung bildet. Schauen wir uns einige dieser wesentlichen Bausteine an:

• Steuerungen: Dieser Dateityp fungiert als Verkehrsleiter Ihrer App, der eingehende Anfragen von Benutzern bearbeitet und mit anderen Teilen der App, wie Modellen und Ansichten, interagiert. Stellen Sie sich diese Datei als die Telefonzentrale vor, die herausfindet, wohin jede Benutzerinteraktion geleitet werden soll.
• Modelle: Diese Datei stellt die Daten Ihrer Anwendung dar. Betrachten Sie diese Datei als eine Blaupause, die die Struktur und die Eigenschaften Ihrer Daten definiert, z. B. Benutzer, Produkte oder Blogbeiträge.
• Ansichten: Diese Datei ist für die Darstellung der Informationen für den Benutzer verantwortlich. Sie verwendet Codevorlagen und importierte Komponenten, um dynamisch den HTML-, CSS- und JavaScript-Code zu erzeugen, den der Benutzer in seinem Webbrowser sieht.

Normalerweise würde jede Datei nahtlos zusammenarbeiten. Controller erhalten Benutzeranfragen, interagieren mit Modellen, um auf Daten zuzugreifen und diese zu bearbeiten, und verwenden dann Ansichten, um die resultierenden Informationen in einem benutzerfreundlichen Format zu präsentieren.

Ganz gleich, ob Sie eine einfache Webanwendung oder eine komplexe Unternehmenslösung entwickeln, Ruby bietet die Werkzeuge und Ressourcen, um die Arbeit effizient zu erledigen.

Können React und Ruby on Rails zusammenarbeiten?

React und Ruby on Rails können auf komplementäre Weise zusammenarbeiten. React kann für die Erstellung der Frontend-Benutzeroberfläche verwendet werden, während Ruby on Rails die Backend-Logik und die Datenbankverwaltung übernehmen kann. Sie können über APIs kommunizieren, um dynamische und interaktive Webanwendungen zu erstellen.

Drei Wege zur Integration von React.js mit Rails

1. React-rails gem und Webpacker gem

Die Verwendung des react-rails-Gems ist der einfachste und schnellste Weg, um React in Ihre Ruby on Rails-App zu integrieren. Dieses Gem verwendet die standardmäßige Rails-Asset-Verwaltung und transformiert JSX in die Asset-Pipeline mithilfe des Babel-Transformers.

Webpacker ist ein Edelstein, der eine reibungslose und standardmäßige React- und Ruby-Integration von Rails mit dem Webpack-Kollektor und dem Paketmanager Yarn bietet. Die optionalen Integrationen mit beliebten Frameworks und Bibliotheken wie React, Angular und Vue sind ebenfalls bereits im Lieferumfang enthalten.

Für jede Rails-Startumgebung gibt es eine entsprechende Datei im Verzeichnis config/webpack , die Teil der shared. js-Konfiguration ist , die allen Umgebungen gemeinsam ist.Hier befindet sich auch die Datei configuration.js , die für die Verarbeitung der Einstellungen aus config/webpacker.ymlverantwortlich ist .

Es gibt zwei Installationsskripte, um den Webpacker-Installationsprozess zu starten:

• bin/webpack zum einmaligen Starten
• bin/webpack-dev-server zum Starten der Installation mit Verfolgung von Dateiveränderungen und Re-Build nach Änderungen. Wenn Sie die beste Anwendung erstellen möchten, empfehlen wir Ihnen, diese Option zu verwenden.

Vorausgesetzt, Sie haben bereits die neueste Version von Ruby und Rails installiert und wissen genug über React, sind Sie nun bereit, unsere Anleitung zu lesen.

Zuerst müssen Sie das neue Gem zu Ihrem Gemfile hinzufügen, indem Sie den Befehl gem 'react-rails' ausführen und das Gem installieren, indem Sie bundle install und das react-rails Installationsskript ausführen: rails g react:install.

Diese Aktionen erstellen ein neues Verzeichnis für die Komponenten und die Manifestdatei und fügen sie der Datei application.js hinzu.

Danach erstellen Sie die .jsx React-Komponentendatei, speichern sie im Verzeichnis app/assets/javascripts/components und führen den Code aus:

var HelloMessage = React.createClass({
render: function() {
return (


Verwenden Sie diese Komponente später in der Ansicht mit Hilfe der Hilfsmethode react_component:

Es fügt ein Div mit den relevanten Klassen und Props hinzu, die später vom react_ujs-Treiber zum Einbinden und Rendern der Komponente verwendet werden.

Diese Methode ermöglicht es Ihnen, schrittweise mit React zu arbeiten und alles zu testen, indem Sie die einzelnen Ansichten in React-Komponenten umwandeln. Sobald Sie Ihre Ziele erreicht haben, können Sie zu einem leistungsfähigeren Setupübergehen .

2. react_on_rails gem

Eine weitere beliebte Möglichkeit, React und Ruby on Rails zu integrieren, ist das Gem react-on-rails. Der Hauptunterschied zu react-rails besteht darin, dass es standardmäßig ECMAScript 6 (ES6) und modernes Tooling einschließlich Webpack verwendet, anstatt sich auf die Rails-Asset-Pipeline zu verlassen. Dieses Gem ist auch nicht auf jQuery angewiesen.

Um Javascript-Bibliotheken zu installieren, können Sie NPM verwenden, anstatt die Gems manuell herunterzuladen. Wenn Sie diese integriert haben, haben Sie mehr Möglichkeiten, mehrere Komponenten zu installieren und zu verwalten, um Rails und React zusammenzuführen.

Um loszulegen, installieren Sie den Node, der es Ihnen ermöglicht, NPM zum Starten von Javascript-Abhängigkeiten zu verwenden. Sie können den Node direkt von der Website herunterladen oder ihn mit NVM installieren.

Nach der Installation des Knotens können wir den Edelstein zu unserer Ruby on Rails-Anwendung hinzufügen und ihn installieren, indem wir das Bundle ausführen.


gem "react_on_rails", "~> 6"


Damit das Installationsskript funktioniert, müssen wir auf diesen Git-Zweig verweisen:


Git-Init
git add -A
git commit -m "Erste Übergabe"


Führen Sie anschließend den Generator des Edelsteins aus und erstellen Sie die Dateien package.json und Procfile.dev:


Schienen erzeugen react_on_rails:install


Nach Abschluss der oben genannten Schritte führen Sie das Paket erneut aus, um exec zu installieren.

Starten Sie dann erneut das Bundle(bundle && npm install) für die Installation von execjs, und npm install für die Installation der JS-Abhängigkeiten, und starten Sie den Rails-Server: foreman start -f Procfile.dev

Der Edelstein erstellt auch ein benutzerdefiniertes Verzeichnis, in dem der gesamte clientseitige Code gespeichert wird. Nachdem wir alles eingerichtet haben, was wir brauchen, können wir die notwendigen React-Komponenten erstellen und verwenden.

3. Ruby on Rails API mit ReactJS Front-End

Eine andere Möglichkeit, React mit Ruby zu integrieren, besteht darin, zwei getrennte Anwendungen für den Backend- und den Frontend-Teil zu erstellen: den API-Teil, der auf Rails geschrieben wurde, und eine Anwendung auf React, die mit der Rails-API verbunden ist. Dieser Ansatz hat die folgenden Vorteile:

• Die Frontend-Entwickler können die Javascript-Bibliotheken nutzen, ohne dass sie ihren Code an die Rails-Bedingungen anpassen müssen.
• Da die Rails-API mit der React-Schnittstelle über JSON-Dateien kommuniziert und es kein Konzept für die gemeinsame Nutzung von Zuständen auf mehreren Servern gibt, ist es einfacher, die Anwendung zu skalieren.

Lassen Sie uns besprechen, wie wir die Ruby on Rails-API mit dem React-Frontend verbinden können.

Zunächst müssen Sie Ihre Ruby on Rails-Anwendungsstruktur erstellen und den Postgres-Server starten, indem Sie die entsprechende Anwendung auf Ihrem Rechner starten. Sobald dies geschehen ist, sehen Sie die Willkommensseite und die Anwendung ist bereit für den nächsten Schritt.

Innerhalb des Anwendungsordners müssen Sie einen neuen Client-Ordner und eine React-Schnittstelle erstellen, indem Sie den Client create-react-app verwenden. Innerhalb dieses Ordners können Sie Yarn verwenden, um die folgenden Aktionen durchzuführen::

• Yarn-Start zum Erstellen und Starten des Entwicklungsservers (die React-Seite kann unter http://localhost:3000/ aufgerufen werden).
• Yarn Build zum Bündeln der Anwendung in statische Dateien für die Produktion.
• Fadentest zum Starten des Testlaufs.

Jetzt starten wir den Proxy für API-Aufrufe über den erforderlichen Port, ohne zwischen Entwicklung und Produktion wechseln und den NPM-Server neu starten zu müssen.

Später müssen Sie die wichtigsten aktiven Datensatzbeziehungen erstellen:

• Rails g scaffold List title:string excerpt:text description:text upvotes:integer. Im API-Modus hilft es bei der Erstellung von Migration, Model, Route und Controller.
• Die Item-Ressource kann durch Ausführen von rails g scaffold erstellt werden Item type:integer name:string excerpt:text description:text url:string upvotes:integer.
• Für Listenelemente können wir die Verknüpfungsbeziehung erstellen, indem wir den Befehl rails g model ListItem list:references item:references description:text position:integer ausführen.

Nun ist es an der Zeit, die Datenbank zu erstellen und zu migrieren, indem Sie die Befehle rake db:create und rake db:migrate ausführen.

Passen Sie die Namensräume an, indem Sie einen Ordner app/controllers/api/v1 erstellen und die Dateien lists_controller.rb und items_controller.rb dorthin kopieren. Wir haben den Proxy so eingerichtet, dass alle Aufrufe, die mit /api beginnen, localhost:3001 erreichen, wo die Rails-API aktiv ist, und nicht localhost:3000 , wo der NPM-React-Client arbeitet.

Sobald der API-Teil eingerichtet ist, ist es an der Zeit, mit der React-Schnittstelle zu arbeiten. Importieren Sie in App.js one und erstellen Sie einen Ordner client/src/components, in dem die Komponenten gespeichert werden sollen.

Der nächste Schritt ist die Installation von axios, um API-Aufrufe durchzuführen: npm install axios. Nun importieren Sie es in den ListsContainer, indem Sie die Zeile import axios from 'axios' hinzufügen

Außerdem müssen Sie eine npm-Installation erneut durchführen und den npm-Server mit npm start beenden und neu starten.

Dann wollen wir den List-Teil der Anwendung umstrukturieren, indem wir den Code in eine Komponente gruppieren, die den Status nicht bearbeitet, sondern Daten über Requisiten empfängt. Um dies zu tun, erstellen Sie die Komponente list.js:

importiere React von ‚react‘;
const List = ({list}) =>

Standardliste exportieren;

Dann importieren Sie sie aus der Hauptkomponente List, indem Sie import List from './List' ausführen.

Dies sind die drei wichtigsten Möglichkeiten, React.js zu einer Ruby on Rails-Anwendung hinzuzufügen. Sie können die Methode wählen, die am besten zu den Anforderungen Ihres Projekts passt.

Warum React JS und Ruby on Rails als Backend verwenden?

Rails mit React ist ein sehr beliebter Framework-Mix für eine moderne Webanwendung, da beide Technologien in der Entwicklergemeinde weithin anerkannt sind. Schauen wir uns die Vorteile der Einbindung von React in einen Rails-Stack für den Aufbau einer schnellen und skalierbaren Webanwendung an.

Verwandt:

Vor- und Nachteile von Ruby on Rails

Ruby on Rails Entwicklung

Verlässlichkeit

Sowohl React als auch RoR sind bewährte Technologien, die von bekannten Websites weit verbreitet sind und von einer aktiven Entwicklergemeinschaft unterstützt werden. Dies macht React with Rails zu einem äußerst zuverlässigen Framework, das von den höchsten Entwicklungsstandards unterstützt wird.

Schnelligkeit und Bequemlichkeit

Ruby on Rails bietet eine große Anzahl von Gems, die fertige Lösungen für verschiedene Aufgaben bieten. Es bietet auch die Werkzeuge für die Erstellung von Backend-APIs, die mit der Client-Seite kommunizieren können, zum Beispiel mit dem React-Frontend. Die Entwickler müssen nicht mehr alles von Grund auf neu schreiben, wodurch sich die Entwicklung beschleunigt und die Kosten reduziert werden.

Leichtgewicht

React ist leichter als jedes andere Javascript-Framework. Beim Aufbau des Frontends verwenden die Entwickler die strukturierten Komponenten und fügen nur die Module hinzu, die notwendig sind. Dies trägt dazu bei, den Code präzise und klar zu gestalten und unnötige Zeilen zu reduzieren.

Einfache Prüfung und Wartung

Im Vergleich zu anderen Technologien ist Rails eine bequemere Lösung für die Entwicklung, das Testen und die Wartung. Die Fülle an Test-Frameworks und -Bibliotheken (Rspec, Capybara für Rails) und die klare Trennung zwischen den beiden Frameworks (Backend auf Rails und Frontend auf React) tragen dazu bei, dass Entwicklung und Wartung reibungslos verlaufen.

Effizienz der Teamarbeit

Da die Anwendung klar in Backend- und Frontend-Teile unterteilt ist, die auf unterschiedlichen Technologien basieren, wird die Kommunikation innerhalb des Teams durch die Aufteilung des Projekts in Verantwortungsbereicheverbessert . React muss nicht wissen, dass Ihr Frontend-Team die Details von Rails kennt, und umgekehrt – die Arbeit der Teams wird getrennt behandelt.

Schlussfolgerung

Sie haben sich soeben über die gängigsten Möglichkeiten zur Integration von Ruby on Rails und Reactinformiert. Lassen Sie uns kurzzusammenfassen:

1. Zunächst haben wir die Eigenschaften von React und die Vorteile seiner Verwendung mit Ihrem Rails-Backend betrachtet: Dank seiner Zuverlässigkeit, Geschwindigkeit, Leichtigkeit und umfangreichen Dokumentation wird die Effizienz der Arbeit des Entwicklungsteams erhöht.
2. Wir haben auch die drei wichtigsten Möglichkeiten der Integration von React mit Ruby on Rails in Betracht gezogen: die Verwendung der Gems react-rails und react-on-rails zusammen mit Webpack und die Erstellung von zwei separaten Anwendungen für die Backend- und Frontend-Teile, die in Rails und React geschrieben wurden. Der letzte Weg ist natürlich der komplizierteste, aber für die komplexesten Projekte mit großen Entwicklungsteams wäre er die beste Wahl.

Sicherlich gibt es nochviele weitere interessante Kombinationen, die unser Team bei der Webentwicklung einsetzt.

Wenn Sie Hilfe bei der React-Integration benötigen, schreiben Sie uns einfach eine Nachricht.