These are the docs for React on Rails 12. To see the version 11 docs, click here.

News

October 14, 2020: RUBY ROGUESRR 474: Reagieren auf Schienen V12 – Rasieren Sie nicht, dass Yak! mit Justin Gordon.

1. Oktober 2020: Im spec / Dummy-Beispiel-Repo finden Sie eine einfache Konfiguration von Webpack über das Rails / Webpacker-Gemdas unterstützt SSR.

2. August 2020: Im Beispiel-Repo von React on Rails Tutorial mit SSR, HMR fast refresh und TypeScript finden Sie eine neue Möglichkeit, die Erstellung Ihres SSR-Bundles mit rails/webpacker .

8. Juli 2020: Release v12 von React on Rails.

Wesentliche Verbesserungen

1. React Hooks Unterstützung für Komponenten der obersten Ebene
2. Typescript-Bindungen
3. rails / webpacker „funktioniert“ standardmäßig mit React on Rails.
4. i18n-Unterstützung für das Generieren einer JSON-Datei anstelle einer JS-Datei.

Achten Sie darauf, die CHANGELOG.md und lesen Sie die Upgrade-Anweisungen: docs / basics / upgrade-react-on-rails .

• Siehe Justins RailsConf Talk: Webpacker, Es funktioniert-einfach-, aber wie?.
• Haben Sie Interesse an Support für React on Rails? Möchten Sie Knoten verwenden.js, um Ihr serverseitiges Rendering durchzuführen, damit Bibliotheken wie Emotion und ladbare Komponenten im Vergleich zum Rendering über Ruby Embedded JS einfach funktionieren? Wenn ja, schauen Sie sich React on Rails Pro an.
• HMR arbeitet mit ladbaren Komponenten für ein erstaunliches Hot-Reloading-Entwicklererlebnis und eine hervorragende Laufzeitleistung. Bitte senden Sie mir eine E-Mail, wenn Sie die Codeteilung für ladbare Komponenten verwenden möchten, um Ihre App zu beschleunigen, indem Sie Ihre Bundle-Größen reduzieren und den benötigten Code träge laden.

Über

React on Rails integriert Rails in (Server-Rendering von) Facebooks React-Front-End-Framework.

Dieses Projekt wird von der Softwareberatungsfirma ShakaCode betreut. Wir konzentrieren uns auf Ruby on Rails-Anwendungen mit React-Frontends, die häufig TypeScript oder ReasonML verwenden. Wir bauen auch Gatsby-Sites. Sehen Sie sich unsere jüngsten Arbeiten an, um Beispiele dafür zu erhalten, was wir tun.

Möchten Sie Ihr Webpack-Setup für React on Rails optimieren, einschließlich Codesplitting mit React-Router und ladbaren Komponenten mit serverseitigem Rendering?Wir haben dies gerade für Popmenu getan und die Heroku-Kosten um 20-25% gesenkt, während die durchschnittlichen Antwortzeiten um 73% gesenkt wurden.

Nehmen Sie mit Justin Gordon Kontakt auf, [email protected] , Betreuer von React on Rails, für weitere Informationen.

Klicke, um React + Rails Slack beizutreten.

Projektziel

Bereitstellung eines leistungsstarken Frameworks für die Integration von Ruby on Rails mit React über das Webpacker-Juwel, insbesondere in Bezug auf das serverseitige Rendering von React für bessere SEO und verbesserte Leistung.

Funktionen und warum auf Schienen reagieren?

Da rails/webpacker gem bereits eine grundlegende React-Integration bietet, warum sollten Sie „React on Rails“ verwenden?

1. Einfache Übergabe von Requisiten direkt von Ihrer Rails-Ansicht an Ihre React-Komponenten, anstatt dass Ihre Rails-Ansicht geladen und dann eine separate Anfrage an Ihre API gestellt wird.
2. Enge Integration mit Rails/Webpacker.
3. Serverseitiges Rendering (SSR), das häufig für die Indizierung von SEO-Crawlern und die UX-Leistung verwendet wird, wird von rails/webpacker nicht angeboten.
4. Redux- und React-Router-Integration mit serverseitigem Rendering.
5. Internationalisierung (I18n) und (Lokalisierung)
6. Eine unterstützende Community. Diese Websuche zeigt, wie öffentliche Live-Sites React on Rails verwenden.
7. Grund ML-Unterstützung.

Siehe Rails / Webpacker React-Integrationsoptionen für Vergleiche mit anderen Edelsteinen.

Im react-webpack-rails-Tutorial finden Sie ein Beispiel für eine Live-Implementierung und Code.

ShakaCode Forum Premium Content

Erfordert die Erstellung eines kostenlosen Kontos.

• So verwenden Sie verschiedene Versionen einer Datei für das Client- und Server-Rendering
• So rendern Sie die Serverseite bedingt basierend auf dem Gerätetyp

Docs

Betrachten Sie dies auf unserer Website.

Voraussetzungen

Ruby on Rails >=5 und rails/webpacker 4.2+.

Erste Schritte

Beachten Sie, dass der beste Weg, um zu verstehen, wie ReactOnRails verwendet wird, darin besteht, einige einfache Beispiele zu studieren. Sie können ein schnelles Demo-Setup entweder in Ihrer vorhandenen App oder in einer neuen Rails-App durchführen.

1. Führen Sie die Kurzanleitung durch.
2. Fügen Sie React on Rails gemäß den Anweisungen zu einer vorhandenen Rails-App hinzu.
3. Schau dir spec/dummy an , ein einfaches, kein DB-Beispiel.
4. Siehe github.com/shakacode/react-webpack-rails-tutorial ; es ist ein voll funktionsfähiges Beispiel live bei www.reactrails.com .

Grundlegende Installation

Siehe auch die Anweisungen zur Installation in einer vorhandenen Rails-App.

1. Füge das react_on_rails gem zu Gemfile hinzu:

   bundle add react_on_rails --strict

2. Übergeben Sie dies an git (andernfalls können Sie den Generator nicht ausführen, es sei denn, Sie übergeben die Option --ignore-warnings).

3. Starten Sie den Generator:

   rails generate react_on_rails:install

4. Starten Sie die App:

   rails s

5. Besuchen Sie http://localhost:3000/hello_world.

Server-Rendering einschalten

Mit dem Code aus dem obigen React on Rails-Generator:

1. Editiere app/views/hello_world/index.html.erb und setze prerender auf true.
2. Aktualisieren Sie die Seite.

Unten ist die Zeile, in der Sie das Server-Rendering aktivieren, indem Sie prerender auf true setzen:

<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

Hinweis: Wenn Sie in Ihrer Konsole einen Fehler bezüglich „ReferenceError: window is not defined“ erhalten haben, müssen Sie config/webpacker.yml und setzen Sie hmr: false und inline: false.Siehe rails / webpacker PR 2644 für eine Korrektur für thisissue .

Grundlegende Verwendung

Konfiguration

• Konfigurieren config/initializers/react_on_rails.rb. Sie können einige notwendige Einstellungen und Standardeinstellungen anpassen. In der Datei docs/basics/configuration.md finden Sie eine Dokumentation aller Konfigurationsoptionen.
• Konfigurieren Sie config/webpacker.yml. Wenn Sie den Generator und das Standard-Webpacker-Setup verwendet haben, müssen Sie diese Datei nicht berühren. Wenn Sie Ihr Setup anpassen, lesen Sie die Spezifikation / dummy / config / webpacker .yml-Beispiel oder der offizielle Standard-Webpacker.yml.
  • Spitze: setzen Sie compile: false für die Entwicklung, wenn Sie wissen, dass Sie immer mit einem Watch-Prozess kompilieren werden. Andernfalls prüft jede Anforderung, ob eine Kompilierung erforderlich ist.
  • Ihre public_output_path muss mit Ihrer benutzerdefinierten Webpack-Konfiguration für output Ihrer Bundles übereinstimmen.
  • Setzen Sie in Ihrer Produktionsumgebung nur cache_manifest auf true .

Einschließen Ihrer Reaktionskomponente in Ihre Rails-Ansichten

• Die Reaktionskomponente wird über Ihre Rails-Ansichten gerendert. Hier ist ein ERB-Beispiel:

  <%= react_component("HelloWorld", props: @some_props) %>

• Serverseitiges Rendering: Ihre Reaktionskomponente wird zuerst auf dem Server in HTML gerendert. Verwenden Sie die Option prerender:

  <%= react_component("HelloWorld", props: @some_props, prerender: true) %>

• Der Parameter component_name ist eine Zeichenfolge, die mit dem Namen übereinstimmt, mit dem Sie Ihre React-Komponente global verfügbar gemacht haben. Wenn Sie also in den obigen Beispielen eine Reaktionskomponente mit dem Namen „HelloWorld“ hätten, würden Sie sie mit den folgenden Zeilen registrieren:

  import ReactOnRails from 'react-on-rails';import HelloWorld from './HelloWorld';ReactOnRails.register({ HelloWorld });

  Wenn Sie Ihre Komponente auf diese Weise verfügbar machen, kann React on Rails Ihre Komponente aus einer Rails-Ansicht referenzieren. Sie können so viele Komponenten verfügbar machen, wie Sie möchten, solange ihre Namen nicht kollidieren. Im Folgenden erfahren Sie, wie Sie Ihre Komponenten über die react_on_rails-Webpack-Konfiguration verfügbar machen. Sie können ReactOnRails.register viele Male aufrufen.

• @some_props kann entweder ein Hash- oder ein JSON-String sein. Dies ist ein optionales Argument, vorausgesetzt, Sie müssen keine Optionen übergeben (wenn Sie Optionen übergeben möchten, z. B. prerender: true , aber keine Eigenschaften übergeben möchten, übergeben Sie einfach einen leeren Hash {}). Dadurch werden die Daten in Ihrer Komponente verfügbar:

   # Rails View <%= react_component("HelloWorld", props: { name: "Stranger" }) %>

• Dies ist, was Ihre HelloWorld .js-Datei enthalten könnte. Der railsContext ist immer für alle Parameter verfügbar, die für Ihre Reaktionskomponenten immer verfügbar sein sollen. Es hat nichts mit dem Konzept des Reaktionskontexts zu tun. Weitere Informationen zu diesem Thema finden Sie unter Render-Functions und RailsContext.

  import React from 'react';export default (props, railsContext) => { // Note wrap in a function to make this a React function component return () => ( <div> Your locale is {railsContext.i18nLocale}.<br/> Hello, {props.name}! </div> );};

Weitere Informationen zu react_component und seiner Geschwisterfunktion react_component_hash finden Sie in der API für Ansichtshelfer.

Globale Bereitstellung Ihrer Reaktionskomponenten

Für den React on Rails View helper react_component Um Ihre Reaktionskomponenten zu verwenden, müssen Sie sie in Ihrem JavaScript-Code registrieren.

Verwenden Sie Module wie bei der Verwendung von Webpack und reagieren Sie ohne Rails. Der Unterschied besteht darin, dass Sie React-Komponenten nicht direkt mit React.render an ein Element React.render , sondern Ihre Komponenten bei ReactOnRails registrieren und sie dann mit Helfern in Ihren Rails-Ansichten mounten.

So stellen Sie eine Komponente dem react_component view helper zur Verfügung.

 // app/javascript/packs/hello-world-bundle.js import HelloWorld from '../components/HelloWorld'; import ReactOnRails from 'react-on-rails'; ReactOnRails.register({ HelloWorld });

Unterschiedlicher serverseitiger Rendering-Code (und ein serverspezifisches Bundle)

Möglicherweise möchten Sie einen anderen Code für Ihre vom Server gerenderten Komponenten, die serverseitig und clientseitig ausgeführt werden. Wenn Sie beispielsweise eine Animation haben, die ausgeführt wird, wenn eine Komponente angezeigt wird, müssen Sie diese möglicherweise beim Serverrendern deaktivieren. Eine Möglichkeit, dies zu handhaben, ist bedingter Code wie if (window) { doClientOnlyCode() } .Eine andere Möglichkeit besteht darin, eine separate Webpack-Konfigurationsdatei zu verwenden, die eine andere serverseitige Eingabedatei verwenden kann, z. B. ’serverRegistration .js‘ im Gegensatz zu ‚clientRegistration.js.‘ Das würde einen anderen Code für das Server-Rendering einrichten.

Einzelheiten zu Techniken zur Verwendung unterschiedlichen Codes für Client- und Server-Rendering finden Sie unter: So verwenden Sie verschiedene Versionen einer Datei für das Client- und Server-Rendering. (Erfordert die Erstellung eines kostenlosen Kontos.)

Angeben Ihrer Reaktionskomponenten: Registrieren Sie sich direkt oder verwenden Sie Renderfunktionen

Sie haben zwei Möglichkeiten, Ihre Reaktionskomponenten anzugeben. Sie können entweder die Reaktionskomponente (entweder Funktions- oder Klassenkomponente) direkt registrieren oder eine Funktion erstellen, die eine Reaktionskomponente zurückgibt, die wir unter dem Namen einer „Renderfunktion“ verwenden. Das Erstellen einer Render-Funktion ermöglicht:

1. Sie haben Zugriff auf die railsContext . Siehe Dokumentation für den railsContext in Bezug auf, warum Sie es brauchen könnten. Sie benötigen eine Render-Funktion, um auf die railsContext .
2. Sie können die übergebenen Requisiten verwenden, um einen Redux-Speicher zu initialisieren oder einen React-Router einzurichten.
3. Sie können verschiedene Komponenten zurückgeben, je nachdem, was in den Requisiten enthalten ist.

Beachten Sie, dass der Rückgabewert einer Render-Funktion entweder eine React-Funktion oder eine Klassenkomponente oder ein Objekt sein sollte, das Server-Rendering-Ergebnisse darstellt.

Gibt kein React-Element (JSX) zurück.

ReactOnRails erkennt eine registrierte Renderfunktion automatisch daran, dass die Funktion mehr als 1 Parameter benötigt. Mit anderen Worten, wenn Sie die Möglichkeit haben möchten, eine Funktion bereitzustellen, die dort zurückkehrtaktkomponente, dann müssen Sie mindestens einen zweiten Parameter angeben. Dies ist die railsContext .Wenn Sie diesen Parameter nicht verwenden, deklarieren Sie Ihre Funktion mit dem nicht verwendeten Parameter:

const MyComponentGenerator = (props, _railsContext) => { if (props.print) { // This is a React FunctionComponent because it is wrapped in a function. return () => <H1>{JSON.stringify(props)}</H1>; }}

Daher gibt es keinen Unterschied zwischen der Registrierung einer React-Funktionskomponente oder einer Klassenkomponente im Vergleich zu einer „Render-Function .“ Rufen Sie einfach ReactOnRails.register .

react_component_hash für Render-Funktionen

Ein weiterer Grund für die Verwendung einer Render-Funktion ist, dass Sie beim Server-Rendering, insbesondere beim React-Router, manchmal das Ergebnis des Aufrufs von ReactDOMServer zurückgeben müssen.renderToString(Element). Sie können dies tun, indem Sie ein Objekt mit der folgenden Form zurückgeben: { renderedHtml, redirectLocation, error } . Stellen Sie sicher, dass Sie diese Funktion mit react_component_hash .

Wenn Sie beim Server-Rendering mehrere HTML-Zeichenfolgen aus einer Renderfunktion zurückgeben möchten, können Sie ein Objekt aus Ihrer Renderfunktion mit einer einzigen Eigenschaft der obersten Ebene von renderedHtml . Platzieren Sie in diesem Objekt einen Schlüssel mit dem Namen componentHtml zusammen mit allen anderen benötigten Schlüsseln. Ein Beispielszenario hierfür ist, wenn Sie Nebeneffektbibliotheken wie React Helmet verwenden. Ihr Ruby-Code erhält dieses Objekt als Hash, der die Schlüssel componentHtml und alle anderen benutzerdefinierten Schlüssel enthält, die Sie hinzugefügt haben:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

Einzelheiten zur Verwendung von react_component_hash mit react-helmet finden Sie in unserer react-helmet-Dokumentation.

Fehlerbehandlung

• Alle Fehler von ReactOnRails sind vom Typ ReactOnRails::Error .
• Prerendering-Fehler (Server-Rendering) Holen Sie sich Kontextinformationen für HoneyBadger und Sentry, um das Debuggen zu vereinfachen.

I18n

React on Rails bietet eine Option für die automatische Konvertierung von Rails *.yml Locale-Dateien in *.json oder `.js.Eine Zusammenfassung des Hinzufügens von I18n finden Sie unter So fügen Sie I18n hinzu.

Mehr Details

Durchsuchen Sie die Links im Inhaltsverzeichnis der Zusammenfassung

Hier sind einige sehr empfehlenswerte nächste Artikel zum Lesen:

1. Wie React on Rails funktioniert
2. Webpack-Konfiguration
3. View Helpers API
4. Caching und Leistung: React on Rails Pro.
5. Bereitstellung.

Support

Klicken Sie hier, um React + Rails Slack beizutreten.

Community-Ressourcen

Bitte klicken Sie auf abonnieren, um mit Justin Gordon und ShakaCode in Kontakt zu bleiben. Ich beabsichtige, Ankündigungen zu neuen Versionen von React on Rails und unseren neuesten Blog-Artikeln und Tutorials zu senden.

• Slack Room: Kontaktieren Sie uns für eine Einladung zum ShakaCode Slack Room! Lassen Sie uns wissen, wenn Sie einen Beitrag leisten möchten.
• forum.shakacode.com : Posten Sie Ihre Fragen
• @railsonmaui auf Twitter
• Ein Live-Open-Source-Beispiel für dieses Juwel finden Sie unter www.reactrails.com .
• Siehe Projekte mit und LOB für React on Rails. Bitte reichen Sie Ihre ein! Bitte bearbeiten Sie entweder Seite oder mailen Sie uns und wir werden Ihre Informationen hinzufügen. Wir lieben auch Stars, da es uns hilft, neue Benutzer und Mitwirkende zu gewinnen.
• Siehe NEWS.md für mehr Notizen im Laufe der Zeit.

Beitragen

Fehlerberichte und Pull-Anfragen sind willkommen. Siehe Beitragen, um loszulegen, und die Liste der gewünschten Probleme.

React on Rails Pro

Unterstützen Sie die Entwicklung von React on Rails Pro, indem Sie Github-Sponsor werden und diese Vorteile nutzen.

React on Rails Pro enthält das Rendern von Knotenservern, Fragment-Caching, Code-Splitting und andere Leistungsverbesserungen für React on Rails. Eine Fallstudie finden Sie im Artikel HVMNS 90% ige Reduzierung der Serverantwortzeit von React on Rails Pro. Das Wiki enthält weitere Details.

Der React on Rails Pro Support Plan kann helfen!

• Optimierung Ihres Webpack-Setups auf das neueste Webpack für React on Rails einschließlich Code-Splitting mit ladbaren Komponenten.
• Aktualisieren Sie Ihre App, um das aktuelle rails/webpacker Setup zu verwenden, das die Asset-Pipeline der Kettenräder überspringt.
• Bessere Leistung auf Client- und Serverseite.
• Best Practices basierend auf über 6 Jahren Erfahrung mit React on Rails in vielen Produktionsprojekten.
• Verwenden von Reason mit (oder ohne) React on Rails.

ShakaCode kann Ihnen auch bei Ihren individuellen Softwareentwicklungsanforderungen helfen. Wir sind spezialisiert auf Marktplatz- und E-Commerce-Anwendungen, die sowohl Rails als auch React verwenden. Weil wir besitzen HiChee.com , wir können diesen Code für Ihre App nutzen!

Bitte mailen Sie Justin Gordon [email protected] , der Betreuer von React on Rails, für weitere Informationen.

Pro: Fragment-Caching

Fragment-Caching ist eine Funktion von React on Rails Pro. Fragment-Caching ist ein enormer Leistungsverstärker für Ihre Apps. Verwenden Sie die cached_react_component und cached_react_component_hash. Die API ist die gleiche wie react_component und react_component_hash, aber für 2 Unterschiede:

1. Die cache_key nimmt die gleichen Parameter wie jeder Rails cache view helper.
2. Die Requisiten werden über einen Block übergeben, so dass die Auswertung der Requisiten nur erfolgt, wenn der Cache beschädigt ist. Angenommen, Sie setzen Ihre Props-Berechnung in eine Methode namens some_slow_method_that_returns_props:

<%= cached_react_component("App", cache_key: , prerender: true) do some_slow_method_that_returns_propsend %>

Ein solches Fragment-Caching spart CPU-Arbeit für Ihren Webserver und reduziert die Anforderungszeit erheblich. Die Evaluierungskosten von:

1. Datenbankaufrufen zur Berechnung der Requisiten werden vollständig übersprungen.
2. Serialisierung der Props-Werte Hash in eine JSON-Zeichenfolge zur Auswertung von JavaScript zum Server-Rendern.
3. Kosten im Zusammenhang mit der Auswertung von JavaScript aus Ihrem Ruby-Code.
4. Erstellen der HTML-Zeichenfolge, die die Requisiten und den vom Server gerenderten JavaScript-Code enthält.

Hinweis: Auch ohne Server-Rendering (ohne Schritt 3 oben) ist das Fragment-Caching immer noch effektiv.

Pro: Integration mit Node.js für Server-Rendering

Standard-Server-Rendering wird von ExecJS durchgeführt. Wenn Sie einen Knoten verwenden möchten.js-Server für eine bessere Leistung Server-Rendering, E-Mail [email protected] . ShakaCode hat einen Premium-Knoten-Rendering-Server erstellt, der Teil von React on Rails Pro ist.

Testimonials für ShakaCode

HVMN Testimonial, von Paul Benigeri, Oktober 12, 2018

Der Preis, den wir für die Beratung + die React on Rails Pro-Lizenz bezahlt haben, wurde bereits einige Male allein aus den Hosting-Gebühren zurückgezahlt. Der gesamte Prozess war super einfach und unser Kernteam konnte sich während dieses Sprints auf die neue Funktion konzentrieren.

ResortPass Testimonial, von Leora Juster, 10. Dezember 2018

Justin und sein Team haben uns maßgeblich dabei unterstützt, Designgrundlagen und Standards für unseren Übergang zu einer React on Rails-Anwendung festzulegen. Nur drei Monate Arbeit mit dem Team von Shaka Code und wir haben eine Hauptseite unserer serverseitigen Rendering-Anwendung mit exponentiell verbesserten Geschwindigkeiten.

Von Joel Hooks, Mitbegründer, Chief Nerd bei egghead.io , 30. Januar 2017:

Weitere Testimonials finden Sie unter Live-Projekte und Kudos.

Unterstützer

Die folgenden Unternehmen unterstützen dieses Open-Source-Projekt und ShakaCode verwendet ihre Produkte! Justin schreibt React on Rails auf RubyMine. Wir verwenden Scout, um die Live-Performance von HiChee.com , Rails AutoScale, um die Dynos von HiChee zu skalieren, BrowserStack, um Probleme mit Oddball-Browsern zu lösen.

Clubhouse

Ich habe gerade die Entwicklung von ShakaCode von Trello nach ClubHouse verschoben. Wir werden dies mit all unseren Projekten tun. Wenn Sie ClubHouse ausprobieren und über die 14-tägige Testphase hinaus 2 Monate kostenlos erhalten möchten, klicken Sie hier, um den Empfehlungscode von ShakaCode zu verwenden. Wir nehmen an ihrem fantastischen dreiseitigen Empfehlungsprogramm teil, über das Sie hier lesen können. Mit unserem Empfehlungscode unterstützen Sie ShakaCode und damit React on Rails!

Wenn Sie React on Rails unterstützen und Ihr Unternehmen hier gelistet haben möchten, nehmen Sie Kontakt mit uns auf.

Aloha und die besten Wünsche von Justin und dem ShakaCode Team!

Arbeiten Sie mit uns