{"id":59758,"date":"2023-05-26T03:57:40","date_gmt":"2023-05-26T06:57:40","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=59758&#038;preview=true&#038;preview_id=59758"},"modified":"2025-01-17T09:54:50","modified_gmt":"2025-01-17T12:54:50","slug":"wordpress-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/","title":{"rendered":"Como Criar um Site WordPress Headless com React.js"},"content":{"rendered":"<p>O WordPress \u00e9 um dos <a href=\"https:\/\/kinsta.com\/pt\/wordpress-quota-mercado\/\">sistemas de gerenciamento de conte\u00fado (CMS) mais populares<\/a>, usado por 810 milh\u00f5es de pessoas, ou seja, 41% de toda a Internet! \u00c9 a escolha ideal para quem deseja criar um site rapidamente porque \u00e9 simples, f\u00e1cil de usar, oferece uma ampla variedade de op\u00e7\u00f5es de personaliza\u00e7\u00e3o e tamb\u00e9m tem um forte ecossistema de plugins e outros recursos.<\/p>\n<p>Uma maneira de voc\u00ea aproveitar ao m\u00e1ximo o WordPress \u00e9 usar o headless.<\/p>\n<p>Um CMS headless, tamb\u00e9m conhecido como sistema headless, \u00e9 um tipo de CMS de <a href=\"https:\/\/kinsta.com\/pt\/blog\/backend-vs-frontend\/\">backend<\/a> usado exclusivamente para gerenciar conte\u00fado. Isso ajuda voc\u00ea a integrar o conte\u00fado a qualquer sistema ou site, bastando <a href=\"https:\/\/kinsta.com\/pt\/blog\/endpoint-api\/\">chamar as APIs<\/a> do CMS headless.<\/p>\n<p>No entanto, isso deixa o frontend para voc\u00ea gerenciar separadamente. \u00c9 a\u00ed que entra uma API.<\/p>\n<p>As APIs permitem que dois ou mais aplicativos diferentes troquem dados. Nesse caso, a API est\u00e1 sendo usada para transferir os dados do CMS para um site de frontend, proporcionando mais flexibilidade e <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-esta-lento\/\">desempenho mais r\u00e1pido<\/a>.<\/p>\n<p>Neste artigo, exploraremos o que \u00e9 um CMS headless, como criar e configurar no 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>O que \u00e9 WordPress headless?<\/h2>\n<p>Um <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless\/\">site WordPress Headless<\/a> \u00e9 um tipo de site que usa principalmente o <a href=\"https:\/\/kinsta.com\/pt\/blog\/porque-usar-o-wordpress\/\">WordPress<\/a> como um CMS, ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/softwares-cms\/\">sistema de gerenciamento de conte\u00fado<\/a>, e usa outras tecnologias de frontend, como <a href=\"https:\/\/kinsta.com\/pt\/blog\/vue-vs-react\/\">React ou Vue<\/a>, para o frontend.<\/p>\n<p>As <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">bibliotecas e frameworks JavaScript<\/a> s\u00e3o usadas para exibir o conte\u00fado do site. Portanto, um WordPress headless tem um frontend e um backend separados, e uma API \u00e9 usada para comunica\u00e7\u00e3o.<\/p>\n<p>Em termos mais simples, uma arquitetura headless significa que o CMS \u00e9 usado somente para armazenar e gerenciar seu conte\u00fado e n\u00e3o se preocupa com o frontend do site.<\/p>\n<p>Por outro lado, o trabalho principal do frontend \u00e9 exibir o conte\u00fado, e ele, por sua vez, n\u00e3o se preocupa com onde o conte\u00fado est\u00e1 armazenado ou gerenciado, desde que consiga acess\u00e1-lo.<\/p>\n<p>Um WordPress headless tem melhor desempenho, pois as solicita\u00e7\u00f5es do frontend s\u00e3o tratadas por tecnologias mais r\u00e1pidas,\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/tutoriais-e-recursos-react\/\">como o React<\/a>, e somente o backend \u00e9 gerenciado pelo WordPress. A separa\u00e7\u00e3o do frontend e do backend permite que voc\u00ea dimensione os componentes de forma independente.<\/p>\n\n<h2>Pr\u00f3s e contras do WordPress headless<\/h2>\n<p>Como acontece com todas as op\u00e7\u00f5es de desenvolvimento, h\u00e1 vantagens e desvantagens em optar por uma solu\u00e7\u00e3o WordPress headless. \u00c9 importante que voc\u00ea entenda ambos antes de tomar uma decis\u00e3o.<\/p>\n<h3>Pr\u00f3s do WordPress headless<\/h3>\n<p>Alguns dos principais benef\u00edcios de uma implementa\u00e7\u00e3o do WordPress headless s\u00e3o os seguintes:<\/p>\n<ul>\n<li><strong>Flexibilidade:<\/strong> O WordPress headless permite que os desenvolvedores criem experi\u00eancias personalizadas no frontend sem serem restringidos pelo <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/\">sistema tradicional de temas do WordPress<\/a>. Isso significa que voc\u00ea pode criar interfaces de usu\u00e1rio e experi\u00eancias exclusivas para necessidades espec\u00edficas.<\/li>\n<li><strong>Desempenho:<\/strong> Separar o frontend do backend de um site WordPress pode fazer com que seu site <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-esta-lento\/\">carregue mais r\u00e1pido<\/a> e aumente o desempenho, pois o servidor s\u00f3 fornece dados por meio de uma API, em vez de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">renderizar HTML<\/a> para cada solicita\u00e7\u00e3o.<\/li>\n<li><strong>Seguran\u00e7a:<\/strong> Ao separar o frontend do backend, o WordPress headless pode oferecer uma camada extra de seguran\u00e7a, limitando o acesso \u00e0 base de c\u00f3digo e ao banco de dados subjacentes do WordPress.<\/li>\n<\/ul>\n<h3>Contras do WordPress headless<\/h3>\n<p>As desvantagens do WordPress headless podem incluir:<\/p>\n<ul>\n<li><strong>Falta de temas:<\/strong> Como o WordPress headless n\u00e3o depende de <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">temas pr\u00e9-criados<\/a>, voc\u00ea precisar\u00e1 criar seus pr\u00f3prios temas personalizados. Isso pode consumir muito tempo e exigir recursos adicionais.<\/li>\n<li><strong>Custo:<\/strong> O desenvolvimento de um site WordPress headless pode ser mais caro do que um <a href=\"https:\/\/kinsta.com\/pt\/blog\/custo-de-website-wordpress\/\">site WordPress tradicional<\/a>, por exigir\u00a0mais conhecimento t\u00e9cnico e recursos para configurar e manter.<\/li>\n<li><strong>Limita\u00e7\u00f5es de plugins:<\/strong> Alguns <a href=\"https:\/\/kinsta.com\/pt\/topicos\/plugins-wordpress\/\">plugins de WordPress<\/a> podem n\u00e3o funcionar com o WordPress Headless, pois dependem de temas de WordPress para funcionar corretamente.<\/li>\n<\/ul>\n<h2>O que \u00e9 API REST do WordPress?<\/h2>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-rest-api\/\">API REST do WordPress<\/a> \u00e9 usada como uma interface entre o backend e o frontend. Com a API, os dados podem ser enviados ou recuperados do site com facilidade, pois a API tem acesso de controle aos dados do site. Ela tamb\u00e9m garante que somente usu\u00e1rios autorizados possam interagir com ela.<\/p>\n<p>A API pode suportar uma ampla variedade de formatos de dados, inclusive JSON, facilitando a intera\u00e7\u00e3o com o sistema.<\/p>\n<p>A API REST do WordPress \u00e9 uma ferramenta poderosa para que os desenvolvedores criem, atualizem ou excluam dados, al\u00e9m de criar funcionalidades personalizadas para sites ou integrar-se a outro servi\u00e7o. Al\u00e9m disso, h\u00e1 plugins dispon\u00edveis que ampliam a funcionalidade da API, como a integra\u00e7\u00e3o de m\u00e9todos de autentica\u00e7\u00e3o adicionais.<\/p>\n<h2>O que \u00e9 React?<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> \u00e9 uma biblioteca <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a> para criar interfaces de usu\u00e1rio. \u00c9 uma biblioteca de frontend de c\u00f3digo aberto, reutiliz\u00e1vel e baseada em componentes, que permite aos desenvolvedores criar <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/\">componentes de interface de usu\u00e1rio (UI)<\/a> usando sintaxe declarativa.<\/p>\n<p>O React cria uma interface do usu\u00e1rio (UI) interativa e renderiza os componentes quando os dados s\u00e3o alterados. A biblioteca \u00e9 muito popular entre os desenvolvedores que desejam criar componentes complexos e reutiliz\u00e1veis, gerenciar o estado com efici\u00eancia e atualizar facilmente a interface do usu\u00e1rio em tempo real.<\/p>\n<p>A forte comunidade de desenvolvedores do React criou um conjunto de ferramentas, bibliotecas e recursos para aprimorar a funcionalidade da biblioteca. Muitas organiza\u00e7\u00f5es e empresas est\u00e3o adotando o React como sua tecnologia para construir aplicativos web complexas, din\u00e2micas e de alto desempenho.<\/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=\"wp-image-152469 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Companies-Using-React-min.png\" alt=\"Empresas populares que usam React.js (fonte: inexture.com)\" width=\"1024\" height=\"621\"><\/a><figcaption id=\"caption-attachment-152469\" class=\"wp-caption-text\">Empresas populares que usam React.js (fonte: inexture.com)<\/figcaption><\/figure>\n<h3>Por que usar React?<\/h3>\n<p>O React oferece muitos benef\u00edcios que o tornam uma excelente escolha para o desenvolvimento de aplicativos web complexas e din\u00e2micas.<\/p>\n<p>Aqui est\u00e3o algumas das principais vantagens de usar o React:<\/p>\n<ul>\n<li><strong>Sintaxe declarativa:<\/strong> O React usa uma abordagem declarativa para criar componentes da interface do usu\u00e1rio, facilitando a cria\u00e7\u00e3o de componentes reutiliz\u00e1veis e altamente eficientes.<\/li>\n<li><strong>Grande comunidade e ecossistema:<\/strong> O React tem uma comunidade grande e ativa de desenvolvedores, o que levou \u00e0 cria\u00e7\u00e3o de uma ampla gama de ferramentas e bibliotecas para aprimorar sua funcionalidade.<\/li>\n<li><strong>DOM virtual:<\/strong> O React usa o DOM virtual para atualizar a interface do usu\u00e1rio em tempo real. Isso significa que, quando o estado muda, ele atualiza apenas os componentes que precisam ser alterados, em vez de renderizar novamente a p\u00e1gina inteira.<\/li>\n<li><strong>Reusabilidade:<\/strong> O React.js oferece componentes reutiliz\u00e1veis que podem ser usados em diferentes aplicativos, reduzindo significativamente o tempo e o esfor\u00e7o de desenvolvimento.<\/li>\n<\/ul>\n<h2>Como criar um site WordPress headless com React<\/h2>\n<p>Agora \u00e9 hora de colocar a m\u00e3o na massa e aprender a criar e implantar um site WordPress headless com o React.<\/p>\n<p>Continue lendo para voc\u00ea se aprofundar no assunto.<\/p>\n<h3>Pr\u00e9-requisitos<\/h3>\n<p>Antes de come\u00e7ar este tutorial, verifique se voc\u00ea tem:<\/p>\n<ul>\n<li>Uma boa compreens\u00e3o do React<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Node.js v14 ou superior instalado<\/a> em sua m\u00e1quina<\/li>\n<\/ul>\n<h3>Etapa 1: Configure um site WordPress<\/h3>\n<p>Vamos come\u00e7ar configurando o site do WordPress, pois ele servir\u00e1 como fonte de dados para o aplicativo React. Se voc\u00ea j\u00e1 tiver um site do WordPress configurado, pode pular esta se\u00e7\u00e3o; caso contr\u00e1rio, siga em frente.<\/p>\n<p>Neste tutorial, usaremos o DevKinsta, um ambiente de desenvolvimento local r\u00e1pido e confi\u00e1vel amplamente utilizado para criar, desenvolver e implantar sites do WordPress. Voc\u00ea pode us\u00e1-lo de forma totalmente gratuita &#8211; basta <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/download\/\">fazer o download no site oficial<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/docs\/devkinsta\/como-comecar-com-devkinsta\/instalacao\/\">instal\u00e1-lo em seu sistema<\/a>.<\/p>\n<p>Quando a instala\u00e7\u00e3o estiver conclu\u00edda, abra o painel do DevKinsta e clique em <strong>Novo site WordPress<\/strong> para criar um novo site WordPress.<\/p>\n<p>Preencha as informa\u00e7\u00f5es necess\u00e1rias e clique no bot\u00e3o <strong>Criar site<\/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=\"wp-image-152847 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Kinsta-Dev-New-WordPress-site-1024x681.png\" alt=\"P\u00e1gina de cria\u00e7\u00e3o do site DevKinsta\" width=\"1024\" height=\"681\"><\/a><figcaption id=\"caption-attachment-152847\" class=\"wp-caption-text\">P\u00e1gina de cria\u00e7\u00e3o do site DevKinsta<\/figcaption><\/figure>\n<p>Isso pode levar alguns minutos, mas depois que seu site for criado, voc\u00ea poder\u00e1 acessar o painel de controle clicando em <strong>Abrir site<\/strong>&#8221; ou nas op\u00e7\u00f5es <strong>WP Admin<\/strong>, respectivamente.<\/p>\n<p>Em seguida, para ativar a API JSON, voc\u00ea precisar\u00e1 atualizar os permalinks do seu site.<\/p>\n<p>No <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel de controle do WordPress<\/a>, clique em <strong>Settings<\/strong>, em seguida <strong>Permalinks<\/strong>. Escolha a op\u00e7\u00e3o <strong>Post name <\/strong>e clique em <strong>Save Changes<\/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=\"wp-image-152850 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Permalink-Settings-1024x651.png\" alt=\"Configura\u00e7\u00f5es do Permalink do WordPress\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152850\" class=\"wp-caption-text\">Configura\u00e7\u00f5es do Permalink do WordPress<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode usar ferramentas como o <a href=\"https:\/\/www.postman.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Postman<\/a> para testar e enviar facilmente solicita\u00e7\u00f5es \u00e0s APIs REST do WordPress.<\/p>\n<h3>Etapa 2: Configure um aplicativo React<\/h3>\n<p>Agora que temos nosso site WordPress configurado, podemos come\u00e7ar a trabalhar no frontend. Conforme mencionado acima, neste tutorial, usaremos o React para o frontend do nosso aplicativo.<\/p>\n<p>Para come\u00e7ar, execute o c\u00f3digo abaixo em seu terminal para criar um aplicativo 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>Os comandos acima criar\u00e3o um aplicativo React e instalar\u00e3o as depend\u00eancias necess\u00e1rias.<\/p>\n<p>Tamb\u00e9m precisamos instalar o Axios, uma biblioteca JavaScript para fazer solicita\u00e7\u00f5es HTTP. Execute o comando abaixo para instal\u00e1-la.<\/p>\n<pre><code class=\"language-bash\">npm install axios<\/code><\/pre>\n<p>Agora, para iniciar o servidor de desenvolvimento, voc\u00ea pode executar <code>npm run dev<\/code> no terminal. O servidor dever\u00e1 ent\u00e3o inicializar o aplicativo em <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=\"wp-image-152848 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Vite-React-landing-page-1024x651.png\" alt=\"P\u00e1gina inicial do Vite + React\" width=\"1024\" height=\"651\"><\/a><figcaption id=\"caption-attachment-152848\" class=\"wp-caption-text\">P\u00e1gina inicial do Vite + React<\/figcaption><\/figure>\n<p>Em seguida, abra seu projeto em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">editor de c\u00f3digo<\/a> favorito e exclua todos os arquivos desnecess\u00e1rios que voc\u00ea n\u00e3o precisa, como a pasta <strong>assets<\/strong>, <strong>index.css<\/strong> e <strong>app.css<\/strong>.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode substituir o c\u00f3digo dentro de <strong>main.jsx<\/strong> e <strong>App.jsx<\/strong> pelo c\u00f3digo a seguir:<\/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>Etapa 3: Busque artigos do WordPress<\/h3>\n<p>Agora \u00e9 hora de buscar os artigos em nosso site WordPress.<\/p>\n<p>Dentro do <strong>App.jsx<\/strong>, adicione o estado abaixo e importe &lt;code&gt;useState&lt;\/code&gt; do React:<\/p>\n<pre><code class=\"language-javascript\">const [posts, setPosts] = useState([])<\/code><\/pre>\n<p><code>useState<\/code> \u00e9 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/usecallback-react\/\">hook interno do React<\/a> usado para adicionar estados para um componente, um estado que se refere a dados ou a uma propriedade.<\/p>\n<p><code>posts<\/code> \u00e9 usado para obter os dados do estado, e <code>setPosts<\/code> \u00e9 usado para adicionar novos dados \u00e0 postagem. Tamb\u00e9m passamos uma array vazia para o estado por padr\u00e3o.<\/p>\n<p>Em seguida, adicione o seguinte c\u00f3digo ap\u00f3s o estado para buscar os artigos da API REST do 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>O c\u00f3digo acima est\u00e1 executando a fun\u00e7\u00e3o <code>fetchPosts()<\/code> no carregamento da p\u00e1gina. Dentro da fun\u00e7\u00e3o <code>fetchPosts()<\/code>, enviamos uma solicita\u00e7\u00e3o <code>GET<\/code> para a API do WordPress usando Axios para recuperar artigos e, em seguida, salv\u00e1-los no estado que declaramos anteriormente.<\/p>\n<h3>Etapa 4: Crie um componente de blog<\/h3>\n<p>Dentro do diret\u00f3rio raiz, crie uma nova pasta chamada <strong>components<\/strong> e, dentro dela, crie dois novos arquivos: <strong>blog.jsx<\/strong> e <strong>blog.css<\/strong>.<\/p>\n<p>Primeiro, adicione o seguinte c\u00f3digo ao <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>No c\u00f3digo acima, criamos um componente de cart\u00e3o que usa a propriedade <code>posts<\/code> que cont\u00e9m as informa\u00e7\u00f5es sobre a publica\u00e7\u00e3o do blog da API do WordPress.<\/p>\n<p>Na fun\u00e7\u00e3o <code>getImage()<\/code>, usamos o Axios para buscar a URL da imagem em destaque e, em seguida, salvamos essas informa\u00e7\u00f5es no estado.<\/p>\n<p>Em seguida, adicionamos um hook <code>useEffect<\/code> para chamar a fun\u00e7\u00e3o <code>getImage()<\/code> assim que o componente for montado. Tamb\u00e9m adicionamos a instru\u00e7\u00e3o de retorno na qual estamos renderizando os dados do artigo, o t\u00edtulo, o snippet e a imagem.<\/p>\n<p>Em seguida, adicione os estilos abaixo ao arquivo <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>Em seguida, no arquivo App.jsx, adicione o seguinte c\u00f3digo na instru\u00e7\u00e3o <code>return<\/code> para renderizar o componente do 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 fim, \u00e9 assim que seu App.jsx deve se parecer:<\/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>Salve o arquivo e atualize a p\u00e1gina navegador. Agora voc\u00ea poder\u00e1 ver os artigos do seu blog renderizados na 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=\"wp-image-152849 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/WordPress-Headless-w-React.js_-1024x654.png\" alt=\"WordPress headless com React.js\" width=\"1024\" height=\"654\"><\/a><figcaption id=\"caption-attachment-152849\" class=\"wp-caption-text\">WordPress headless com React.js<\/figcaption><\/figure>\n\n<h2>Resumo<\/h2>\n<p>O WordPress Headless oferece uma \u00f3tima maneira de criar sites de alto desempenho com uma arquitetura escal\u00e1vel. Com o uso do React e da API REST do WordPress, \u00e9 mais f\u00e1cil do que nunca criar sites din\u00e2micos e interativos com o WordPress como sistema de gerenciamento de conte\u00fado.<\/p>\n<p>T\u00e3o importante quanto a velocidade \u00e9 o local onde voc\u00ea hospeda seu site WordPress. A Kinsta est\u00e1 especialmente preparada para fornecer uma <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">experi\u00eancia de hospedagem WordPress<\/a> extremamente r\u00e1pida com m\u00e1quinas do Google C2 em sua <a href=\"https:\/\/kinsta.com\/pt\/blog\/plataforma-de-nuvem-para-desenvolvedores\/\">rede de n\u00edvel premium<\/a>, al\u00e9m de <a href=\"https:\/\/kinsta.com\/pt\/integracao-cloudflare\/\">integra\u00e7\u00e3o com o Cloudflare<\/a> para proteger seu site contra perda de dados e ataques maliciosos.<\/p>\n<p><em>Voc\u00ea j\u00e1 construiu &#8211; ou est\u00e1 planejando construir &#8211; um site WordPress headless com React? Comente abaixo e nos informe o que voc\u00ea acha! Queremos ouvir sua opini\u00e3o!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O WordPress \u00e9 um dos sistemas de gerenciamento de conte\u00fado (CMS) mais populares, usado por 810 milh\u00f5es de pessoas, ou seja, 41% de toda a Internet! &#8230;<\/p>\n","protected":false},"author":256,"featured_media":59759,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1018,971,1002],"class_list":["post-59758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-ferramentas-desenvolvimento-web","topic-headless-cms","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>Como Criar um Site WordPress Headless com React.js - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os 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\/pt\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Site WordPress Headless com React.js\" \/>\n<meta property=\"og:description\" content=\"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os CMS Headless.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T06:57:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os CMS Headless.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suhail Kakar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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\/pt\/blog\/wordpress-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/\"},\"author\":{\"name\":\"Suhail Kakar\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\"},\"headline\":\"Como Criar um Site WordPress Headless com React.js\",\"datePublished\":\"2023-05-26T06:57:40+00:00\",\"dateModified\":\"2025-01-17T12:54:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/\"},\"wordCount\":2149,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/\",\"name\":\"Como Criar um Site WordPress Headless com React.js - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg\",\"datePublished\":\"2023-05-26T06:57:40+00:00\",\"dateModified\":\"2025-01-17T12:54:50+00:00\",\"description\":\"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os CMS Headless.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Criar um Site WordPress Headless com React.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b\",\"name\":\"Suhail Kakar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/suhailkakar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Criar um Site WordPress Headless com React.js - Kinsta\u00ae","description":"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os 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\/pt\/blog\/wordpress-react\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar um Site WordPress Headless com React.js","og_description":"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os CMS Headless.","og_url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-05-26T06:57:40+00:00","article_modified_time":"2025-01-17T12:54:50+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg","type":"image\/jpeg"}],"author":"Suhail Kakar","twitter_card":"summary_large_image","twitter_description":"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os CMS Headless.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Suhail Kakar","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/"},"author":{"name":"Suhail Kakar","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b"},"headline":"Como Criar um Site WordPress Headless com React.js","datePublished":"2023-05-26T06:57:40+00:00","dateModified":"2025-01-17T12:54:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/"},"wordCount":2149,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/","url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/","name":"Como Criar um Site WordPress Headless com React.js - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg","datePublished":"2023-05-26T06:57:40+00:00","dateModified":"2025-01-17T12:54:50+00:00","description":"Descubra como criar um site usando React.js e o WordPress Headless com nosso guia passo a passo sobre como funcionam os CMS Headless.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-react.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/pt\/topicos\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Como Criar um Site WordPress Headless com React.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/5ba7d23f58a0b812e2a85ec38b61287b","name":"Suhail Kakar","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/suhailkakar\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=59758"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59758\/revisions"}],"predecessor-version":[{"id":59977,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59758\/revisions\/59977"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59758\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/59759"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=59758"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=59758"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=59758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}