web-dev-qa-db-de.com

Implementieren Sie isomorphes JavaScript (React JS) in Wordpress?

Ich bin dabei, mit einem neuen Projekt zu beginnen und möchte React einbinden, da ich mehr darüber erfahren möchte. Dieses spezielle Projekt ist perfekt, um anzufangen, da es nicht so zeitaufwändig und ziemlich einfach ist.

Um mich um SEO zu kümmern, habe ich festgestellt, dass ich den isomorphen Weg gehen muss (das ist für mich völlig neu), um die JS-Serverseite zu rendern. Ich habe dies gefunden, kann aber nicht herausfinden, wie ich dies in einer Wordpress-basierten Web-App anwende. Ich habe nach Informationen über die Arbeit mit Wordpress und React gegoogelt, aber es gibt buchstäblich keine Informationen darüber. Könnte mir jemand mit ein bisschen mehr Einsicht ein paar Tipps und Hinweise geben?

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

Vielen Dank!

6
INT

Ich denke nicht, dass die Verwendung von React.js ohne Node.js (oder mindestens V8 oder Rhino usw.) als isomorph gilt, da isomorph bedeutet, dass Sie JavaScript erstellen, um es im Browser UND auf dem Server auszuführen . Konkret bedeutet die Verwendung von WordPress sicherlich, dass Sie kein isomorphes Javascript (dessen PHP Software) verwenden.

Sie könnten WordPress als REST API-Server verwenden und React als Client dafür verwenden. Jetzt können Sie WordPress Ihre Assets bereitstellen lassen, aber Sie können es auch in ein Unterverzeichnis stellen und es nur als API-App mit einem CMS-Administrationsbereich behandeln, während Sie Ihre Site-Dateien im Stammverzeichnis ablegen und dabei die Konfiguration eines Themas umgehen . (SEO wird hier zu einem separaten Problem, das Sie je nach Art der App, die Sie entwickeln, lösen müssen.)

Sie erwähnen SEO und serverseitiges Rendering. Ich nehme an, Sie möchten kompiliertes HTML an Crawler senden (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 nur um SEO geht, wird isomorph nicht unbedingt benötigt.

Sie können WordPress's Theme alles ausgeben lassen, was Sie für SEO benötigen (minimal) und dann Ihre React (oder Angular oder was auch immer) laden, um Ihre App für Menschen mit JavaScript-fähigen Browsern zu erstellen (über Bootstraping/DOM-Ersatz). Sie müssten dann zusätzlich darauf achten, dass Ihre Routen mit den Permalinks von WordPress übereinstimmen, was etwas schwierig ist. Nicht das gleiche wie isomorph, aber gut genug.

Alternativ könnten Sie React.js verwenden, um nur das Thema zu "verbessern" (wie für einen Kommentarbereich), aber zu diesem Zeitpunkt wären Sie meistens ein PHP/WordPress-Entwickler.

Isomorphic ist wie Meteor.js und Projekte wie dieses, mit denen Sie PHP (und WordPress) gezielt vermeiden können. Wirklich gegenseitig aus. Wenn Sie wirklich an isomorph interessiert sind, versuchen Sie es mit Meteor.js und vermeiden Sie es, WordPress zu verwenden.

12
WraithKenny

Ich denke, wir sind nicht weit davon entfernt, dies auf vernünftige Weise zu erreichen. Die WordPress.com-Website wurde bereits verschoben auf eine JavaScript-Anwendung umgestellt, die von einer REST -API mit Node.js und React angetrieben wird.

Das Umstellen der WordPress-Kernsoftware auf neuere Technologien wie diese wird einige Zeit in Anspruch nehmen. Wenn Sie jedoch Plugins wie WordPress REST API hinzufügen, sollten Sie über alles verfügen, was Sie für den Einstieg in React in benötigen WordPress.

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

4
AlecRust

Ich habe eine App in Rails erstellt, die stark auf JS reagiert. Es ist ein gutes Projekt, an dem ich arbeiten kann, da es mir das grundlegende Verständnis dafür gibt, wie React funktioniert. Da ich weiß, was ich über React weiß, würde ich wärmstens empfehlen, es nicht mit WP zu verwenden, bis Sie es anfänglich verstanden haben. Ich denke, Ihr Lernprozess wird dadurch viel länger dauern, wenn Sie versuchen, es in WP zu hacken.

Das Kombinieren von React mit Wordpress fühlt sich an, als würde man einen Supercar im Gelände fahren. Vielleicht lernen Sie zuerst, den Supersportwagen zu fahren.

2
Yosuke

Hier ist ein Beispiel, auf das ich gerade gestoßen bin.

USTWO.com hat die Site mit den gleichen Anforderungen erstellt und ihre Quelle finden Sie hier.

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

Die haben auch eine nette Beschreibung, wie sie es einrichten. Siehe folgendes Diagramm.

 Check out the architecture diagram here 

Haftungsausschluss: Dies ist nicht wirklich eine Antwort, sondern eher ein Referenzlink, der als Kommentar hinzugefügt werden sollte, wenn ich nur genügend Credits hätte :-)

1
Raghav Tandon

Was Sie 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 reagieren zu können.

Hier ist ein Code, der zeigt, wie WordPress-Inhalte als React-Komponenten auf dem Server gerendert und dieselben React-Komponenten auf dem Client angehängt werden.

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

1
liammclennan