Laravel + ReactJS lose Komponenten in den Blattansichten. Eine gute Praxis?

Question

Folgendes ist mir unklar. Bisher sehe ich keine Reactjs-Komponenten, die in Ansichten eingebettet sind, sondern nur in Single Page Applications.

Ich frage mich, ob man Reactjs in einer Laravel-Anwendung in Kombination mit der Blade-Template-Engine verwenden könnte? Ich habe ein Laravel-Projekt und finde es gut, wie ReactJS an das DOM bindet. Aber ich brauche kein komplettes JS SPA.

Ist es also möglich, verschiedene ReactJs-Komponenten in Blade-Ansichten zu verwenden? Zum Beispiel eine React-Table-Komponente und eine Header-Message-Komponente, die auch miteinander kommunizieren können.

Answer 1

Es gibt eine package, die genau das tut.

Allerdings würde ich argumentieren, es wäre eine bessere Praxis, wenn Sie das Front-End und Back-End vollständig trennen. Sie können also Laravel verwenden, um die Daten mithilfe von REST-API-Endpunkten bereitzustellen und dann alles mithilfe einer React-App anzuzeigen.

Auf diese Weise werden sie lose gekoppelt und wenn Sie jemals eine für die andere austauschen möchten (zB React for Angular austauschen), dann wäre es viel einfacher, da Ihre API-Endpunkte überhaupt nicht geändert werden müssten .

EDIT: Einige Vorteile einer Maden CMS (aus pantheon.io):

von Verantwortung für die User Experience Verschiebung vollständig in den Browser stellt die Maden Modell eine Reihe von Vorteilen:

• Wert: zukunftssichere Ihre Website-Implementierung, können Sie Redesign der Website ohne die Umsetzung der CMS
• Sets Frontend Entwickler frei von die Konventionen und Strukturen des Backends. Headless Entwicklung beseitigt nicht nur "div-itis", es gibt Frontend-Spezialisten volle Kontrolle über die Benutzererfahrung mit ihren nativen Tools.
• Beschleunigt die Site, indem die Anzeigelogik auf die Clientseite verschoben und das Back-End optimiert wird. Eine Anwendung, die auf die Bereitstellung des Inhalts ausgerichtet ist, kann viel reaktionsschneller sein als eine Anwendung, die vollständig formatierte Antworten basierend auf komplexen Regeln erstellt.
• Erzeugt wahre interaktive Erfahrungen für Benutzer durch die Verwendung Ihrer Website zu funktionsfähigen In-Browser-Anwendungen. Das Backend wird zum System von Datensatz und "State Machine", aber Hin-und-her-Interaktion passiert Echtzeit im Browser.

Lassen Sie sagen auch Einheimischer mit einer mobilen App aufbauen wollen reagieren, die die gleiche zugrunde liegende Code-Basis verwenden würden als Web-App reagieren. Wenn Sie über ein entkoppeltes CMS verfügen, können Sie in Ihrem Back-End nur Daten bereitstellen, ohne dass Sie sich über Inhaltstypen, Antwortformate usw. Gedanken machen müssen. Tatsächlich können Sie mit React Native telefonieren Sie können die gleiche React-Codebasis für die mobile App zusammen mit der Web-App verwenden, und Sie müssten nur einige Ansichten ändern.

Es ist eine gute Möglichkeit, Ihren Code mit besserer Modularität und Trennung von Bedenken wieder zu verwenden.