Isomorphes JavaScript (React JS) in WordPress implementieren?

Ich stehe kurz vor einem neuen Projekt und möchte React integrieren, um mehr darüber zu erfahren. Dieses spezielle Projekt wäre perfekt, um loszulegen, da es nicht so zeitaufwendig und ziemlich geradlinig ist.

Um auf SEO aufzupassen, habe ich gesammelt, dass ich die isomorphe Route gehen muss (das ist für mich völlig neu), um JS Serverseite zu rendern. Ich habe das gefunden, aber ich kann nicht herausfinden, wie ich das in einer WordPress basierten Web App anwende? Ich habe nach Informationen über die Arbeit mit WordPress und React geforscht, aber es gibt buchstäblich keine Informationen darüber. Könnte jemand mit etwas mehr Einblick mir einige Tipps und Hinweise geben?

Wenn es einen Unterschied macht, benutze ich Bedrock mit dem brandneuen Sage- Thema.

Vielen Dank!

Solutions Collecting From Web of "Isomorphes JavaScript (React JS) in WordPress implementieren?"

Ich denke nicht, dass die Verwendung von React.js ohne Node.js (oder zumindest V8 oder Rhino usw.) als isomorph gilt, da isomorph bedeutet, dass Sie JavaScript für die Ausführung im Browser UND auf dem Server erstellen . Insbesondere bedeutet die Verwendung von WordPress, dass Sie kein isomorphes JavaScript (seine PHP-Software) machen.

Sie können WordPress als REST-API-Server verwenden und React als Client dafür verwenden. Jetzt können Sie WordPress Ihre Assets liefern lassen, aber Sie können es auch in ein Unterverzeichnis legen und es nur als eine API-Anwendung mit einem CMS-Administrationsbereich behandeln, während Sie Ihre Site-Dateien im Stammverzeichnis speichern und dabei überhaupt ein Design konfigurieren . (SEO wird hier zu einem separaten Problem, das Sie lösen müssen, abhängig von der Art der App, die Sie entwickeln.)

Du erwähnst SEO und serverseitiges Rendering, also nehme ich an, dass der Teil, den du gesammelt hast, kompiliertes HTML an Crawler liefern soll (anstelle von JS, das sie nicht verstehen), aber WordPress tut dies standardmäßig (wenn auch mit PHP) , nicht JavaScript und daher nicht isomorph), aber wenn es sich nur um SEO handelt, ist isomorph nicht unbedingt notwendig.

Sie können das WordPress-Theme ausgeben lassen, alles, was Sie für SEO benötigen (minimal) und laden Sie dann Ihre React (oder Angular oder whathaveyou), um Ihre App für Menschen mit JavaScript-fähigen Browsern zu bauen (via Bootstraping / DOM-Ersatz). Du müsstest dann zusätzlich darauf achten, dass deine Routen den WordPress-Permalinks entsprechen, was ein bisschen schwierig ist. Nicht dasselbe wie isomorph, aber gut genug.

Alternativ könntest du React.js verwenden, um das Thema nur zu “verbessern” (wie für einen Kommentarbereich), aber an diesem Punkt wärst du meistens ein PHP / WordPress-Entwickler.

Isomorphic ist wie Meteor.js, und Projekte wie diese, mit denen man spezifisch PHP meiden kann (und WordPress vermeidet). Gegenseitig wirklich exklusiv. Wenn Sie wirklich an Isomorphie interessiert sind, versuchen Sie Meteor.js und vermeiden Sie WordPress insgesamt zu verwenden.

Ich denke, wir sind nicht weit davon entfernt, dies auf eine vernünftige Art und Weise zu erreichen. Die WordPress.com-Website ist bereits in eine JavaScript-Anwendung übergegangen, die von einer REST-API mit Node.js und React unterstützt wird.

Es wird Zeit brauchen, die WordPress-coresoftware auf neuere Technologien wie diese zu übertragen, aber wenn Sie Plugins wie die WordPress-REST-API hinzufügen, sollten Sie alles haben, was Sie brauchen, um mit React in WordPress zu beginnen.

Relevante Lektüre: http://wesbos.com/wordpress-calypso-react/

Ich habe eine App in Rails erstellt, die reaction JS stark verwendet. Es ist ein gutes Projekt, an dem ich arbeiten kann, weil es mir das grundlegende Verständnis dafür gibt, wie React funktioniert. Da ich weiß, was ich über React weiß, würde ich empfehlen, es nicht mit WP zu verwenden, bis man es erst einmal verstanden hat. Ich denke, es wird deinen Lernprozess viel länger dauern lassen, wenn du es in WP hacken willst.

Die Kombination von React mit WordPress fühlt sich an wie ein Supercar Off-Road. Vielleicht zuerst lernen, den Supersportwagen zu fahren.

Hier ist ein Beispiel, dem ich gerade begegnet bin.

USTWO.com hat die Seite mit den gleichen Anforderungen erstellt und ihre Quelle ist hier verfügbar.

https://github.com/ustwo/ustwo.com-frontend

Die haben auch eine schöne Beschreibung, wie sie es einrichten. Siehe Diagramm unten.

Sehen Sie sich das Architekturdiagramm hier an

Disclaimer: Dies ist nicht wirklich eine Antwort, sondern eher ein Referenzlink, der als Kommentar hinzugefügt werden sollte, wenn ich nur genug Credits hätte 🙂

Was Sie zu tun versuchen, erreichen Sie am besten, indem Sie einen node.js-Server vor die WordPress-API stellen. Sie benötigen node.js auf dem Server, um serverseitig zu reagieren.

Hier ist ein Code, der zeigt, wie man WordPress-Inhalte als React-Komponenten auf dem Server rendert und dieselben React-Komponenten auf dem Client anbringt.

Beachten Sie, dass Sie in diesem Szenario die Vorteile von WordPress für die Erstellung von Inhalten, nicht aber für die Veröffentlichung erhalten. Sie müssen das Veröffentlichen von Grund auf als React-Komponenten implementieren.