Kann ein Thema in React erstellt werden?


8

Bei der Suche in Google und im Archiv der Websites unter der Abfrage Reacthabe ich einige interessante Fragen gefunden:

und das lesen, das theme development documentationbesagt:

Ein WordPress-Theme besteht mindestens aus zwei Dateien:

  • style.css
  • index.php

Also im Abschnitt Reagieren, wenn index.htmldurch ersetzt index.phpund syle.cssauf der Hauptebene mit dem Stylesheet-Header platziert wurde. Gibt es einen Grund, warum das Frontend der Website nicht funktioniert?

Die React-App würde die API aufrufen, sodass ich nicht sehe, was das Problem wäre, wenn ich anrufen würde http://foobar.com/wp-json/wp/v2/posts/. Ich würde ein PNG für das Thema hinzufügen, aber laut Recherche habe ich keine bessere Alternative gefunden und versuche, eine WP-Instanz in einer Unterdomäne und eine React-Site in der Hauptdomäne zu verhindern. Gibt es irgendetwas, das Probleme in einem React-WordPress-Theme verursachen würde?


Antworten:


7

Kann ein Thema in React erstellt werden?

Sie können Reagieren in einem Thema verwenden. Ja, wenn Ihr Thema nur die eine Vorlage hat und sich auf JS verlässt, um das gesamte Frontend zu rendern und zu navigieren, Daten abzurufen, dann sehe ich nicht, wie es anders ist, wenn Sie es verwenden oder nicht Verwenden Sie Reagieren

Gibt es einen Grund, warum das Frontend der Website nicht funktioniert?

Sie müssten verschiedene URLs berücksichtigen und Daten in Ihre Reaktions-App laden, aber zu diesem Zeitpunkt handelt es sich um ein Reaktionsproblem, nicht so sehr um ein WP-Problem.

Die React-App ruft die API auf, sodass ich nicht sehe, wo das Problem liegt, wenn ich http://foobar.com/wp-json/wp/v2/posts/ anrufe.

Kein Problem hier

Die einzige Sorge, die ich habe, ist, dass Sie das Routing selbst verwalten müssen, wenn Sie in der Anwendung herumklicken, und sicherstellen müssen, dass beim Besuch von etwas, das beim ersten Laden nicht die Startseite ist, der richtige Inhalt geladen wird. Dies ist jedoch ein Problem mit dem React Router (vorausgesetzt, dies ist die Bibliothek, die Sie für das Routing verwenden).

WP-Instanz in einer Unterdomäne und eine React-Site in der Hauptdomäne.

Das klingt nach einer großartigen Möglichkeit, Dinge unnötig zu komplizieren. Lassen Sie das Thema einfach der React-App dienen. Das Laden von Ressourcen aus einem Thema heraus ist das gleiche Problem, wenn es sich um React oder jQuery oder Backbone handelt und der Browser sie auf dieselbe Weise lädt. Sagen Sie Ihrem JS einfach, wo sich die Themen-URL befindet.

Gibt es irgendetwas, das Probleme in einem React-WordPress-Theme verursachen würde?

Dies ist eine äußerst offene Frage, die davon abhängt, was Sie tun möchten.

Ehrlich gesagt klingt es so, als ob Sie nach Sicherheit suchen. Denken Sie daran, React ist Javascript. Sie können Javascript in Themen verwenden und die REST-API aus Javascript in einem Thema aufrufen. Es spielt keine Rolle, welches UI-Framework diesen Code antreibt. Wenn es sich um React, Vue, jQuery, Vanilla JS oder Angular handelt, ist alles JS.

Wenn Sie das Laden von Posts und das Rendern von Posts in Ihrem Javascript übernehmen möchten, können Sie dies tun. Wenn Sie als Mittel dafür Reagieren wählen, liegt das bei Ihnen.

Es gibt jedoch einige offensichtliche Dinge, die Sie tun müssen:

Denken Sie daran, dass Sie anrufen möchten wp_footerund wp_head, damit Sie ein header.phpund benötigen footer.php, auch ein, functions.phpdamit Sie Ihre JS und Stile in die Warteschlange stellen können.

Nichts davon ist reaktionsspezifisch, jedes Thema sollte das tun. Möglicherweise möchten Sie auch das WP-API-Skript in die Warteschlange stellen, damit die REST-API-URL übergeben wird. Auch dies ist nicht spezifisch für eine React-Anwendung.

Vor allem aber gibt es kein React-Thema. Es gibt Themen, die zufällig React verwenden. Es ist leicht, sich etwas anderes vorzustellen, aber am Ende des Tages ist es wirklich nur JS in einem eher leer aussehenden Thema


Ich denke, mein Problem ist die Wartung. Wenn ich das alles unter einer Domain zu tun, wie Sie bereits erwähnt, werde ich auch schließen footer.php, header.php, functions.phpund index.php. Wenn ich das Sub- und Main-Setup mache, ist es einfach, aber ich hasse die Idee, nicht alles unter einer Domain zu haben.
DᴀʀᴛʜVᴀᴅᴇʀ

Laden Sie einfach Ihren Reagieren Code in functions.phpüber enqueue und haben den Eintrittspunkt in index.phpund eine minimale footer.phpund header.phpum sicherzustellen , dass die richtigen Haken sind gefeuert
Tom J Nowell

In diesem Bereich bin ich mir auch nicht sicher, wie ich es machen soll.
DᴀʀᴛʜVᴀᴅᴇʀ

4
header.php: <html><head><?php wp_head(); ?></head><body>usw. Keiner dieser Schritte ist React-Theme-Schritte, sondern Theme-Grundlagen 101. Erstellen Sie einfach ein minimales Theme ohne Styling oder Inhalt und platzieren Sie eine React-App in der Mitte
Tom J Nowell
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.