Rails-Projekt mit React Rails-Verzeichnissen?

Question

Image showing my rails structure for react

Ich habe viele Reaktionskomponenten und möchte sie einfach besser organisiert halten. Also werde ich auf die Jagd gehen und einfach fragen. Ist es möglich, meine reaktiven Komponenten in Verzeichnisse einzutragen und wenn ja, wie wähle ich sie in einer Ansicht und anderen reaktiven Komponenten aus?

Ich habe schon ein paar Varianten wie die unten ohne Erfolg ausprobiert und befürchte, dass es einfach nicht möglich ist? Kann auch keine Dokumentation darüber finden.

<%= react_component('OutfitCreate.Images') %> 

Edit: Um zu klären, möchte ich klarstellen, dass ich eine typische Schienen Projektstruktur bin mit und für reagiere ich Verwendung der gem reagieren Schienen mache meine Komponenten sowie Erzeugungs zu handhaben Sie.

Edit2: zu klären, um weiter, was ich suche ein Weg, um eine Komponente reagieren, indem Verzeichnis als solches Ziel:

<%= react_component('<directory>/<classname>') %> 

wo jedes Verzeichnis wird Unterverzeichnisse von „Komponenten“.

Answer 1

Ich habe vor kurzem die react-rails gem verwendet und hatte eine gute Erfahrung. Es kümmert sich um den Zugriff auf Ihre Komponenten in Rails-Vorlagen und macht ein paar andere nette Dinge.

Um Ihre Frage gezielt zu beantworten, können Sie Ihre Komponenten in so viele Verzeichnisse einfügen, wie Sie möchten, solange Sie den Gem-Dokumenten folgen. Das Juwel bietet einen View-Helfer, mit dem Sie eine bestimmte Komponente rendern und Daten als Requisiten übergeben können (der Helfer nimmt einen Hash, der zu den Requisiten der Komponente wird).

Bearbeiten - Ich bin mir nicht sicher, ob Sie den Edelstein bereits verwenden, die von Ihnen verwendete Hilfsmethode sieht zwar so aus, aber Sie erwähnen sie nicht ausdrücklich. Vielleicht gibt es ein Problem mit der Edelstein Installation und/oder Einrichtung. Sie müssen application.js bearbeiten und auch den Generator Aufgabe auszuführen: rails g react:install

Bearbeiten - Um sicherzustellen, dass Sie Komponenten in der Komponenten-Unterverzeichnis zugreifen können, sollten Sie die folgenden Dinge tun:

* den Generator laufen: rails g react:install

* sicherstellen, dass die erzeugte components.js Datei enthält: //= require_tree ./components

* stellen Sie sicher, Ihre application.js Datei enthält:

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

Answer 2

Reagieren Komponenten globale betrachtet werden, da alle Js in einer einzigen großen Js minimierte werden Datei. Also müssen Sie einige Überlegungen anstellen.

---

Zuerst in Ihrem Ritzel-Datei (normalerweise application.js) benötigen Sie Rails zu sagen, die Komponenten dienen Reagieren Sie wollen. Der einfache Weg wäre, alle Ordner und Dateien in Komponenten Ordner zu erfordern, weil alle Ihre Komponenten dort sein werden, aber in Unterordnern organisiert.Dies wird das Hinzufügen der nächsten Zeile:

// File: app/assets/javascripts/application.js 
//= require_tree ./components 

Zweitens, wenn Sie verwenden möchten Ihre Komponente Reagieren zum Beispiel genannt Bilder, die in ../components/folder/images.js definiert werden könnten, könnten Sie einfach in Ihre Rails Ansicht verwenden der Helfer react_component('Images') wie üblich.

reagieren die Bilder Komponente, wenn es mit den Images Komponente Sie in einige definiert passen finden served Js (Aber ein vernünftiger Mensch erwarten, dass Sie die Bildkomponente definiert innerhalb einiger Images.js), weil dieser Name Bilder ist global (Remember? Eine große .js-Datei wird serviert).

Bei diesem Ansatz lädt der Client nur eine große .js-Datei mit allen React-Komponenten herunter. Schlecht für Download-Geschwindigkeit, könnte aber im Cache gespeichert werden.

Also, hier müssten Sie darauf achten, alle Komponenten mit einem anderen Namen jeweils zu benennen.

---

Nun, wenn Sie zum Beispiel haben eine Komponente Foo innerhalb ../components/folder/doesnt_matter.js und eine andere Komponente mit dem gleichen Namen Foo genannt, aber innerhalb ../components/another_folder/this_neither.js, müssen Sie Rails sagen, welche Datei möchten Sie dienen für die spezifische Ansicht, die gerendert werden soll, um Kollisionsnamenprobleme zu umgehen.

Das bedeutet, Sie könnten den Client dazu bringen, nur den benötigten js-Code (und die benötigten React-Komponenten) für die gerenderte Seite herunterzuladen. Es wird .js Dateien für jede Seite herunterladen, wobei die Cache-Möglichkeit verloren geht.

Ein Mittelweg, um dies zu tun, wäre, eine mittlere .js-Datei für alle Ansichten in der gleichen Steuerung zu dienen.

Um dies zu tun, könnten Sie Ihre js (oder jsx, oder ...) so organisieren, dass Sie einen Platz für gemeinsame Komponenten (die in zwei oder mehr Controllern verwendet werden) und einen spezifischen Ordner für jeden haben können Controller mit bestimmten React Components drin.

Als erstes müssen Sie vorher ersetzen müssen die //require_tree ./components in hinzugefügt application.js mit //require ./components/common/ für das nur die gemeinsame Reagieren Komponenten Alle Ansichten.

Zweitens in Ihrem Layout, könnten Sie zwei js Dateien dienen; ein application.js und ein #{controller_name}.js (Dies bedeutet, eine spezifische JS-Datei pro Controller).

Drittens für jeden Controller, haben Sie eine Js Datei mit dem gleichen Namen. Also, haben Sie einen Controller namens home_controller, dann müssen Sie eine nach Hause haben.js (controller_name Helfer in der Layout-Ansicht wird Schienen machen für diese Datei zu suchen) und in ihm wieder Ritzel verwenden, werden Sie bestimmte Komponenten reagieren dienen mit //require ./components/home/

Auf diese Weise werden Sie die Pflege Ihrer Organisation nehmen müssen und die Namen der React Components müssen sich von denen in .../components/common/ unterscheiden.

---

Wenn Sie spezifischere noch sein wollen, können Sie die gleiche Technik in Layout in Kombination mit controller_name und action_name Helfer verwenden. Oder Sie könnten content_for verwenden, um nach den spezifischen .js-Dateien zu fragen, die die React-Komponenten der View-Anforderungen haben.

Allerdings müssen Sie vorsichtig sein, weil ich nicht weiß, wie verrückt die Assets Pipeline gegen Sie drehen könnte. Speziell unter Verwendung content_for.

Answer 3

Ich weiß, das ist eine alte Frage, aber vielleicht hilft es jedem. Sie können es wie folgt tun:

<%= react_component "ComponentFolder/ComponentClassName" %>

Es ganz gut mit Schienen reagieren und webpacker arbeitet.