{"id":66237,"date":"2023-05-26T08:54:39","date_gmt":"2023-05-26T06:54:39","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=66237&#038;preview=true&#038;preview_id=66237"},"modified":"2025-01-17T13:53:39","modified_gmt":"2025-01-17T12:53:39","slug":"wordpress-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/","title":{"rendered":"C\u00f3mo Crear un Sitio WordPress Headless con React.js"},"content":{"rendered":"<p>WordPress es uno de los <a href=\"https:\/\/kinsta.com\/es\/cuota-de-mercado-de-wordpress\/\">sistemas de gesti\u00f3n de contenidos (CMS) m\u00e1s populares<\/a>, utilizado por 810 millones de usuarios, \u00a1es decir, el 41% de todo Internet! Es la opci\u00f3n preferida para cualquiera que quiera crear r\u00e1pidamente un sitio web porque es sencillo, f\u00e1cil de usar, ofrece una gran variedad de opciones de personalizaci\u00f3n y, adem\u00e1s, cuenta con un s\u00f3lido ecosistema de plugins y otros recursos.<\/p>\n<p>Una forma de sacar el m\u00e1ximo partido a WordPress es utilizarlo headless.<\/p>\n<p>Un CMS headless, tambi\u00e9n conocido como sistema headless, es un tipo de CMS <a href=\"https:\/\/kinsta.com\/es\/blog\/backend-vs-frontend\/\">backend<\/a> que se utiliza \u00fanicamente para gestionar contenidos. Esto te ayuda a integrar contenidos en cualquier sistema o sitio web con s\u00f3lo <a href=\"https:\/\/kinsta.com\/es\/blog\/punto-final-de-la-api\/\">llamar a las API<\/a> del CMS headless.<\/p>\n<p>Sin embargo, esto deja el frontend para gestionar por separado. Aqu\u00ed es donde entra en juego una API.<\/p>\n<p>Las API permiten que dos o m\u00e1s aplicaciones diferentes intercambien datos. En este caso, la API se utiliza para transferir los datos del CMS a un sitio web frontend, proporcionando m\u00e1s flexibilidad y <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-lento\/\">un rendimiento m\u00e1s r\u00e1pido<\/a>.<\/p>\n<p>En este art\u00edculo, exploraremos qu\u00e9 es un CMS headless, por qu\u00e9 querr\u00edas crear uno y c\u00f3mo configurarlo para WordPress.<\/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>\u00bfQu\u00e9 Es un Sitio WordPress Headless?<\/h2>\n<p>Un <a href=\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\">sitio web WordPress headless<\/a> es un tipo de sitio que <a href=\"https:\/\/kinsta.com\/es\/blog\/por-que-usar-wordpress\/\">utiliza principalmente WordPress<\/a> como CMS, o <a href=\"https:\/\/kinsta.com\/es\/blog\/software-cms\/\">sistema de gesti\u00f3n de contenidos<\/a>, y utiliza otras tecnolog\u00edas frontales como <a href=\"https:\/\/kinsta.com\/es\/blog\/vue-vs-react\/\">React o Vue<\/a> para el frontend.<\/p>\n<p>Las <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">bibliotecas y frameworks JavaScript<\/a> se utilizan para mostrar los contenidos del sitio web. Por lo tanto, un WordPress headless tiene un frontend y un backend separados, y se utiliza una API para la comunicaci\u00f3n.<\/p>\n<p>En t\u00e9rminos m\u00e1s sencillos, una arquitectura headless significa que el CMS s\u00f3lo se utiliza para almacenar y gestionar tu contenido, y no se preocupa del frontend del sitio web.<\/p>\n<p>Por otro lado, la principal tarea del frontend es mostrar el contenido, y a \u00e9ste, a su vez, le da igual d\u00f3nde se almacene o gestione el contenido, siempre que pueda llegar a \u00e9l.<\/p>\n<p>Un WordPress headless tiene mejor rendimiento, ya que las peticiones del frontend son gestionadas por tecnolog\u00edas m\u00e1s r\u00e1pidas, <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-tutoriales-de-react\/\">como React<\/a>, y s\u00f3lo el backend es gestionado por WordPress. La separaci\u00f3n entre frontend y backend permite escalar los componentes de forma independiente.<\/p>\n\n<h2>Pros y Contras de WordPress Headless<\/h2>\n<p>Como ocurre con todas las opciones de desarrollo, optar por una soluci\u00f3n WordPress headless tiene ventajas e inconvenientes. Es importante entender ambas cosas antes de tomar una decisi\u00f3n.<\/p>\n<h3>Ventajas de WordPress Headless<\/h3>\n<p>Algunas de las principales ventajas de una implementaci\u00f3n de WordPress headless son las siguientes:<\/p>\n<ul>\n<li><strong>Flexibilidad:<\/strong> WordPress Headless permite a los desarrolladores crear experiencias frontales personalizadas sin estar limitados por el <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-tema-de-wordpress\/\">sistema tradicional de temas de WordPress<\/a>. Esto significa que puedes crear interfaces de usuario y experiencias \u00fanicas para necesidades espec\u00edficas.<\/li>\n<li><strong>Rendimiento:<\/strong> Separar el frontend del backend de un sitio WordPress puede hacer que tu sitio web <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-lento\/\">se cargue m\u00e1s r\u00e1pido<\/a> y aumente su rendimiento, ya que el servidor s\u00f3lo entrega datos a trav\u00e9s de una API, en lugar de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">renderizar tambi\u00e9n HTML<\/a> para cada solicitud.<\/li>\n<li><strong>Seguridad:<\/strong> Al separar el frontend y el backend, WordPress headless puede proporcionar una capa adicional de seguridad al limitar el acceso a la base de c\u00f3digo y a la base de datos subyacentes de WordPress.<\/li>\n<\/ul>\n<h3>Contras de WordPress headless<\/h3>\n<p>Los inconvenientes de WordPress headless pueden ser:<\/p>\n<ul>\n<li><strong>Falta de temas:<\/strong> Como WordPress headless no se basa en <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">temas predefinidos<\/a>, tendr\u00e1s que crear tus propios temas personalizados. Esto puede llevar mucho tiempo y requerir recursos adicionales.<\/li>\n<li><strong>Coste:<\/strong> Desarrollar un sitio de WordPress headless puede ser m\u00e1s caro que un <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-sitio-web-costo\/\">sitio de WordPress tradicional<\/a>, ya que requiere m\u00e1s conocimientos t\u00e9cnicos y recursos para configurarlo y mantenerlo.<\/li>\n<li><strong>Limitaciones de los plugins:<\/strong> Algunos <a href=\"https:\/\/kinsta.com\/es\/secciones\/plugins-wordpress\/\">plugins de WordPress<\/a> pueden no funcionar con WordPress headless, ya que dependen de los temas de WordPress para funcionar correctamente.<\/li>\n<\/ul>\n<h2>\u00bfQu\u00e9 es la API REST de WordPress?<\/h2>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/blog\/rest-api-de-wordpress\/\">API REST de WordPress<\/a> se utiliza como interfaz entre el backend y el frontend. Con la API, se pueden enviar o recuperar datos del sitio con facilidad, ya que la API tiene acceso de control a los datos del sitio. Tambi\u00e9n garantiza que s\u00f3lo los usuarios autorizados puedan interactuar con ella.<\/p>\n<p>La API admite una amplia gama de formatos de datos, incluido JSON, lo que facilita la interacci\u00f3n con el sistema.<\/p>\n<p>La API REST de WordPress es una potente herramienta para que los desarrolladores creen, actualicen o eliminen datos, adem\u00e1s de crear funcionalidades personalizadas para los sitios o integrarse con otro servicio. Adem\u00e1s, hay plugins disponibles que ampl\u00edan la funcionalidad de la API, como la integraci\u00f3n de m\u00e9todos de autenticaci\u00f3n adicionales.<\/p>\n<h2>\u00bfQu\u00e9 es React?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> es una biblioteca <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a> para construir interfaces de usuario. Es una biblioteca frontend de c\u00f3digo abierto, reutilizable y basada en componentes, que permite a los desarrolladores construir <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-de-componentes-react\/\">componentes de interfaz de usuario (UI)<\/a> utilizando una sintaxis declarativa.<\/p>\n<p>React crea una interfaz de usuario interactiva y muestra los componentes cuando cambian los datos. La biblioteca es muy popular entre los desarrolladores que buscan crear componentes complejos y reutilizables, gestionar el estado de forma eficiente y actualizar f\u00e1cilmente la interfaz de usuario en tiempo real.<\/p>\n<p>La s\u00f3lida comunidad de desarrolladores de React ha creado un conjunto de herramientas, bibliotecas y recursos para mejorar la funcionalidad de la biblioteca. Muchas organizaciones y empresas est\u00e1n adoptando React como tecnolog\u00eda para crear aplicaciones web complejas, din\u00e1micas y de r\u00e1pido rendimiento.<\/p>\n<figure id=\"attachment_152469\" aria-describedby=\"caption-attachment-152469\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152469\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\" alt=\"Empresas populares que utilizan React.js using React\" width=\"1024\" height=\"621\"><\/a><figcaption id=\"caption-attachment-152469\" class=\"wp-caption-text\">Empresas populares que utilizan React.js (fuente: inexture.com)<\/figcaption><\/figure>\n<h3>\u00bfPor qu\u00e9 usar React?<\/h3>\n<p>React ofrece muchas ventajas que lo convierten en una opci\u00f3n excelente para desarrollar aplicaciones web complejas y din\u00e1micas.<\/p>\n<p>Estas son algunas de las principales ventajas de usar React:<\/p>\n<ul>\n<li><strong>Sintaxis declarativa:<\/strong> React utiliza un enfoque declarativo para construir componentes de interfaz de usuario, lo que facilita la creaci\u00f3n de componentes reutilizables y altamente eficientes.<\/li>\n<li><strong>Gran comunidad y ecosistema:<\/strong> React cuenta con una amplia y activa comunidad de desarrolladores, que ha dado lugar a la creaci\u00f3n de una amplia gama de herramientas y bibliotecas para mejorar su funcionalidad.<\/li>\n<li><strong>DOM virtual:<\/strong> React utiliza el DOM virtual para actualizar la interfaz de usuario en tiempo real. Esto significa que cuando cambia el estado, s\u00f3lo actualiza los componentes que necesitan ser cambiados, en lugar de volver a renderizar toda la p\u00e1gina.<\/li>\n<li><strong>Reutilizaci\u00f3n:<\/strong> React.js ofrece componentes reutilizables que pueden usarse en diferentes aplicaciones, lo que reduce significativamente el tiempo y el esfuerzo de desarrollo.<\/li>\n<\/ul>\n<h2>C\u00f3mo Crear un Sitio WordPress Headless con React<\/h2>\n<p>Ahora es el momento de ensuciarnos las manos y aprender a crear y desplegar un sitio WordPress headless con React.<\/p>\n<p>Sigue leyendo para aprender.<\/p>\n<h3>Requisitos previos<\/h3>\n<p>Antes de empezar con este tutorial, aseg\u00farate de que tienes:<\/p>\n<ul>\n<li>Un buen conocimiento de React<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">Node.js v14 o superior instalado<\/a> en tu m\u00e1quina<\/li>\n<\/ul>\n<h3>Paso 1. Configurar un sitio web WordPress<\/h3>\n<p>Empecemos por configurar el sitio web de WordPress, ya que servir\u00e1 como fuente de datos para la aplicaci\u00f3n React. Si ya tienes configurado un sitio web WordPress, puedes saltarte esta secci\u00f3n; de lo contrario, sigue el procedimiento.<\/p>\n<p>En este tutorial, utilizaremos DevKinsta, un entorno de desarrollo local muy utilizado, r\u00e1pido y fiable, para crear, desarrollar y desplegar sitios de WordPress. Su uso es totalmente gratuito: s\u00f3lo tienes que <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/download\/\">descargarlo del sitio web oficial<\/a> e <a href=\"https:\/\/kinsta.com\/es\/docs\/devkinsta\/como-empezar-con-devkinsta\/instalacion\/\">instalarlo en tu sistema<\/a>.<\/p>\n<p>Una vez completada la instalaci\u00f3n, abre el panel de control de DevKinsta y haz clic en <strong>Nuevo sitio WordPress<\/strong> para crear un nuevo sitio WordPress.<\/p>\n<p>Rellena los datos necesarios y pulsa el bot\u00f3n <strong>Crear<\/strong> <strong>sitio<\/strong> para continuar.<\/p>\n<figure id=\"attachment_152847\" aria-describedby=\"caption-attachment-152847\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152847\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site-1024x681.png\" alt=\"P\u00e1gina de creaci\u00f3n del sitio DevKinsta\" width=\"1024\" height=\"681\"><\/a><figcaption id=\"caption-attachment-152847\" class=\"wp-caption-text\">P\u00e1gina de creaci\u00f3n del sitio DevKinsta<\/figcaption><\/figure>\n<p>Esto puede llevar unos minutos, pero una vez creado tu sitio web, puedes acceder a \u00e9l y a su panel de administraci\u00f3n pulsando en \u00ab<strong>Abrir sitio<\/strong>\u00bb o en las opciones de <strong>WP Admin<\/strong> respectivamente.<\/p>\n<p>A continuaci\u00f3n, para habilitar la API JSON, tendr\u00e1s que actualizar los permalinks de tu sitio web.<\/p>\n<p>En el <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">panel de administraci\u00f3n de WordPress<\/a>, haz clic en <strong>Ajustes<\/strong>, seguido de <strong>Enlaces permanentes<\/strong>. Elige la opci\u00f3n <strong>Nombre de la entrada<\/strong> y haz clic en <strong>Guardar cambios<\/strong>.<\/p>\n<figure id=\"attachment_152850\" aria-describedby=\"caption-attachment-152850\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152850\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings-1024x651.png\" alt=\"Configuraci\u00f3n de Permalink de WordPress.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152850\" class=\"wp-caption-text\">Configuraci\u00f3n de Permalink de WordPress<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes utilizar herramientas como <a href=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Postman<\/a> para probar y enviar f\u00e1cilmente peticiones a las API REST de WordPress.<\/p>\n<h3>Paso 2: Configurar una aplicaci\u00f3n React<\/h3>\n<p>Ahora que tenemos nuestro sitio web WordPress configurado, podemos empezar a trabajar en el frontend. Como ya hemos mencionado, en este tutorial utilizaremos React para el frontend de nuestra aplicaci\u00f3n.<\/p>\n<p>Para empezar, ejecuta el siguiente c\u00f3digo en tu terminal para crear una aplicaci\u00f3n React.<\/p>\n<pre><code class=\"language-bash\">npm create vite@latest my-blog-app \ncd my-blog-app \nnpm install<\/code><\/pre>\n<p>Los comandos anteriores crear\u00e1n una aplicaci\u00f3n React e instalar\u00e1n las dependencias necesarias.<\/p>\n<p>Tambi\u00e9n necesitamos instalar Axios, una biblioteca JavaScript para realizar peticiones HTTP. Ejecuta el siguiente comando para instalarla.<\/p>\n<pre><code class=\"language-bash\">npm install axios<\/code><\/pre>\n<p>Ahora, para iniciar el servidor de desarrollo, puedes ejecutar <code>npm run dev<\/code> en el terminal. A continuaci\u00f3n, el servidor deber\u00eda inicializar tu aplicaci\u00f3n en <a href=\"http:\/\/127.0.0.1:5173\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/127.0.0.1:5173<\/a>.<\/p>\n<figure id=\"attachment_152848\" aria-describedby=\"caption-attachment-152848\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152848\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page-1024x651.png\" alt=\"P\u00e1gina de inicio Vite + React.\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152848\" class=\"wp-caption-text\">P\u00e1gina de inicio Vite + React<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, abre tu proyecto en tu <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\">editor de c\u00f3digo<\/a> favorito y elimina todos los archivos innecesarios que no necesites, como la carpeta <strong>assets<\/strong>, <strong>index.css<\/strong> y <strong>app.css<\/strong>.<\/p>\n<p>Tambi\u00e9n puedes sustituir el c\u00f3digo dentro de <strong>main.jsx<\/strong> y <strong>App.jsx<\/strong> por el siguiente c\u00f3digo:<\/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>Paso 3: Recuperar las entradas de WordPress<\/h3>\n<p>Ahora es el momento de recuperar las entradas de nuestro sitio web WordPress.<\/p>\n<p>Dentro del <strong>App.jsx<\/strong>, a\u00f1ade el siguiente estado e importa &lt;code&gt;useState&lt;\/code&gt; de React:<\/p>\n<pre><code class=\"language-javascript\">const [posts, setPosts] = useState([])<\/code><\/pre>\n<p><code>useState<\/code> es un <a href=\"https:\/\/kinsta.com\/es\/blog\/react-usecallback\/\">gancho incorporado en React<\/a> que se utiliza para a\u00f1adir estados a un componente, un estado referido a datos o a una propiedad.<\/p>\n<p><code>posts<\/code> se utiliza para obtener los datos del estado, y <code>setPosts<\/code> se utiliza para a\u00f1adir nuevos datos al estado. Tambi\u00e9n hemos pasado un array vac\u00edo a state por defecto.<\/p>\n<p>A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo despu\u00e9s del estado para obtener las entradas de la API REST de WordPress:<\/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>El c\u00f3digo anterior ejecuta la funci\u00f3n <code>fetchPosts()<\/code> al cargar la p\u00e1gina. Dentro de la funci\u00f3n <code>fetchPosts()<\/code>, enviamos una solicitud <code>GET<\/code> a la API de WordPress utilizando Axios para recuperar las entradas y guardarlas en el estado que declaramos anteriormente.<\/p>\n<h3>Paso 4: Crear un componente de blog<\/h3>\n<p>Dentro del directorio ra\u00edz, crea una nueva carpeta llamada <strong>components<\/strong>, y dentro de ella, crea dos nuevos archivos: <strong>blog.jsx<\/strong> y <strong>blog.css<\/strong>.<\/p>\n<p>En primer lugar, a\u00f1ade el siguiente c\u00f3digo a <strong>blog.jsx<\/strong>:<\/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>En el c\u00f3digo anterior, hemos creado un componente de tarjeta que toma la propiedad <code>posts<\/code> que contiene la informaci\u00f3n sobre la entrada del blog desde la API de WordPress.<\/p>\n<p>En la funci\u00f3n <code>getImage()<\/code>, utilizamos Axios para obtener la URL de la imagen destacada y luego guardamos esa informaci\u00f3n en el estado.<\/p>\n<p>A continuaci\u00f3n, a\u00f1adimos un gancho <code>useEffect<\/code> para llamar a la funci\u00f3n <code>getImage()<\/code> una vez montado el componente. Tambi\u00e9n a\u00f1adimos la sentencia return en la que estamos renderizando los datos de la entrada, el t\u00edtulo, el extracto y la imagen.<\/p>\n<p>A continuaci\u00f3n, a\u00f1ade los siguientes estilos al archivo <strong>blog.css<\/strong>:<\/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>A continuaci\u00f3n, en el archivo App.jsx, a\u00f1ade el siguiente c\u00f3digo en la sentencia <code>return<\/code> para renderizar el componente blog:<\/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>Por \u00faltimo, este es el aspecto que debe tener tu App.jsx:<\/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>Guarda el archivo y actualiza la pesta\u00f1a de tu navegador. Ahora deber\u00edas poder ver las entradas de tu blog en la p\u00e1gina.<\/p>\n<figure id=\"attachment_152849\" aria-describedby=\"caption-attachment-152849\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-152849\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_-1024x654.png\" alt=\"WordPress headless con React.js.\" width=\"1024\" height=\"654\"><\/a><figcaption id=\"caption-attachment-152849\" class=\"wp-caption-text\">WordPress headless con React.js<\/figcaption><\/figure>\n\n<h2>Resumen<\/h2>\n<p>WordPress Headless ofrece una forma genial de crear sitios web de r\u00e1pido rendimiento con una arquitectura escalable. Con el uso de React y la API REST de WordPress, es m\u00e1s f\u00e1cil que nunca crear sitios web din\u00e1micos e interactivos con WordPress como sistema de gesti\u00f3n de contenidos.<\/p>\n<p>Igual de importante para la velocidad es d\u00f3nde alojas tu sitio WordPress. Kinsta est\u00e1 en una posici\u00f3n \u00fanica para ofrecer una <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">experiencia de alojamiento de WordPress<\/a> ultrarr\u00e1pida con m\u00e1quinas Google C2 de primera l\u00ednea en su <a href=\"https:\/\/kinsta.com\/es\/blog\/plataforma-en-la-nube-para-desarrolladores\/\">Red de Nivel Premium<\/a>, as\u00ed como una <a href=\"https:\/\/kinsta.com\/es\/integracion-cloudflare\/\">integraci\u00f3n con Cloudflare<\/a> para bloquear tu sitio contra la p\u00e9rdida de datos y los ataques maliciosos.<\/p>\n<p><em>\u00bfHas creado &#8211; o est\u00e1s pensando en crear &#8211; un sitio web WordPress headless con React? H\u00e1znoslo saber en la secci\u00f3n de comentarios m\u00e1s abajo<\/em><em>!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress es uno de los sistemas de gesti\u00f3n de contenidos (CMS) m\u00e1s populares, utilizado por 810 millones de usuarios, \u00a1es decir, el 41% de todo Internet! &#8230;<\/p>\n","protected":false},"author":256,"featured_media":66238,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[867,403,414],"topic":[1345,1290,1337,1321],"class_list":["post-66237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-web-development","tag-webdev","topic-desarrollo-wordpress","topic-headless-cms","topic-herramientas-de-desarrollo-web","topic-react"],"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>C\u00f3mo Crear un Sitio WordPress Headless con React.js - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Crear un Sitio WordPress Headless con React.js\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T06:54:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:53:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suhail Kakar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\"},\"author\":{\"name\":\"Suhail Kakar\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\"},\"headline\":\"C\u00f3mo Crear un Sitio WordPress Headless con React.js\",\"datePublished\":\"2023-05-26T06:54:39+00:00\",\"dateModified\":\"2025-01-17T12:53:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\"},\"wordCount\":2212,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg\",\"keywords\":[\"JavaScript\",\"web development\",\"webdev\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\",\"name\":\"C\u00f3mo Crear un Sitio WordPress Headless con React.js - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg\",\"datePublished\":\"2023-05-26T06:54:39+00:00\",\"dateModified\":\"2025-01-17T12:53:39+00:00\",\"description\":\"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg\",\"width\":1460,\"height\":730,\"caption\":\"C\u00f3mo Crear un Sitio WordPress Headless con React.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Crear un Sitio WordPress Headless con React.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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:\/\/kinsta.com\/es\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\",\"name\":\"Suhail Kakar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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:\/\/kinsta.com\/es\/blog\/author\/suhailkakar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Crear un Sitio WordPress Headless con React.js - Kinsta\u00ae","description":"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.","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:\/\/kinsta.com\/es\/blog\/wordpress-react\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Crear un Sitio WordPress Headless con React.js","og_description":"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.","og_url":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-05-26T06:54:39+00:00","article_modified_time":"2025-01-17T12:53:39+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg","type":"image\/jpeg"}],"author":"Suhail Kakar","twitter_card":"summary_large_image","twitter_description":"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Suhail Kakar","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/"},"author":{"name":"Suhail Kakar","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b"},"headline":"C\u00f3mo Crear un Sitio WordPress Headless con React.js","datePublished":"2023-05-26T06:54:39+00:00","dateModified":"2025-01-17T12:53:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/"},"wordCount":2212,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg","keywords":["JavaScript","web development","webdev"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/","url":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/","name":"C\u00f3mo Crear un Sitio WordPress Headless con React.js - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg","datePublished":"2023-05-26T06:54:39+00:00","dateModified":"2025-01-17T12:53:39+00:00","description":"Descubre c\u00f3mo crear un sitio web usando React.js y Wordpress Headless con nuestra gu\u00eda paso a paso sobre c\u00f3mo funcionan los CMS headless.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-react.jpg","width":1460,"height":730,"caption":"C\u00f3mo Crear un Sitio WordPress Headless con React.js"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Crear un Sitio WordPress Headless con React.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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:\/\/kinsta.com\/es\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b","name":"Suhail Kakar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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:\/\/kinsta.com\/es\/blog\/author\/suhailkakar\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=66237"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66237\/revisions"}],"predecessor-version":[{"id":66581,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66237\/revisions\/66581"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66237\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/66238"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=66237"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=66237"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=66237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}