Müssen Sie React als WordPress -Entwickler wissen?

Kernpunkte

• WordPress New Editor Gutenberg basiert auf React, einer Facebook Open Source UI -Bibliothek. Wenn Sie jedoch nicht vorhaben, benutzerdefinierte Blöcke zu erstellen, müssen Sie nicht lernen, dass Sie Gutenberg verwenden.
• React ist eine leistungsstarke und wiederverwendbare Bibliothek, mit der Entwickler hoch interaktive Benutzeroberflächen erstellen können. Sein virtuelles DOM optimiert das Rendering und verbessert die Anwendungsleistung. Dadurch wird die Benutzererfahrung verbessert, indem die Website dynamischer und reaktionsschneller wird.
• Während Lernen React für WordPress -Entwickler nicht notwendig ist, kann dies eine wertvolle Fähigkeit sein. React -Kenntnisse können dazu beitragen, fortschrittliche Gutenberg -Konzepte besser zu verstehen und Ihre Marktwettbewerbsfähigkeit zu verbessern.

Dieser Artikel wurde ursprünglich vom Drehmque Magazine veröffentlicht und wird hier mit Genehmigung reproduziert.

WordPress Version 5.0 verwendet das neue Inhaltsbearbeitungssystem Gutenberg, um den WordPress -Artikel -Editor voranzutreiben. Gutenberg ist ein "blockbasierter" Editor. Beim Erstellen von Inhalten ist alle Inhalte ein Block. Wenn Sie einen Artikel mit einem Absatz, einem Titel und zwei Absätzen haben, sind es vier Blöcke.

Gutenberg verfügt über einen Standardsatz von "Core" -Blöcken - Absätze, Titel, neueste Artikel, Bilder, Zitate und vieles mehr. Wenn Sie Gutenberg zum Erstellen von Inhalten verwenden, können Sie diese Blöcke oder benutzerdefinierten Blöcke verwenden, die vom WordPress -Plugin bereitgestellt werden, das Sie auf Ihrer Website installiert haben.

Gutenberg ist eine von JavaScript gesteuerte Schnittstelle. Insbesondere wurde es mit der Open Source User Interface Library „React“ von Facebook erstellt. In diesem Artikel werden einige der Inhalte der Verwendung von JavaScript zum Erstellen benutzerdefinierter Blöcke erläutert, die im Gutenberg -Editor verwendet werden können. Sie müssen JavaScript nicht verwenden, um Blöcke zu erstellen. Advanced Custom Fields (ACF) hat kürzlich ein System angekündigt, das mithilfe von PHP kundenspezifische Blöcke erstellt.

Was ist reagiert?

In der Front-End-Entwicklung ist das Lesen und Schreiben von DOM die niedrigste Leistungsoperation. Es ist sehr schwierig, DOMs über Browser hinweg zu verweisen und zu aktualisieren. React bietet ein besseres System, indem reaktive Programmiermodelle und virtuelle DOM -Abstraktionen implementiert werden.

ohne direkt mit dem DOM (z. B. mit jQuery.html () oder jQuery.val ()) erstellt React eine virtuelle Darstellung des DOM. Wir nennen es ein virtuelles Dom oder Vdom. VDOM ist ein JavaScript -Objekt, das eine Dom -Struktur darstellt. Vdom berechnen neu, wenn Ihr React -Code Änderungen an React vermittelt. Danach berechnet React die Unterschiede in der DOM vor und nach der Änderung. Dann aktualisiert React (Actdom oder React Native) nur den Teil des DOM, der geändert werden muss. Wie es keine Rolle spielt.

Wie kann man React in Gutenberg verwenden?

React ist eine Bibliothek zum Erstellen wiederverwendbarer Komponenten. Da sie wiederverwendbar sind, können wir Schnittstellen mit Komponenten kombinieren. Es ist ein von Facebook erstellter Open -Source -Projekt.

Alles ist ein Block. Text, Bilder, Galerien, Widgets, Kurzcodes und sogar benutzerdefinierte HTML -Snippets, egal ob es über Plugins oder auf andere Weise hinzugefügt wird. Sie müssen nur eine Schnittstelle beherrschen: die Blockschnittstelle, und dann wissen Sie, wie man alles macht. ——Gutenberg Handbuch

Blöcke sind die Grundeinheit von Gutenberg. Wir kombinieren Inhalte mit einem oder mehreren Blöcken.

Komponenten sind Atomeinheiten von React, und wir verwenden Komponenten, um React -Anwendungen zu kombinieren. Gutenberg wird mit React erstellt, so dass jeder Block aus einer oder mehreren Komponenten besteht.

Es ist wichtig zu beachten, dass ich dies in dieser Serie weiter vorstellen werde, aber Gutenberg hat eine dünne Abstraktionsschicht auf React hinzugefügt. In unserem Gutenberg -Code werden wir WP.Createelement anstelle von React.Createelement verwenden. Es funktioniert genauso, aber wenn sich die API -API von React ändert, kann WordPress entscheiden, wann diese Änderungen unterstützt und rückwärts kompatible Wrapper bereitgestellt werden oder sie nicht unterstützen können.

Dies ist ein guter Plan für die Zukunft, aber im Moment reagiert es nur.

Muss ich reagieren, um mit Gutenberg zu entwickeln?

Auf diese Weise wirft eine wichtige Frage auf, müssen Sie Reaktionen lernen? unnötig. Es sei denn, Sie möchten Ihre eigenen Blöcke erstellen, keine dieser Angelegenheiten. Wenn Sie nur Blöcke verwenden möchten, die vom Kern oder Plugin bereitgestellt werden, müssen Sie nie einen eigenen Blocktyp erstellen.

nicht erforderlich. Aber ...

Sie können einen Basisblock erstellen, ohne zu viel über JavaScript lernen zu müssen. Schauen Sie sich diesen grundlegenden Beispielblock an, der aus dem offiziellen Gutenberg -Beispiel vereinfacht wird:

( function( blocks, element ) {
    var el = element.createElement;
    blocks.registerBlockType( 'namespace/block-name', {
        title: __( 'Example: Basic', 'gutenberg-examples' ),
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the editor).'
            );
        },
        save: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the frontend).'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.element
) );

Das einzige, was wahrscheinlich neuer ist, ist die Verwendung von WP.Createelement (in diesem Beispiel ist es in der Variablen "EL"), um HTML zu erstellen. Dies ist eine ausgefallene Möglichkeit, HTML -Elemente vom Typ "P" zu erstellen. Ich werde dies im nächsten Beitrag in dieser Serie behandeln.

WordPress hat über eine Abstraktionsschicht über dem Reagieren. Sie müssen also nur einige Funktionen wissen: WP.Createelement, zum Erstellen von HTML und SetAttribute () zum Aktualisieren von Blockeigenschaften.

Ich schlage vor, Sie lesen den Abschnitt "Blöcke erstellen" des Gutenberg -Handbuchs und sehen Sie sich dann das Beispiel -Repository und den Beispielcode für den Workshop "Wordcamp Miami 2018" Gutenberg an. All diesen Code, den Sie verwenden können, ohne sich mit React zu befassen.

brauchen, wenn ...

Wenn Sie nur einfache Blöcke erstellen müssen, möglicherweise nur ein oder zwei Kontrollen, müssen Sie den Inhalt von React nicht über diese beiden Konzepte hinausgehen, die ich zuvor erwähnt habe. Wenn Sie jedoch einen komplexeren Block erstellen möchten, teilen Sie Komponenten zwischen Gutenberg und anderen React-Apps, z. B. dem WP-Admin-Einstellungsbildschirm Ihres Plug-in-Einstellungen oder der mobilen App.

React ist eine sehr interessante Bibliothek, mit der man spielen kann, und Mastering React ist eine sehr marktwürdige Fähigkeit. Noch wichtiger ist, dass Sie, sobald Sie React -Lernen lernen, leichter fortgeschrittener Gutenberg -Konzepte verstehen können - State Management, Unit -Tests und mehr.

wie man lernt, reagieren für WordPress und Gutenberg

Dies ist der Beginn einer Reihe von Artikeln über Gutenbergs React -Entwicklung. Das nächste Mal werde ich die Grundlagen reagieren und sie dann im Gutenberg -Block anwenden. Von dort aus werden wir dynamische Blöcke erstellen und dann das Staatsmanagement und die Tests betrachten.

Auf meiner Website liste ich Gutenberg -Entwicklerreden auf, die Sie möglicherweise nützlich finden. In dieser Serie werde ich das React -Konzept erklären, aber wenn Sie sich in JavaScript und React eingraben möchten, bieten Wes Bos und Zac Gordon hervorragende Kurse zu React und JavaScript, damit Sie beginnen.

häufig gestellte Fragen (FAQ) zu React und WordPress Development

Was sind die Vorteile der Verwendung von React für die WordPress -Entwicklung?

React ist eine leistungsstarke JavaScript -Bibliothek, mit der Entwickler hoch interaktive Benutzeroberflächen erstellen können. Seine komponentenbasierte Architektur ermöglicht die Wiederverwendung von Code, wodurch die Entwicklung schneller und effizienter gestaltet wird. Darüber hinaus optimiert die virtuelle DOM von React das Rendering und verbessert die Anwendungsleistung. Bei Verwendung in der WordPress -Entwicklung kann es die Benutzererfahrung verbessern, indem die Website dynamischer und reaktionsschneller werden.

Wie kann man React in WordPress integrieren?

React kann durch die WordPress -REST -API in WordPress integriert werden. Auf diese Weise können Sie Daten von Ihrer WordPress -Site abrufen und diese in Ihrer React -Anwendung verwenden. Sie können benutzerdefinierte Endpunkte in einem WordPress-Themen oder -Pleang-In erstellen und dann HTTP-Anfragen zum Abrufen oder Senden von Daten aus der React-Anwendung verwenden.

Was ist kopfloses WordPress -CMS und wie bezieht es sich mit Reaktionen?

Headless WordPress CMS ist ein WordPress-Setup, bei dem das Front-End (der Teil der Benutzerinteraktion) vom Back-End (dem Teil des Verwaltung von Inhalten) getrennt ist. Auf diese Weise können Entwickler Frontends mit jeder Technologie bauen, die sie bevorzugen, einschließlich React. Dieses Setup kann mehr Flexibilität und Leistungsverbesserungen bieten, da das Front -End separat verwaltet und unabhängig vom hinteren Ende optimiert werden kann.

Kann ich mit meinem vorhandenen WordPress -Thema reagieren?

Ja, Sie können mit Ihrem vorhandenen WordPress -Thema reagieren. Dies erfordert jedoch ein gewisses Verständnis von WordPress und React, da Sie den Code des Themas ändern müssen, um React -Komponenten zu integrieren. Alternativ können Sie Themen verwenden, die speziell für Reaktionen entwickelt wurden, z. B. kopflose WordPress -Themen.

Was ist die Frontheit und wie bezieht es sich mit WordPress und reagiert?

Frontalität ist ein kostenloses und Open -Source -Framework zum Erstellen von WordPress -Themen mit React. Es bietet eine Möglichkeit, WordPress zu vereinfachen und Verbindungen zu reagieren und viele komplexe Konfigurationen für Sie zu behandeln. Die Frontalität optimiert auch Ihr React-Thema für das serverseitige Rendering, das die Leistung und die SEO verbessert.

Was sind die Nachteile der Verwendung von React mit WordPress?

Während React die Interaktivität und Benutzererfahrung von WordPress -Websites erheblich verbessern kann, ist die Lernkurve steiler als die herkömmliche WordPress -Entwicklung. Es erfordert auch unterschiedliche Hosting -Einstellungen, insbesondere für kopflose WordPress -Sites, die Komplexität verleihen können.

Muss ich wissen, dass reagiert werden, um ein WordPress -Entwickler zu werden?

Während das Verständnis von React keine notwendige Anforderung ist, ein WordPress -Entwickler zu werden, kann dies eine wertvolle Fähigkeit sein. Während sich WordPress weiterentwickelt, werden immer mehr Teile mit React gebaut. Das Erlernen von React kann Ihnen als WordPress -Entwickler mehr Möglichkeiten eröffnen.

Wie kann man für WordPress -Entwicklung reagieren?

Es gibt viele Ressourcen zum Lernen von Reaktionen, einschließlich Online -Tutorials, Kursen und Dokumentation. Um React speziell auf WordPress -Entwicklung anzuwenden, können Sie die offizielle WordPress -REST -API -Dokumentation oder Tutorials zur Integration von React in WordPress untersuchen.

Kann ich andere JavaScript -Bibliotheken oder Frameworks mit WordPress verwenden?

Ja, während React normalerweise mit WordPress verwendet wird, insbesondere nach Einführung des Gutenberg -Editors, können Sie jede JavaScript -Bibliothek oder -Frahmen verwenden, die Sie bevorzugen. Dies schließt Vue.js, Angular und viele andere Frameworks ein.

Was ist die Zukunft von React und WordPress?

Die Zukunft von React und WordPress sieht vielversprechend aus. Mit der Einführung von Gutenberg -Redakteuren, die mit React aufgebaut wurden, und die zunehmende Beliebtheit kopfloser WordPress -Einstellungen dürfte die Verwendung von React in der WordPress -Entwicklung weiter zunehmen.

Das obige ist der detaillierte Inhalt vonMüssen Sie React als WordPress -Entwickler wissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!