React JS für WordPress-Benutzer: Eine grundlegende Einführung

Seit über 15 Jahren ist WordPress die beliebteste und umfassendste CMS-Lösung, mit der Sie alles von einem einseitigen Portfolio bis hin zu einer vollwertigen E-Commerce-Plattform erstellen können. WordPress verwendet PHP für seine gesamte Backend-Infrastruktur wie Updates, APIs, Authentifizierung, DB-Schicht und den Großteil des Frontends. Wie andere gängige Frameworks musste sich auch WordPress in letzter Zeit weiterentwickeln.

Angesichts des steigenden Potenzials und der Leistungsfähigkeit von JavaScript-Anwendungen für das Web sowie für Desktop- und native mobile Anwendungen versucht die WP REST API, die Lücke zwischen dem Erbe des PHP-Kerns von WordPress und dem Aufkommen von JavaScript zu schließen. Ich glaube, dass dies aus zwei Gründen ein großer Schritt für WordPress ist:

1. Bestehende WP-Websites können React/Vue oder eine andere Frontend-Bibliothek verwenden, um ein besseres UI-Erlebnis zu schaffen.
2. Umgekehrt erhalten Webentwickler ein Headless-CMS nach Industriestandard, das sich problemlos in den Stack ihrer Wahl integrieren lässt.

Das ist eine Win-Win-Situation für alle. In diesem Artikel werden wir unsere Energie darauf konzentrieren, ein React-Frontend für das WordPress-Backend zu erstellen. Aber werfen wir zunächst einen Blick auf die WordPress REST API.

Grundlagen der WordPress-REST-API

Die Entwicklung der WP REST API begann vor einigen Jahren und war zunächst als eigenständiges Feature-Plugin konzipiert. WordPress v4.4 mit dem Codenamen 'Clifford' führte die eigentliche Infrastruktur der REST-API in den Kern von WordPress ein. Die eigentlichen Endpunkte tauchten in WordPress v4.7 mit dem Codenamen 'Vaughan' auf. Mit der WP-API können Sie WordPress als Headless-CMS verwenden, das einfach zu bedienen, stabil und JSON-freundlich ist.

JSON

JSON ist das bevorzugte Format, wenn Sie WordPress in einen JavaScript-Stack integrieren möchten. JSON ähnelt XML insofern, als es uns die Möglichkeit gibt, Daten mithilfe einer sehr gut lesbaren Syntax effizient zu übertragen.

JSON ist eigentlich eine Zeichenfolge, die eine textbasierte Darstellung eines JavaScript-Objekts umfasst. Es speichert Daten in einer Reihe von Schlüssel-Wert-Paaren. Ein einfaches JSON-Beispiel für einen WP-Post kann so aussehen –

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

Eine vollständige JSON-Antwort, die die WP-REST-API verwendet, enthält normalerweise zusätzliche Informationen zum Beitrag, z. B. Metadaten. Sie haben alles, was Sie brauchen, um ein Front-End-Theme oder ein Plugin für Ihre Anwendung zu erstellen.

Die Endpunkte

WordPress-Endpunkte sind für die Öffentlichkeit sehr zugänglich. Wenn Sie die neueste Version von WordPress verwenden, müssen Sie einfach /wp-json/wp/v2 an das Ende der URL anhängen. Sie können beispielsweise unter 127.0.0.1/wp-json/wp/v2 auf die grundlegenden Endpunkte zugreifen, wenn Sie eine WordPress-Instanz in Ihrem localhost eingerichtet haben. Wenn Sie die Ausgabe verschönern möchten, können Sie eine JSON-Viewer-Erweiterung verwenden, die JSON in Ihrem Browser hübsch aussehen lässt.

Die auf Ihrem Bildschirm angezeigten Daten sind im Wesentlichen der Inhalt sowie Metainformationen im JSON-Format. Sie haben hier eine Route definiert und Ihren Browser gebeten, die Daten für Sie abzurufen.

Was verstehen wir unter Strecke? Eine Route ist eine URL, die einer bestimmten Methode zugeordnet ist. Der WordPress-Kern liest die Route durch und versteht, dass jedes '/' einen bestimmten Pfad oder Parameter darstellt, der befolgt werden muss.

Ein Endpunkt kann beispielsweise '/wp-json/wp/v2/posts/1' sein , wo Sie einen Beitrag mit einer ID anfordern, die 1 entspricht. WordPress-APIs sind nützlich, weil sie ziemlich umfangreich sind. Dies bedeutet die Möglichkeit, beliebige Daten von Ihrer Website zu übernehmen und sie in einen Endpunkt umzuwandeln. Fast alle Kernfunktionalitäten in WordPress werden unterstützt und alle kommenden Funktionen werden ebenfalls unterstützt. Hier ist eine Liste der WordPress-APIs, die zum Zeitpunkt des Schreibens dieses Tutorials unterstützt werden:

Theme-Entwickler sowie Plugin-Entwickler können benutzerdefinierte Endpunkte für ihre Anwendung erstellen. Wenn Sie alle verfügbaren Endpunkte ausprobieren möchten, können Sie eine Anwendung wie Postman herunterladen. Dadurch erhalten Sie eine GUI, die speziell zum Erkunden von APIs entwickelt wurde. Darüber hinaus können Sie API-Aufrufe direkt an Apps von Drittanbietern senden, ohne auf Plugins angewiesen zu sein.

Nehmen wir ein Beispiel. Das Hochladen von Dateien und die Pflege mehrerer Versionen davon ist eine wesentliche Voraussetzung für jede moderne Webanwendung. Dies gilt insbesondere für Mediendateien. In WordPress gibt es eine Fülle von Plugins, die dies für Sie tun können. Möglicherweise müssen Sie jedoch den WordPress-Server aufrufen, um sie zu verwenden.

Mit der WP API kann die Medienhandhabungslogik von WordPress abstrahiert werden. Sie können alle API-Aufrufe von Drittanbietern direkt vom Frontend aus durchführen, was in Bezug auf die Trennung von Bedenken großartig ist. Sie können eine Bibliothek wie Cloudinary verwenden, um die Bilder und andere Mediendateien im Handumdrehen zu bearbeiten und sie dann in die Cloud hochzuladen. Nach dem Hochladen kann die URL zum Bild im WP-Backend gespeichert werden. Die Möglichkeiten sind endlos und Sie können die Teile nach Belieben kombinieren.

Sehen wir uns nun an, wie Sie das WordPress-Backend mit React verbinden.

Erste Schritte mit React

React ist eine deklarative Frontend-Bibliothek zum Erstellen von Benutzeroberflächen und interaktiven Anwendungen im Web. Mit React können Sie kleinere unabhängige Teile von wiederverwendbarem Code erstellen, die als Komponenten bezeichnet werden. Lassen Sie uns unsere erste Komponente erstellen, indem wir ein React-Projekt erstellen.

Die beliebteste Methode zum Erstellen eines React-Projekts ist das Ausführen von create-react-app. CRA bietet eine komfortable Umgebung zum Erlernen von React und ist der beste Weg, um mit dem Erstellen einer neuen Single-Page-Anwendung zu beginnen, wenn Sie ein Anfänger sind. Es richtet Ihre Entwicklungsumgebung so ein, dass Sie die neuesten JavaScript-Funktionen wie ES6 und Webpack verwenden können. Darüber hinaus bietet create-react-app eine angenehme Entwicklererfahrung und optimiert Ihre App für die Produktion.

Sie müssen Node >= 8.x und npm >= 5.2 auf Ihrem Computer haben. Führen Sie die folgenden Befehle aus, um ein Projekt zu erstellen:


npx create-react-app wp-react-demo


Der obige Befehl erstellt eine Boilerplate-Vorlage für unsere React-Anwendung, die wir wp-react-demo genannt haben .


cd wp-react-demo
npm start


Wenn alles gut geht, sollte es die neu erstellte Anwendung auf einem Entwicklungsserver unter http://localhost:3000/ bereitstellen können.

Wenn Sie neugierig sind auf die von create-react-app generierte Verzeichnisstruktur, sieht sie so aus:

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


Das öffentliche Verzeichnis enthält alle zum Starten der Anwendung erforderlichen Assets. Das src-Verzeichnis enthält alle JavaScript-Dateien, an denen wir arbeiten werden, und Sie werden dort viel Zeit verbringen.

Wenn Sie localhost:3000 besuchen, wird die Datei index.html geladen. Wenn Sie die Datei public/index.html öffnen, gibt es dort nicht viel. Aber Sie finden diese Zeile irgendwo in der Mitte:

<div id="root"></div>

Das ist der Ausgangspunkt, an dem React den Komponentenbaum in das Stammverzeichnis der Anwendung rendert.

Was bedeutet das? Gehen Sie zum src-Verzeichnis und öffnen Sie index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React versucht ein Element mit der ID „root“ im Dokument zu finden und fügt dann das Komponente in die Wurzel. In Wirklichkeit wird die App-Komponente gerendert und von dort kommt das sich drehende React-Logo. Sie können dies überprüfen, indem Sie die Datei src/App.js öffnen .

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

So sieht eine Komponente grundsätzlich aus. Jede Komponente rendert einen Teil Ihrer Benutzeroberfläche. Sie können eine Komponente in einer anderen zusammensetzen und erhalten so eine Komponentenbaumstruktur wie diese:

Wenn Sie sich fragen, warum wir HTML in render() verwenden können, das ist die Magie von JSX. JSX ist eine Syntaxerweiterung für JavaScript und ermöglicht die Verwendung von reinem HTML in einer JavaScript-Datei. Sie können mehr darüber in den offiziellen Dokumenten lesen.

Ich lösche den gesamten HTML-Inhalt und ersetze ihn dann durch a

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';