{"id":62041,"date":"2023-05-26T07:54:14","date_gmt":"2023-05-26T06:54:14","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=62041&#038;preview=true&#038;preview_id=62041"},"modified":"2023-08-24T15:10:41","modified_gmt":"2023-08-24T14:10:41","slug":"wordpress-react","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/","title":{"rendered":"Wie man eine Headless WordPress-Seite mit React.js erstellt"},"content":{"rendered":"<p>WordPress ist eines der <a href=\"https:\/\/kinqsta.com\/de\/wordpress-marktanteil\/\">beliebtesten Content-Management-Systeme (CMS)<\/a> und wird von 810 Millionen Menschen genutzt &#8211; das sind 41% des gesamten Internets! Es ist die erste Wahl f\u00fcr alle, die schnell eine Website erstellen wollen, denn es ist einfach und benutzerfreundlich, bietet eine Vielzahl von Anpassungsm\u00f6glichkeiten und verf\u00fcgt \u00fcber ein starkes \u00d6kosystem von Plugins und anderen Ressourcen.<\/p>\n<p>Eine M\u00f6glichkeit, das Beste aus WordPress herauszuholen, ist der Einsatz von Headless.<\/p>\n<p>Ein Headless CMS, auch bekannt als Headless System, ist eine Art von <a href=\"https:\/\/kinqsta.com\/de\/blog\/backend-vs-frontend\/\">Backend<\/a>-CMS, das ausschlie\u00dflich f\u00fcr die Verwaltung von Inhalten verwendet wird. So kannst du Inhalte in jedes System oder jede Website integrieren, indem du <a href=\"https:\/\/kinqsta.com\/de\/blog\/api-endpunkt\/\">einfach die APIs<\/a> des headless CMS aufrufst.<\/p>\n<p>Das Frontend muss jedoch weiterhin separat verwaltet werden. Hier kommt eine API ins Spiel.<\/p>\n<p>APIs erm\u00f6glichen es zwei oder mehr verschiedenen Anwendungen, Daten auszutauschen. In diesem Fall wird die API genutzt, um die Daten vom CMS an eine Frontend-Website zu \u00fcbertragen, was mehr Flexibilit\u00e4t und eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-langsam\/\">schnellere Leistung<\/a> erm\u00f6glicht.<\/p>\n<p>In diesem Artikel erfahren wir, was ein Headless CMS ist, warum du ein solches bauen solltest und wie du es f\u00fcr WordPress einrichtest.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Was ist Headless WordPress?<\/h2>\n<p>Eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/headless-wordpress\/\">Headless WordPress-Website<\/a> ist eine Website, die haupts\u00e4chlich <a href=\"https:\/\/kinqsta.com\/de\/blog\/warum-wordpress\/\">WordPress<\/a> als CMS (<a href=\"https:\/\/kinqsta.com\/de\/blog\/cms-software\/\">Content Management System<\/a>) verwendet und andere Frontend-Technologien wie <a href=\"https:\/\/kinqsta.com\/de\/blog\/vue-vs-react\/\">React oder Vue<\/a> f\u00fcr das Frontend einsetzt.<\/p>\n<p>Die <a href=\"https:\/\/kinqsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Bibliotheken und -Frameworks<\/a> werden verwendet, um die Inhalte der Website anzuzeigen. Ein Headless WordPress hat also ein separates Frontend und Backend, und f\u00fcr die Kommunikation wird eine API verwendet.<\/p>\n<p>Einfacher ausgedr\u00fcckt bedeutet eine Headless-Architektur, dass das CMS nur f\u00fcr die Speicherung und Verwaltung deiner Inhalte verwendet wird und sich nicht um das Frontend der Website k\u00fcmmert.<\/p>\n<p>Die Hauptaufgabe des Frontends hingegen ist es, die Inhalte anzuzeigen, und dem Frontend ist es wiederum egal, wo die Inhalte gespeichert oder verwaltet werden, solange es sie erreichen kann.<\/p>\n<p>Ein Headless WordPress hat eine bessere Leistung, da die Anfragen des Frontends von schnelleren Technologien <a href=\"https:\/\/kinqsta.com\/de\/blog\/besten-react-tutorials\/\">wie React<\/a> bearbeitet werden und nur das Backend von WordPress verwaltet wird. Die Trennung von Frontend und Backend macht es m\u00f6glich, die Komponenten unabh\u00e4ngig voneinander zu skalieren.<\/p>\n\n<h2>Vor- und Nachteile von Headless WordPress<\/h2>\n<p>Wie bei allen Entwicklungsoptionen gibt es auch bei einer Headless-WordPress-L\u00f6sung sowohl Vor- als auch Nachteile. Es ist wichtig, beides zu verstehen, bevor du eine Entscheidung triffst.<\/p>\n<h3>Vorteile von Headless WordPress<\/h3>\n<p>Zu den wichtigsten Vorteilen einer Headless-WordPress-Implementierung geh\u00f6ren die folgenden:<\/p>\n<ul>\n<li><strong>Flexibilit\u00e4t:<\/strong> Headless WordPress erm\u00f6glicht es Entwicklern, individuelle Frontend-Erlebnisse zu schaffen, ohne durch das traditionelle <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-ein-wordpress-theme\/\">WordPress-Theme-System<\/a> eingeschr\u00e4nkt zu sein. Das bedeutet, dass du einzigartige Benutzeroberfl\u00e4chen und -erlebnisse f\u00fcr spezifische Bed\u00fcrfnisse erstellen kannst.<\/li>\n<li><strong>Leistung:<\/strong> Die Trennung des Frontends vom Backend einer WordPress-Website kann dazu f\u00fchren, dass deine Website <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-langsam\/\">schneller l\u00e4dt<\/a> und leistungsf\u00e4higer wird, da der Server nur Daten \u00fcber eine API liefert und nicht bei jeder Anfrage auch <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-html\/\">HTML rendert<\/a>.<\/li>\n<li><strong>Sicherheit:<\/strong> Durch die Trennung von Frontend und Backend bietet Headless WordPress eine zus\u00e4tzliche Sicherheitsebene, indem der Zugriff auf die zugrunde liegende WordPress-Codebasis und Datenbank eingeschr\u00e4nkt wird.<\/li>\n<\/ul>\n<h3>Nachteile von Headless WordPress<\/h3>\n<p>Zu den Nachteilen von Headless WordPress k\u00f6nnen geh\u00f6ren:<\/p>\n<ul>\n<li><strong>Fehlen von Themes:<\/strong> Da Headless WordPress nicht auf <a href=\"https:\/\/kinqsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">vorgefertigte Themes<\/a> zur\u00fcckgreift, musst du deine eigenen Themes erstellen. Das kann zeitaufw\u00e4ndig sein und zus\u00e4tzliche Ressourcen erfordern.<\/li>\n<li><strong>Kosten:<\/strong> Die Entwicklung einer Headless WordPress-Website kann teurer sein als eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-website-kosten\/\">herk\u00f6mmliche WordPress-Website<\/a>, da mehr technisches Know-how und Ressourcen f\u00fcr die Einrichtung und Wartung erforderlich sind.<\/li>\n<li><strong>Plugin-Einschr\u00e4nkungen:<\/strong> Einige <a href=\"https:\/\/kinqsta.com\/de\/thema\/wordpress-plugins\/\">WordPress-Plugins<\/a> funktionieren m\u00f6glicherweise nicht mit Headless WordPress, da sie auf WordPress-Themes angewiesen sind, um richtig zu funktionieren.<\/li>\n<\/ul>\n<h2>Was ist die WordPress REST API?<\/h2>\n<p>Die <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-rest-api\/\">WordPress REST API<\/a> wird als Schnittstelle zwischen dem Backend und dem Frontend verwendet. Mit der API k\u00f6nnen Daten ganz einfach an die Website gesendet oder von ihr abgerufen werden, da die API einen kontrollierten Zugriff auf die Daten der Website hat. Sie stellt au\u00dferdem sicher, dass nur autorisierte Nutzer mit ihr interagieren k\u00f6nnen.<\/p>\n<p>Die API unterst\u00fctzt eine Vielzahl von Datenformaten, einschlie\u00dflich JSON, was die Interaktion mit dem System deutlich erleichtert.<\/p>\n<p>Die WordPress REST API ist ein leistungsf\u00e4higes Werkzeug f\u00fcr Entwickler\/innen, um Daten zu erstellen, zu aktualisieren oder zu l\u00f6schen, aber auch um eigene Funktionen f\u00fcr Websites zu erstellen oder andere Dienste zu integrieren. Au\u00dferdem gibt es Plugins, die die Funktionalit\u00e4t der API erweitern, z. B. durch die Integration zus\u00e4tzlicher Authentifizierungsmethoden.<\/p>\n<h2>Was ist React?<\/h2>\n<p><a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> ist eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript-Bibliothek<\/a> f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen. Es handelt sich um eine wiederverwendbare, komponentenbasierte Open-Source-Frontend-Bibliothek, die es Entwicklern erm\u00f6glicht, mit einer deklarativen Syntax <a href=\"https:\/\/kinqsta.com\/de\/blog\/react-komponenten-bibliotheken\/\">Komponenten f\u00fcr Benutzeroberfl\u00e4chen (UI)<\/a> zu erstellen.<\/p>\n<p>React erstellt eine interaktive Benutzeroberfl\u00e4che und rendert die Komponenten, wenn sich die Daten \u00e4ndern. Die Bibliothek ist sehr beliebt bei Entwicklern, die komplexe, wiederverwendbare Komponenten erstellen, den Status effizient verwalten und die Benutzeroberfl\u00e4che in Echtzeit aktualisieren wollen.<\/p>\n<p>Die starke Entwicklergemeinschaft von React hat eine Reihe von Tools, Bibliotheken und Ressourcen entwickelt, um die Funktionalit\u00e4t der Bibliothek zu verbessern. Viele Organisationen und Unternehmen setzen React als Technologie f\u00fcr die Entwicklung komplexer, dynamischer und schneller Webanwendungen ein.<\/p>\n<figure id=\"attachment_152469\" aria-describedby=\"caption-attachment-152469\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152469 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\" alt=\"Collage aus beliebten Firmenlogos (u. a. Facebook, Netflix, Amazon, Reddit) mit React\" width=\"1024\" height=\"621\"><\/a><figcaption id=\"caption-attachment-152469\" class=\"wp-caption-text\">Beliebte Unternehmen, die React.js einsetzen (Quelle: inexture.com)<\/figcaption><\/figure>\n<h3>Warum React verwenden?<\/h3>\n<p>React bietet viele Vorteile, die es zu einer hervorragenden Wahl f\u00fcr die Entwicklung komplexer und dynamischer Webanwendungen machen.<\/p>\n<p>Hier sind einige der wichtigsten Vorteile von React:<\/p>\n<ul>\n<li><strong>Deklarative Syntax:<\/strong> React verwendet einen deklarativen Ansatz f\u00fcr die Erstellung von UI-Komponenten, der es einfach macht, wiederverwendbare und hocheffiziente Komponenten zu erstellen.<\/li>\n<li><strong>Gro\u00dfe Community und \u00d6kosystem:<\/strong> React hat eine gro\u00dfe und aktive Gemeinschaft von Entwicklern, die eine Vielzahl von Tools und Bibliotheken entwickelt hat, um die Funktionalit\u00e4t von React zu verbessern.<\/li>\n<li><strong>Virtuelles DOM:<\/strong> React nutzt das virtuelle DOM, um die Benutzeroberfl\u00e4che in Echtzeit zu aktualisieren. Das bedeutet, dass bei Zustands\u00e4nderungen nur die Komponenten aktualisiert werden, die ge\u00e4ndert werden m\u00fcssen, und nicht die gesamte Seite neu gerendert wird.<\/li>\n<li><strong>Wiederverwendbarkeit:<\/strong> React.js bietet wiederverwendbare Komponenten, die in verschiedenen Anwendungen eingesetzt werden k\u00f6nnen, was die Entwicklungszeit und den Aufwand erheblich reduziert.<\/li>\n<\/ul>\n<h2>Wie man eine kopflose WordPress-Seite mit React erstellt<\/h2>\n<p>Jetzt ist es an der Zeit, sich die H\u00e4nde schmutzig zu machen und zu lernen, wie man eine kopflose WordPress-Website mit React erstellt und einsetzt.<\/p>\n<p>Lies weiter, um einzutauchen.<\/p>\n<h3>Voraussetzungen<\/h3>\n<p>Bevor du mit diesem Tutorial beginnst, solltest du sicherstellen, dass du Folgendes hast<\/p>\n<ul>\n<li>Ein gutes Verst\u00e4ndnis von React<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/de\/blog\/so-installierst-du-node-js\/\">Node.js v14 oder h\u00f6her auf deinem Rechner installiert<\/a> hast<\/li>\n<\/ul>\n<h3>Schritt 1. Einrichten einer WordPress-Website<\/h3>\n<p>Beginnen wir mit der Einrichtung der WordPress-Website, die als Datenquelle f\u00fcr die React-Anwendung dienen wird. Wenn du bereits eine WordPress-Website eingerichtet hast, kannst du diesen Abschnitt \u00fcberspringen; andernfalls mach einfach weiter.<\/p>\n<p>In diesem Lernprogramm verwenden wir DevKinsta, eine weit verbreitete, schnelle und zuverl\u00e4ssige lokale Entwicklungsumgebung zum Erstellen, Entwickeln und Bereitstellen von WordPress-Websites. Du kannst sie kostenlos nutzen &#8211; <a href=\"https:\/\/kinqsta.com\/de\/devkinsta\/download\/\">lade sie einfach von der offiziellen Website herunter<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/docs\/devkinsta\/devkinsta-erste-schritte\/installation\/\">installiere sie auf deinem System<\/a>.<\/p>\n<p>Sobald die Installation abgeschlossen ist, \u00f6ffnest du das DevKinsta-Dashboard und klickst auf <strong>Neue WordPress-Site<\/strong>, um eine neue WordPress-Site zu erstellen.<\/p>\n<p>F\u00fclle die erforderlichen Eingaben aus und klicke auf die Schaltfl\u00e4che <strong>Website erstellen<\/strong>, um fortzufahren.<\/p>\n<figure id=\"attachment_152847\" aria-describedby=\"caption-attachment-152847\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152847 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site-1024x681.png\" alt=\"Screenshot der DevKinsta-Seite zur Website-Erstellung mit drei Eingabefeldern und einer Schaltfl\u00e4che\" width=\"1024\" height=\"681\"><\/a><figcaption id=\"caption-attachment-152847\" class=\"wp-caption-text\">DevKinsta Seite zum Erstellen einer Website<\/figcaption><\/figure>\n<p>Das kann ein paar Minuten dauern, aber sobald deine Website erstellt ist, kannst du auf sie und ihr Admin-Panel zugreifen, indem du auf <strong>Site \u00f6ffnen<\/strong>&#8220; bzw. <strong>WP Admin<\/strong>-Optionen klickst.<\/p>\n<p>Um die JSON-API zu aktivieren, musst du als N\u00e4chstes die Permalinks deiner Website aktualisieren.<\/p>\n<p>Klicke im <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-admin\/\">WordPress Admin Dashboard<\/a> auf <strong>Einstellungen<\/strong> und dann auf <strong>Permalinks<\/strong>. W\u00e4hle die Option <strong>Postname<\/strong> und klicke auf <strong>\u00c4nderungen speichern<\/strong>.<\/p>\n<figure id=\"attachment_152850\" aria-describedby=\"caption-attachment-152850\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152850 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings-1024x651.png\" alt=\"Screenshot der Seite \"Permalinks-Einstellungen\" im WordPress-Admin-Panel mit verschiedenen Optionen zur Anpassung der Permalink-Struktur der Website.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152850\" class=\"wp-caption-text\">WordPress Permalink-Einstellungen<\/figcaption><\/figure>\n<p>Du kannst auch Tools wie <a href=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Postman<\/a> verwenden, um Anfragen an die REST-APIs von WordPress zu testen und zu senden.<\/p>\n<h3>Schritt 2: Einrichten einer React-Anwendung<\/h3>\n<p>Jetzt, wo wir unsere WordPress-Website eingerichtet haben, k\u00f6nnen wir mit der Arbeit am Frontend beginnen. Wie bereits erw\u00e4hnt, werden wir in diesem Lernprogramm React f\u00fcr das Frontend unserer Anwendung verwenden.<\/p>\n<p>Um loszulegen, f\u00fchre den folgenden Code in deinem Terminal aus, um eine React-Anwendung zu erstellen.<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest my-blog-app \ncd my-blog-app \nnpm install<\/code><\/pre>\n<p>Mit den obigen Befehlen wird eine React-Anwendung erstellt und die erforderlichen Abh\u00e4ngigkeiten werden installiert.<\/p>\n<p>Au\u00dferdem m\u00fcssen wir Axios installieren, eine JavaScript-Bibliothek f\u00fcr HTTP-Anfragen. F\u00fchre den folgenden Befehl aus, um sie zu installieren.<\/p>\n<pre><code class=\"language-bash\">npm install axios<\/code><\/pre>\n<p>Um den Entwicklungsserver zu starten, kannst du nun <code>npm run dev<\/code> im Terminal ausf\u00fchren. Der Server sollte dann deine App unter <a href=\"http:\/\/127.0.0.1:5173\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/127.0.0.1:5173<\/a> initialisieren.<\/p>\n<figure id=\"attachment_152848\" aria-describedby=\"caption-attachment-152848\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152848 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page-1024x651.png\" alt=\"Der Screenshot der Standardseite von React zeigt ein Logo von React und Vite, eine Schaltfl\u00e4che und Text.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152848\" class=\"wp-caption-text\">Vite + React Landing Page<\/figcaption><\/figure>\n<p>Als N\u00e4chstes \u00f6ffnest du dein Projekt in deinem bevorzugten <a href=\"https:\/\/kinqsta.com\/de\/blog\/besten-texteditoren\/\">Code-Editor<\/a> und l\u00f6schst alle unn\u00f6tigen Dateien, die du nicht brauchst, z. B. den Ordner <strong>assets<\/strong>, <strong>index.css<\/strong> und <strong>app.css<\/strong>.<\/p>\n<p>Du kannst auch den Code in <strong>main.jsx<\/strong> und <strong>App.jsx<\/strong> durch den folgenden Code ersetzen:<\/p>\n<pre><code class=\"language-javascript\">\/\/ main.jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom\/client'\nimport App from '.\/App'\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  &lt;React.StrictMode&gt;\n    &lt;App \/&gt;\n  &lt;\/React.StrictMode&gt;,\n)<\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ App.jsx\n\nimport React from 'react'\n\nexport default function App() {\n  return (\n    &lt;App \/&gt;\n  )\n}<\/code><\/pre>\n<h3>Schritt 3: Beitr\u00e4ge von WordPress abrufen<\/h3>\n<p>Jetzt ist es an der Zeit, die Beitr\u00e4ge von unserer WordPress-Website abzurufen.<\/p>\n<p>In der <strong>App.jsx<\/strong> f\u00fcgst du den folgenden Status hinzu und importierst &lt;code&gt;useState&lt;\/code&gt; von React:<\/p>\n<pre><code class=\"language-javascript\">const [posts, setPosts] = useState([])<\/code><\/pre>\n<p><code>useState<\/code> ist ein <a href=\"https:\/\/kinqsta.com\/de\/blog\/usecallback-react\/\">eingebauter Hook in React<\/a>, mit dem einer Komponente Zust\u00e4nde hinzugef\u00fcgt werden k\u00f6nnen, die sich auf Daten oder eine Eigenschaft beziehen.<\/p>\n<p><code>posts<\/code> wird verwendet, um die Daten aus dem Zustand zu holen, und <code>setPosts<\/code> wird verwendet, um neue Daten zu post hinzuzuf\u00fcgen. Au\u00dferdem haben wir state standardm\u00e4\u00dfig ein leeres Array \u00fcbergeben.<\/p>\n<p>Als N\u00e4chstes f\u00fcgst du den folgenden Code nach dem state ein, um die Posts von der WordPress REST API zu holen:<\/p>\n<pre><code class=\"language-javascript\">const fetchPosts = () =&gt; {\n    \/\/ Using axios to fetch the posts\n    axios\n      .get(\"http:\/\/headless-wordpress-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        \/\/ Saving the data to state\n        setPosts(res.data);\n      });\n  }\n\n\n  \/\/ Calling the function on page load\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])<\/code><\/pre>\n<p>Der obige Code f\u00fchrt die Funktion <code>fetchPosts()<\/code> beim Laden der Seite aus. Innerhalb der Funktion <code>fetchPosts()<\/code> senden wir eine <code>GET<\/code> Anfrage an die WordPress-API mit Axios, um die Beitr\u00e4ge abzurufen und dann in dem zuvor angegebenen Status zu speichern.<\/p>\n<h3>Schritt 4: Erstellen einer Blog-Komponente<\/h3>\n<p>Erstelle im Stammverzeichnis einen neuen Ordner namens <strong>components<\/strong> und erstelle darin zwei neue Dateien: <strong>blog.jsx<\/strong> und <strong>blog.css<\/strong>.<\/p>\n<p>F\u00fcge zun\u00e4chst den folgenden Code in <strong>blog.jsx<\/strong> ein:<\/p>\n<pre><code class=\"language-javascript\">import axios from \"axios\";\nimport React, { useEffect, useState } from \"react\";\nimport \".\/blog.css\";\n\nexport default function Blog({ post }) {\n  const [featuredImage, setFeaturedimage] = useState();\n\n  const getImage = () =&gt; {\n    axios\n     .get(post?._links[\"wp:featuredmedia\"][0]?.href)\n     .then((response) =&gt; {\n      setFeaturedimage(response.data.source_url);\n    });\n  };\n\n  useEffect(() =&gt; {\n    getImage();\n  }, []);\n\n  return (\n    &lt;div class=\"container\"&gt;\n      &lt;div class=\"blog-container\"&gt;\n        &lt;p className=\"blog-date\"&gt;\n          {new Date(Date.now()).toLocaleDateString(\"en-US\", {\n            day: \"numeric\",\n            month: \"long\",\n            year: \"numeric\",\n          })}\n        &lt;\/p&gt;\n        &lt;h2 className=\"blog-title\"&gt;{post.title.rendered}&lt;\/h2&gt;\n        &lt;p\n          className=\"blog-excerpt\"\n          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n        \/&gt;\n        &lt;img src={featuredImage} class=\"mask\" \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<p>Im obigen Code haben wir eine Kartenkomponente erstellt, die die Eigenschaft <code>posts<\/code> mit den Informationen \u00fcber den Blogbeitrag aus der WordPress-API \u00fcbernimmt.<\/p>\n<p>In der Funktion <code>getImage()<\/code> verwenden wir Axios, um die URL des vorgestellten Bildes abzurufen und diese Informationen dann in state zu speichern.<\/p>\n<p>Dann haben wir einen <code>useEffect<\/code> Hook hinzugef\u00fcgt, um die Funktion <code>getImage()<\/code> aufzurufen, sobald die Komponente montiert ist. Wir haben auch die R\u00fcckgabeanweisung hinzugef\u00fcgt, in der wir die Beitragsdaten, den Titel, den Auszug und das Bild wiedergeben.<\/p>\n<p>Als N\u00e4chstes f\u00fcgst du die folgenden Stile in die Datei <strong>blog.css<\/strong> ein:<\/p>\n<pre><code class=\"language-css\">@import url(\"https:\/\/fonts.googleapis.com\/css?family=Poppins\");\n\n.blog-container {\n  width: 400px;\n  height: 322px;\n  background: white;\n  border-radius: 10px;\n  box-shadow: 0px 20px 50px #d9dbdf;\n  -webkit-transition: all 0.3s ease;\n  -o-transition: all 0.3s ease;\n  transition: all 0.3s ease;\n}\n\nimg {\n  width: 400px;\n  height: 210px;\n  object-fit: cover;\n  overflow: hidden;\n  z-index: 999;\n  border-bottom-left-radius: 10px;\n  border-bottom-right-radius: 10px;\n}\n\n.blog-title {\n  margin: auto;\n  text-align: left;\n  padding-left: 22px;\n  font-family: \"Poppins\";\n  font-size: 22px;\n}\n\n.blog-date {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #c8c8c8;\n  line-height: 18px;\n  padding-top: 10px;\n}\n\n.blog-excerpt {\n  text-align: justify;\n  padding-left: 22px;\n  padding-right: 22px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  color: #8a8a8a;\n  line-height: 18px;\n  margin-bottom: 13px;\n}<\/code><\/pre>\n<p>F\u00fcge dann in der Datei App.jsx den folgenden Code in die Anweisung <code>return<\/code> ein, um die Blog-Komponente zu rendern:<\/p>\n<pre><code class=\"language-javascript\">&lt;div&gt;\n\t{posts.map((item) =&gt; (\n\t\t&lt;Blog post={item} \/&gt;\n\t))}\n&lt;\/div&gt;;<\/code><\/pre>\n<p>So sollte deine App.jsx schlie\u00dflich aussehen:<\/p>\n<pre><code class=\"language-javascript\">import React, { useEffect, useState } from 'react'\nimport axios from \"axios\"\nimport Blog from '.\/components\/Blog';\n\nexport default function App() {\n  const [posts, setPosts] = useState([]);\n\n  const fetchPosts = () =&gt; {\n    axios\n      .get(\"http:\/\/my-awesome-website.local\/wp-json\/wp\/v2\/posts\")\n      .then((res) =&gt; {\n        setPosts(res.data);\n      });\n  }\n\n  useEffect(() =&gt; {\n    fetchPosts()\n  }, [])\n\n  return (\n    &lt;div&gt;\n      {posts.map((item) =&gt; (\n        &lt;Blog\n          post={item}\n        \/&gt;\n      ))}\n    &lt;\/div&gt;\n  )\n}<\/code><\/pre>\n<p>Speichere die Datei und aktualisiere deinen Browser-Tab. Jetzt solltest du sehen, wie deine Blogbeitr\u00e4ge auf der Seite dargestellt werden.<\/p>\n<figure id=\"attachment_152849\" aria-describedby=\"caption-attachment-152849\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-152849 size-large\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_-1024x654.png\" alt=\"Screenshot der React-App mit vier Blog-Karten, von denen jede einen anderen WordPress-Beitrag anzeigt.\" width=\"1024\" height=\"654\"><\/a><figcaption id=\"caption-attachment-152849\" class=\"wp-caption-text\">Headless WordPress mit React.js<\/figcaption><\/figure>\n\n<h2>Zusammenfassung<\/h2>\n<p>Headless WordPress bietet eine gro\u00dfartige M\u00f6glichkeit, schnell performante Websites mit einer skalierbaren Architektur zu erstellen. Durch den Einsatz von React und der WordPress REST API ist es einfacher denn je, dynamische und interaktive Websites mit WordPress als Content Management System zu erstellen.<\/p>\n<p>Genauso wichtig f\u00fcr die Geschwindigkeit ist, wo du deine WordPress-Website hostest. Kinsta bietet ein blitzschnelles <a href=\"https:\/\/kinqsta.com\/de\/wordpress-hosting\/\">WordPress-Hosting<\/a> mit den besten Google C2-Maschinen in seinem <a href=\"https:\/\/kinqsta.com\/de\/blog\/cloud-plattform-fuer-entwickler\/\">Premium Tier Network<\/a> sowie eine <a href=\"https:\/\/kinqsta.com\/de\/cloudflare-integration\/\">Cloudflare-Integration<\/a>, um deine Website vor Datenverlust und b\u00f6sartigen Angriffen zu sch\u00fctzen.<\/p>\n<p><em>Hast du eine headless WordPress-Website mit React erstellt oder hast du vor, eine solche zu erstellen? Lass es uns in den Kommentaren unten wissen!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress ist eines der beliebtesten Content-Management-Systeme (CMS) und wird von 810 Millionen Menschen genutzt &#8211; das sind 41% des gesamten Internets! Es ist die erste Wahl &#8230;<\/p>\n","protected":false},"author":256,"featured_media":62042,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[465,276,28],"topic":[975,991,999],"class_list":["post-62041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-web-development","tag-webdev","topic-react","topic-web-entwicklungs-tools","topic-wordpress-entwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man eine Headless WordPress Site mit React.js erstellt - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man eine Headless WordPress-Seite mit React.js erstellt\" \/>\n<meta property=\"og:description\" content=\"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T06:54:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-24T14:10:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Suhail Kakar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suhail Kakar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\"},\"author\":{\"name\":\"Suhail Kakar\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\"},\"headline\":\"Wie man eine Headless WordPress-Seite mit React.js erstellt\",\"datePublished\":\"2023-05-26T06:54:14+00:00\",\"dateModified\":\"2023-08-24T14:10:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\"},\"wordCount\":2004,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg\",\"keywords\":[\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\",\"name\":\"Wie man eine Headless WordPress Site mit React.js erstellt - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg\",\"datePublished\":\"2023-05-26T06:54:14+00:00\",\"dateModified\":\"2023-08-24T14:10:41+00:00\",\"description\":\"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man eine Headless WordPress-Seite mit React.js erstellt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\",\"name\":\"Suhail Kakar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g\",\"caption\":\"Suhail Kakar\"},\"description\":\"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/author\/suhailkakar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man eine Headless WordPress Site mit React.js erstellt - Kinsta\u00ae","description":"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man eine Headless WordPress-Seite mit React.js erstellt","og_description":"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.","og_url":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-05-26T06:54:14+00:00","article_modified_time":"2023-08-24T14:10:41+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg","type":"image\/jpeg"}],"author":"Suhail Kakar","twitter_card":"summary_large_image","twitter_description":"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Suhail Kakar","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/"},"author":{"name":"Suhail Kakar","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b"},"headline":"Wie man eine Headless WordPress-Seite mit React.js erstellt","datePublished":"2023-05-26T06:54:14+00:00","dateModified":"2023-08-24T14:10:41+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/"},"wordCount":2004,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg","keywords":["JavaScript","web development","webdev"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/","url":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/","name":"Wie man eine Headless WordPress Site mit React.js erstellt - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg","datePublished":"2023-05-26T06:54:14+00:00","dateModified":"2023-08-24T14:10:41+00:00","description":"Entdecke, wie du eine Webseite mit React.js und Headless Wordpress erstellst. In unserer Schritt-f\u00fcr-Schritt-Anleitung erf\u00e4hrst du, wie Headless CMS funktioniert.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/wordpress-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinqsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"Wie man eine Headless WordPress-Seite mit React.js erstellt"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b","name":"Suhail Kakar","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7f0e96cbbbf132c6903e26b444dbbb8b?s=96&d=mm&r=g","caption":"Suhail Kakar"},"description":"Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.","url":"https:\/\/kinqsta.com\/de\/blog\/author\/suhailkakar\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/62041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=62041"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/62041\/revisions"}],"predecessor-version":[{"id":62442,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/62041\/revisions\/62442"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62041\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/62042"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=62041"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=62041"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=62041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}