{"id":32063,"date":"2023-02-08T15:51:26","date_gmt":"2023-02-08T18:51:26","guid":{"rendered":"\/tutoriais\/?p=32063"},"modified":"2023-04-20T18:08:50","modified_gmt":"2023-04-20T21:08:50","slug":"wordpress-react","status":"publish","type":"post","link":"\/br\/tutoriais\/wordpress-react","title":{"rendered":"Projetos de desenvolvimento com WordPress React: um guia completo para iniciantes"},"content":{"rendered":"

O WordPress é um poderoso Sistema de Gerenciamento de Conteúdo (CMS)<\/strong><\/a> <\/strong>que permite que você construa qualquer site na internet, desde simples blogs até complexas lojas virtuais. Para integrar o código PHP da plataforma com o JavaScript, você pode aproveitar os recursos de WP REST API<\/strong><\/a> e WordPress React<\/strong><\/a>.<\/p>

Desenvolvido pelo Facebook, o React é uma biblioteca de interface do usuário (UI) <\/strong>que utiliza uma abordagem simples e baseada em componentes para construir aplicações multiplataforma escaláveis que são fáceis de entender. De todo modo, é importante aprender a utilizar essa biblioteca corretamente para poder aproveitar ao máximo as suas funções e recursos. <\/p>

Neste guia, vamos explicar como utilizar o React com o WordPress. Também iremos discutir o que é esse framework, indicar seus benefícios e mostrar como utilizá-lo. Vamos lá!<\/p>

\"\"<\/a><\/figure>

Uma Introdução ao React<\/strong><\/h2>

Antes de começar, primeiramente precisamos responder à pergunta: “o que é React?<\/strong><\/a>”. Também conhecida como ReactJS, esta é uma das mais populares bibliotecas de JavaScript que você pode utilizar para o desenvolvimento web.<\/p>

\n
\"Site<\/figure><\/div>

Criada e mantida pelo Facebook, ela inclui uma extensa gama de fragmentos e códigos completos que podem ser utilizados para construção de componentes da UI.<\/p>

Ao contrário da crença popular, o ReactJS não é um framework JavaScript, já que ele apenas renderiza componentes da camada de visualização de uma aplicação. Sendo assim, você pode combinar o uso do ReactJS com um framework de verdade, como o  Vue.js<\/strong><\/a>, caso esteja buscando funções mais sofisticadas para seus projetos de desenvolvimento web.<\/p>

Também é importante notar que existe o ReactJS e o React Native<\/strong><\/a>. Este último é um framework JavaScript de código aberto construído a partir da biblioteca React. Você pode utilizar o React Native para criar aplicativos multiplataforma e componentes específicos para as plataformas iOS e Android.<\/p>

Funções e Recursos do React <\/strong><\/h2>

Para entender melhor os benefícios do React, é importante saber como ele funciona. Nesta seção vamos indicar alguns dos principais recursos e funções dessa biblioteca:<\/p>

JSX<\/strong><\/h3>

A principal extensão de sintaxe JavaScript usada no React é a JSX<\/strong><\/a>. Você pode utilizá-la para integrar um código HTML em objetos JavaScript e simplificar estruturas de código complexas. <\/p>

O JSX também ajuda a prevenir ataques de cross-site scripting (XSS)<\/strong><\/a>, pois dificulta ou impede que terceiros injetem códigos extras por meio de entradas de usuários (user inputs<\/em>) que não estão explicitamente escritas na aplicação.<\/p>

As etiquetas (tag<\/em>) JSX incluem um nome, filhos e atributos. <\/p>

Uma tag HTML típica de imagens se parece com isso:<\/p>

<img class=\"\" src=\"\" alt=\"\" ><\/pre>
Já uma tag JSX do mesmo tipo tem esse formato:<\/p>
<img className=\"\" src=\"\" alt=\"\" \/><\/pre>
Além disso, os valores numéricos são escritos dentro das chaves. Similar ao JavaScript, as aspas representam strings<\/em>: <\/p>
const name = 'John Doe’;\n\nconst element = <h1>Hello, {name}<\/h1>;\n\nReactDOM.render(\n\n element,\n\n document.getElementById('root')\n\n);<\/pre>
Você pode colocar qualquer expressão JavaScript<\/strong><\/a> válida dentro das chaves. Por exemplo, ela poderia ser “user.firstName” ou “formatName(user)”.<\/p>
Virtual DOM<\/strong><\/h3>
O Document Object Model<\/strong><\/a> (DOM<\/a><\/strong>) apresenta uma página da internet em uma estrutura de dados em árvore, a qual a biblioteca React armazena em sua memória. Desse modo, o React pode implementar atualizações em certas partes da estrutura em árvore ao invés de refazer sua renderização completa.<\/p>
O DOM virtual<\/strong><\/a> <\/strong>oferece a vinculação de dados unilateral (one-way). Isso faz com que os processos de manipulação e atualização dos dados sejam muito mais rápidos do que com o DOM original.<\/p>
O Document Object Model Virtual utiliza um processo conhecido como diffing<\/em>. Isso acontece quando o React gera uma nova árvore DOM virtual, compara ela com a árvore antiga e então encontra a maneira mais eficiente de aplicar alterações no DOM real\/original. Esse processo leva menos tempo e exige menos recursos, o que é muito benéfico para grandes projetos que envolvem múltiplas interações de usuários. <\/p>
O DOM também suporta a API declarativa, isto é, você pode indicar ao React em qual estado você quer que a UI esteja. Assim, é possível garantir que o DOM vai corresponder a esse estado.<\/p>
Componentes<\/strong><\/h3>
Como já mencionamos, os componentes do React<\/strong><\/a> são pedaços de código independentes e reutilizáveis que compõem a UI (interface do usuário). Esses componentes funcionam de forma similar às funções do JavaScript. Eles aceitam props<\/em>, ou acessórios, que são entradas arbitrárias. Quando o componente de uma função retorna um elemento, ele influencia a forma com que a UI será exibida. <\/p>
Os props<\/em> são elementos apenas para leitura. Aqui temos um exemplo:<\/p>
import React, { useState } from 'react'\n\nimport ReactDOM from 'react-dom'\n\nconst ParentComponent = () => {\n\n   const [stateVariable, setStateVariable] = useState('this is the starting value for the variable');\n\n   return (\n\n       <div>\n\n           <h1>This is a function component view<\/h1>\n\n           <ChildComponent exampleProp={stateVariable} \/>\n\n       <\/div>\n\n   )\n\n}\n\nconst ChildComponent = (props) => {\n\n   return (\n\n       <div>\n\n           <h2>{props.exampleProp}<\/h2>\n\n       <\/div>\n\n   )\n\n}\n\nReactDOM.render( <ParentComponent \/>, document.getElementById('app') );<\/pre>
Há dois tipos principais de componentes React: componentes de classe<\/strong> e componentes funcionais<\/strong>. Os componentes de classe gerenciam seus próprios estados e utilizam ciclos de vida dos hooks do WordPress<\/strong><\/a> e ligações API<\/strong> para funcionar:<\/p>
class ExampleComponent extends React.Component {\n\n constructor(props) {\n\n   super(props);\n\n   this.state = { };\n\n }\n\n render() {\n\n   return (\n\n     <div>\n\n       <h1>This is a view created by a class component<\/h1>\n\n     <\/div>\n\n   );\n\n }\n\n}<\/pre>
Enquanto isso, os componentes funcionais se parecem com o indicado abaixo:<\/p>
const ExampleComponent = (props) => {\n\n   const [stateVariable, setStateVariable] = useState('');\n\n   return (\n\n       <div>\n\n           <h1>This is a function component view<\/h1>\n\n       <\/div>\n\n   )\n\n}<\/pre>
Assim, componentes funcionais renderizam visualizações sem solicitação de dados e sem gerenciamento de estados. <\/p>
Estados<\/strong><\/h3>
O estado<\/strong><\/a> de um componente React se refere ao objeto que está integrado a ele. É aqui onde você armazena os valores de propriedade dos elementos. Se o estado de um componente é alterado, ele será renderizado novamente. <\/p>
O gerenciamento de estados é o processo de administrar os estados dessas aplicações e armazenar os dados nas respectivas bibliotecas de gerenciamento. Você pode utilizar algumas dessas bibliotecas de gerenciamento de estados, incluindo Redux<\/strong><\/a> e Recoil<\/strong><\/a>, sendo essa última a melhor opção para quem é iniciante no mundo de projetos de desenvolvimento com React. <\/p>
\n
\"\"<\/a><\/figure><\/div>
Por que Usar o React?<\/strong><\/h2>
Há muitos benefícios na utilização do React para fazer projetos de desenvolvimento no WordPress. Para começar, ele é relativamente simples de entender, então até mesmo iniciantes podem utilizá-lo. Além disso, o melhor site de hospedagem<\/strong><\/a> do mercado já tem suporte ao recurso.<\/p>
Já que o React se baseia no JavaScript puro e em componentes, você consegue usar ele para criar aplicações baseadas em web <\/em>depois de apenas alguns dias estudando seus recursos. Também há muitos sites disponíveis na internet que te ensinam a programar<\/strong><\/a> de forma gratuita. Ter um conhecimento sólido do funcionamento básico do JavaScript pode facilitar e otimizar muito o processo. <\/p>
Outro benefício do React é que ele permite que você reutilize componentes em outras aplicações. Por ser de código aberto, você pode pré-construir seus componentes e arranjá-los entre outros componentes sem sobrecarregar ou estufar seu código. <\/p>
Os componentes do React também são relativamente simples de escrever pois são diretos e descomplicados. Isso graças à integração com JSX, que discutiremos mais adiante neste tutorial. Você ainda pode incorporar tipografias em HTML, etiquetas (tags<\/em>) e múltiplas funções de renderização para o desenvolvimento de aplicações dinâmicas. <\/p>
Com o React também é possível utilizar a interface oficial de linha de comando (CLI) — Create<\/strong> React<\/strong> App<\/strong> — para agilizar o desenvolvimento de aplicações de apenas uma página. Ela conta com ferramentas pré-configuradas que podem te ajudar a otimizar os processos de aprendizado e configuração. <\/p>
Por fim, o React também é ideal em termos de SEO. A implementação do DOM virtual ajuda a melhorar a velocidade das páginas, impulsionando o desempenho do site e sua renderização no lado do servidor. Isso, por sua vez, facilita o processo dos bots<\/em> dos mecanismos de busca rastrearem (crawl<\/em>) seu site.<\/p>
Uma Visão Geral da WP REST API<\/strong><\/h2>
A REST API do WordPress<\/strong><\/a> (Interface de Programação de Aplicação) permite que os desenvolvedores integrem frameworks de JavaScript, como o React, com o WordPress. Você consegue acessar a WP REST API a partir do front-end do seu site, e pode adicionar tipos de publicações personalizadas e construir apps baseados em React suportados por esta API.<\/p>
A WP REST API é composta por um conjunto de protocolos utilizados para construir aplicações de software. Eles definem como os dados e informações são compartilhados entre programas e como seus componentes interagem entre si. REST, que é abreviação de Representational State Transfer (Transferência Representacional de Estado), se refere às limitações de arquitetura que definem o estilo dos programas. <\/p>
O formato para estruturar dados para serem lidos pelas aplicações é chamado de JavaScript Object Notation (JSON)<\/strong><\/a>. Ele ajuda a otimizar a comunicação entre o WordPress e outras aplicações ou programas. <\/p>
A WP REST API resulta em um ambiente desvinculado que permite que os usuários tratem o WordPress como um CMS headless<\/strong><\/a>, ou “sem tema”. Isso quer dizer que você pode utilizar uma variedade de frameworks front-end para conectar com o back-end do seu WordPress. Este benefício é especialmente vantajoso para desenvolvedores que não são entusiastas do PHP.<\/p>
React – Antes de Começar<\/strong><\/h2>
Ter conhecimentos básicos de JavaScript<\/strong><\/a>, CSS<\/strong><\/a>, e HTML<\/strong><\/a> <\/strong>ajuda muito a aprender a utilizar o React. Além disso, o processo de aprendizado pode ser ainda mais eficiente caso você esteja familiarizado com o ECMAScript 6<\/strong><\/a> (também conhecido como ES6), com programação funcional e com programação orientada a objetos. <\/p>
Em termos de programas, você também precisará de algumas dependências instaladas em seu computador. Elas incluem NodeJS<\/strong><\/a> e npm<\/strong><\/a>, além de um editor de textos. Um programa opcional é o Git<\/strong><\/a>, que você também pode querer utilizar para ter controle das versões. <\/p>
A forma mais popular de desenvolver projetos para o WordPress com React é utilizando um aplicativo chamado Create React App<\/strong><\/a>:<\/p>
\n
\"Site<\/figure><\/div>
O CRA oferece um ambiente simples para aprender sobre o funcionamento do React e sobre como utilizá-lo para construir aplicações de uma única página. Note que, para usá-lo, você primeiramente precisará do Node e do npm em seu dispositivo. <\/p>
Para criar um novo projeto, você pode rodar o seguinte comando em seu terminal:<\/p>
npx create-react-app wp-react-demo<\/pre>
Caso você ainda não tenha feito isso, esse comando vai confirmar que você deseja instalar o Create React App antes de criar sua demo<\/em>. Isso cria um modelo padrão, ou boilerplate template<\/em>, para a aplicação. Você também pode substituir o elemento “wp-react-demo” com seu próprio nome.<\/p>
Depois, rode o seguinte comando:<\/p>
cd wp-react-demo\n\nnpm start<\/pre>
A estrutura do diretório que será exibida deverá se parecer com a seguinte:<\/p>
├── README.md\n\n├── package.json\n\n├── public\n\n│ ├── favicon.ico\n\n│ ├── index.html\n\n│ └── manifest.json\n\n├── src\n\n│ ├── App.css\n\n│ ├── App.js\n\n│ ├── App.test.js\n\n│ ├── index.css\n\n│ ├── index.js\n\n│ ├── logo.svg\n\n│ └── registerServiceWorker.js<\/pre>
No diretório src, você encontrará todos os arquivos JavaScript em que estará trabalhando. Agora, você pode visitar o endereço localhost:3000<\/strong> para carregar o arquivo index.html<\/strong>.<\/p>
O arquivo public\/index.html<\/strong> <\/em>não contém muitos elementos. De todo modo, você pode encontrar nele a seguinte linha, que será o ponto de início do seu projeto:<\/p>
<div id=\"root\"><\/div><\/pre>
Sob o arquivo <\/em>index.js<\/strong> do diretório src, você encontrará o seguinte:<\/p>
import React from 'react';\n\nimport ReactDOM from 'react-dom';\n\nimport App from '.\/App';\n\nReactDOM.render(<App \/>, document.getElementById('root'));<\/pre>
Isso quer dizer que ele está renderizando o componente App<\/strong>, o qual você pode encontrar em src.\/App.js<\/strong>. Você poderá substituir isso com o seu próprio conteúdo HTML. Também é possível usar o HTML insider<\/em> render() graças à extensão de sintaxe JSX. <\/p>
Como Consultar a WP REST API a Partir do React<\/strong><\/h2>
Por padrão, você pode fazer uma solicitação GET para utilizar a WP REST API no front-end do seu site. Por exemplo, você pode utilizar \/wp-json\/wp\/v2\/posts para acessar todos os seus posts. Mantendo nosso último exemplo, os dados do post estariam localizados em http:\/\/localhost\/wp-json\/wp\/v2\/posts\/<\/strong>.<\/p>
Para começar a usar o React, você pode rodar o seguinte comando em seu terminal:<\/p>
npx create-react-app react-app<\/pre>
Em seguida, rode o comando indicado abaixo:<\/p>
cd react-app\n\nnpm install @material-ui\/core<\/pre>
No próximo passo, você pode inserir o exemplo indicado a seguir:<\/p>
import React, { useEffect, useState } from 'react';\n\nimport Card from '@material-ui\/core\/Card';\n\nimport CardContent from '@material-ui\/core\/CardContent';\n\nimport Typography from '@material-ui\/core\/Typography';\n\nimport Grid from '@material-ui\/core\/Grid';\n\nexport default function Posts() {\n\n   const [posts, setPosts] = useState([]);\n\n   useEffect(() => {\n\n       async function loadPosts() {\n\n           const response = await fetch('\/wp-json\/wp\/v2\/posts');\n\n           if(!response.ok) {\n\n              \/\/ oups! something went wrong\n\n               return;\n\n           }\n\n           const posts = await response.json();\n\n           setPosts(posts);\n\n       }\n\n       loadPosts();\n\n  }, [])\n\n return (\n\n   <Grid container spacing={2}>\n\n     {posts.map((post, index) => (\n\n     <Grid item xs={4} key={index}>\n\n       <Card>\n\n          <CardContent>\n\n               <Typography\n\n                   color=\"textSecondary\"\n\n                   gutterBottom\n\n                   dangerouslySetInnerHTML={{__html: post.title.rendered}} \/>\n\n               <Typography\n\n                   variant=\"body2\"\n\n                   component=\"p\"\n\n                   dangerouslySetInnerHTML={{__html: post.content.rendered}} \/>\n\n           <\/CardContent>\n\n       <\/Card>\n\n     <\/Grid>\n\n    ))}\n\n   <\/Grid>\n\n);\n\n}<\/pre>
Os exemplos indicados acima utilizam os Hooks do React<\/strong><\/a> useEffect e useState. O primeiro declara qual o conjunto de posts e faz a solicitação para atualizá-los, já o segundo desses hooks é o que obtém o código. <\/p>
Como Criar um Tipo de Post Personalizado com o React<\/strong><\/h2>
Você também pode utilizar o React para criar um WordPress Custom Post Type<\/strong><\/a>. De todo modo, há algumas ferramentas que você precisará instalar antes de iniciar a criação desse post personalizado. A instalação desses recursos facilita e agiliza ao máximo o processo. <\/p>
Primeiramente, você precisa instalar<\/strong><\/a> e ativar o plugin gratuito do WordPress Custom Post Type UI<\/strong><\/a>.<\/p>
\n
\"Banner<\/figure><\/div>
Esse plugin simplifica o processo de criação de um tipo de post personalizado no WordPress.<\/p>
Além disso, recomendamos que você instale outro plugin do WordPress, o Advanced Custom Fields (ACF)<\/strong><\/a>.<\/p>
\n
\"Banner<\/figure><\/div>
Essa ferramenta também é gratuita. O plugin ACF pode ser utilizado para criar e adicionar campos customizados nos seus posts personalizados. Também sugerimos ativar o ACF to REST API<\/strong><\/a> para fazer com que seus campos personalizados fiquem disponíveis nos seus posts. <\/p>
Depois dessas configurações de funcionalidades, chegou a hora de começar o processo de adicionar e editar um tipo de post. Para isso, navegue até o menu <\/em>CPT UI→ Add\/Edit Post Types<\/strong> <\/em>a partir do seu painel de administração do WordPress. No nosso exemplo, vamos utilizar o nome “Books”. Nele, também selecionamos a opção de autopreenchimento para o resto dos campos da página (auto-populate). <\/p>
\n
\"Menu<\/figure><\/div>
Na seção de exibição na API (Show in REST API<\/strong>), configure a opção em True<\/strong> e insira o nome desejado como a base da slug da REST API. No nosso exemplo, adicionamos a palavra “Books”. Já na seção Supports<\/strong>, marque os campos de seleção das opções  Author<\/strong> <\/em>e Custom fields<\/strong>. Clique em Save Post Type<\/strong> para salvar as configurações do tipo de post assim que tiver concluído o processo. <\/p>
Depois disso, podemos adicionar campos personalizados para o tipo de post customizado que acabamos de criar. Navegue até a aba Custom Fields → Add New<\/strong>, e adicione um título apropriado. No nosso exemplo, escolhemos “Book Info” (Informaçeõs do Livro). Então você pode clicar no botão Add Field <\/strong>para adicionar e completar o campo com seu rótulo (label<\/em>), nome e tipo. <\/p>
\n
\"Seção<\/figure><\/div>
Na seção da localização, Location<\/strong>, você pode configurar o tipo de post para que ele seja igual ao tipo de post personalizado que acabamos de criar (book<\/strong>). Quando tiver concluído, clique em Publish<\/strong> para ativar e publicar o campo personalizado. <\/p>
Depois, acesse o menu My Books → Add New<\/strong> <\/em>e insira o título, resumo e imagem destacada. Você pode repetir esse processo para criar quantos posts personalizados desejar. <\/p>
Agora, a partir do seu terminal, insira os seguintes comandos, rodando um por vez antes de passar para o próximo:<\/p>
npx create-react-app frontend\n\ncd frontend\n\nnpm i axios\n\nnpm start<\/pre>
Depois, dentro do diretório src, você pode criar uma pasta chamada components<\/em>, seguida de um arquivo chamado books.js<\/strong>. Quando tiver finalizado essa configuração, insira o seguinte código:<\/p>
import React, { Component } from 'react';\n\nimport axios from 'axios';\n\nexport class Books extends Component {\n\n  state = {\n\n      books: [],\n\n      isLoaded: false\n\n  }\n\ncomponentDidMount () {\n\n  axios.get('http:\/\/localhost:3000\/wp-json\/wp\/v2\/books')\n\n      .then(res => this.setState({\n\n          books: res.data,\n\n          isLoaded: true\n\n      }))\n\n      .catch(err => console.log(err))\n\n  }\n\n  render() {\n\n     console.log(this.state);\n\n      return (\n\n          <div>\n\n          <\/div>\n\n      )\n\n  }\n\n}\n\nexport default Books;<\/pre>
No arquivo App.js<\/strong>, insira o código indicado abaixo:<\/p>
import React from 'react';\n\nimport '.\/App.css';\n\nimport Books from '.\/components\/Books';\n\nfunction App() {\n\nreturn (\n\n  <div className=\"App\">\n\n   <Books>\n\n  <\/div>\n\n);\n\n}\n\nexport default App;<\/pre>
Agora, no seu terminal, você pode rodar o comando npm start. Ele fará a inicialização do app React. Você poderá visualizar o painel de dados “Book” quando abri-lo em um navegador. É possível exibir cada título através do mapeamento de cada livro (book).<\/p>
No arquivo Book.js<\/strong>, adicione o seguinte código:<\/p>
render() {\n\n     const {books, isLoaded} = this.state;\n\n      return (\n\n          <div>\n\n             {books.map(book => <h4>{book.title.rendered}<\/h4>)}\n\n          <\/div>\n\n      )\n\n  }<\/pre>
Note que você também pode separar a coleção de livros em um único componente de livro. Isso pode ser feito através da criação de um arquivo dentro da pasta src\/components. Você também pode adicionar classes CSS personalizadas para estilizar o tipo de post personalizado que criou (app.css).<\/p>
Como Criar um Tema WordPress React (2 Métodos)<\/strong><\/h2>
Uma das muitas coisas que você pode fazer com o React é criar um tema WordPress responsivo<\/strong><\/a>. Há diversas técnicas para desenvolver um tema utilizando o React, e aqui vamos conhecer dois dos métodos mais populares: <\/p>
1. Crie um Tema WordPress React Utilizando o WP Scripts <\/strong><\/h3>
Em apps típicos criados com React, você precisa importar a biblioteca do React logo no início dos arquivos. De todo modo, com o WordPress 5.0<\/strong><\/a>, o CMS já vem acompanhado pelas bibliotecas React e ReactDOM,  e exporta elas em wp.element, um  objeto window global.<\/p>
Se você já fez uso do React para criar projetos antes, provavelmente já utilizou o Create React App para rodar seu servidor de desenvolvimento. De todo modo, isso não é necessário com o WordPress. <\/p>
Isso porque o time do WordPress criou um pacote wp-scripts baseado nos react-scripts usados com o Create React App. Esse pacote WP Scripts já inclui os comandos necessários por padrão. <\/p>
Para carregar o React no seu tema, navegue até o arquivo functions.php<\/strong> do seu tema e adicione o seguinte trecho de código:<\/p>
\/\/ Enqueue Theme JS w React Dependency\n\nadd_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );\n\nfunction my_enqueue_theme_js() {\n\n wp_enqueue_script(\n\n   'my-theme-frontend',\n\n   get_stylesheet_directory_uri() . '\/build\/index.js',\n\n   ['wp-element'],\n\n   time(), \/\/ Change this to null for production\n\n   true\n\n );\n\n}<\/pre>
Esse código fará com que o elemento wp-element seja adicionado como uma dependência do seu arquivo JavaScript. Depois, é necessário configurar um arquivo package.json<\/strong>. A partir da raiz do seu tema WordPress, rode o seguinte comando:<\/p>
npm init<\/pre>
Uma vez que isso estiver feito, rode o próximo comando: <\/p>
npm install @wordpress\/scripts --save-dev<\/pre>
O WP Scripts será baixado no seu node_modules,<\/strong> então eles estarão disponíveis para serem utilizados nas suas linhas de comando. Para mapear o WP Scripts em scripts NPM, você pode navegar até o seu arquivo package.json<\/strong>, carregar as configurações de “script” e substituí-las com o exemplo indicado abaixo:<\/p>
{\n\n \"name\": \"myreacttheme\",\n\n \"version\": \"1.0.0\",\n\n \"description\": \"My WordPress theme with React\",\n\n \"main\": \"src\/index.js\",\n\n \"dependencies\": {},\n\n \"devDependencies\": {\n\n   \"@wordpress\/scripts\": \"^5.1.0\"\n\n },\n\n \"scripts\": {\n\n   \"build\": \"wp-scripts build\",\n\n   \"check-engines\": \"wp-scripts check-engines\",\n\n   \"check-licenses\": \"wp-scripts check-licenses\",\n\n   \"lint:css\": \"wp-scripts lint-style\",\n\n   \"lint:js\": \"wp-scripts lint-js\",\n\n   \"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n\n   \"start\": \"wp-scripts start\",\n\n   \"test:e2e\": \"wp-scripts test-e2e\",\n\n   \"test:unit\": \"wp-scripts test-unit-js\"\n\n },\n\n \"author\": \"\",\n\n \"license\": \"1 GNU V2+, MIT\"\n\n}<\/pre>
Depois disso, você pode rodar o seguinte comando:<\/p>
npm start<\/pre>
Esse comando vai buscar os arquivos importados a partir do src\/index.js<\/strong> <\/em>e construí-los no build\/index.js<\/strong> sempre que um arquivo for modificado. <\/p>
\n
\"\"<\/a><\/figure><\/div>
2. Crie um Tema WordPress React Utilizando o Create-React-WPTheme<\/strong><\/h3>
Outro método para criar um tema WordPress React é utilizar o create-react-wptheme<\/strong><\/a> desenvolvido pelo usuário devloco<\/em>. Este pacote é muito similar ao create-react-app. Entretanto, ele utiliza o WordPress ao invés do webpack <\/em>como servidor de desenvolvimento. Você também terá acesso a todas as funções centrais (core<\/em>) do WordPress como hooks, filtros, ações, etc. <\/p>
Para configurar esse recurso, você pode dar início num terminal (ou no GIT bash) em sua instalação WordPress local, e então rodar o seguinte comando:<\/p>
npx create-react-wptheme barebones<\/pre>
“Barebones”<\/strong> neste caso é o nome do tema. Você pode alterar esse nome para qualquer outro, de acordo com o que deseja chamar o tema que está criando. <\/p>
Em seguida, você verá uma mensagem informando que a instalação criou um diretório raiz e uma pasta “react-src” dentro dela. Esse diretório “react-src” é importante porque ele contém todo o seu código não compilado. <\/p>
Depois, é necessário adicionar outros arquivos essenciais para validar o processo, como o styles.css<\/strong> <\/em>e <\/em>index.php<\/strong>. No terminal, digite o seguinte comando:<\/p>
cd barebones\/react-src\n\nnpm run wpstart<\/pre>
Agora, quando você navegar pelo wp-admin → themes<\/strong>, já deverá ver o seu novo tema. Clique no botão Ativar<\/strong> ou Activate<\/strong> e retorne até o terminal para rodar o próximo comando:<\/p>
npm run wpstart<\/pre>
Isso fará com que uma nova aba seja automaticamente aberta em seu navegador. Lembre-se de que os arquivos localizados na pasta raiz (tudo aquilo fora do react-src) não devem ser editados. Eles contêm a versão compilada do código necessário para rodar o WordPress e o React. <\/p>
Então, para criar um novo tema, você pode usar o seguinte:<\/p>
npx create-react-wptheme my_react_theme<\/pre>
Note que você pode alterar o elemento “my_react_theme” de acordo com o nome que desejar. Depois, rode o próximo comando:<\/p>
cd my_react_theme\/react-src\n\nnpm run start<\/pre>
Lembre-se de sempre substituir o “my_react_theme” com o mesmo nome que definiu no passo anterior. Essa etapa vai configurar o tema para que seja visto no painel de administração. <\/p>
Depois que concluir o desenvolvimento do seu tema, será necessário utilizar o comando de construção (build) para movê-lo para a produção. Para fazer isso, abra seu prompt de comando, navegue até a pasta react-src<\/strong> do seu tema e rode o comando indicado abaixo:<\/p>
npm run build<\/pre>
Esse processo vai otimizar seus arquivos localizados dentro da pasta. Então você já pode fazer o deploy e implantar no seu servidor. <\/p>
Como Adicionar o React em um Template de Página Personalizada<\/strong><\/h2>
Se você está se perguntando como criar um child theme no WordPress<\/strong><\/a> <\/strong>utilizando a biblioteca React, o processo é relativamente parecido com a criação de um tema normal, já que trata-se apenas de um tema filho. Nesse caso você pode adicionar o React em um template de página personalizada. <\/p>
Vamos começar com a estrutura padrão de um tema:<\/p>
\/build\n\n\/src\n\n\/-- index.js\n\nfunctions.php\n\npackage.json\n\npage-react.php\n\nstyle.css<\/pre>
Depois, você deve adicionar o seguinte trecho de código no arquivo functions.php<\/strong> do seu tema:<\/p>
<?php\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n\nfunction my_theme_enqueue_styles() {\n\n $parent_style = 'twentytwenty-style';\n\n wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\n\n wp_enqueue_style( 'child-style',\n\n   get_stylesheet_directory_uri() . '\/style.css',\n\n   [ $parent_style ],\n\n   time() \/\/For production use wp_get_theme()->get('Version')\n\n );\n\n wp_enqueue_script(\n\n   'my-theme-frontend',\n\n   get_stylesheet_directory_uri() . '\/build\/index.js',\n\n   ['wp-element'],\n\n   time() \/\/For production use wp_get_theme()->get('Version')       \n\n );\n\n }<\/pre>
Você também vai precisar adicionar um código no arquivo style.css<\/strong> do tema. Dentro desse arquivo de estilo, copie e cole o seguinte trecho:<\/p>
\/*\n\nTheme Name:   Twenty Twenty Child\n\nDescription:  Twenty Twenty Child Theme\n\nAuthor:       Your Name\n\nAuthor URI:   https:\/\/yourwebsite.com\n\nTemplate:     twentytwenty\n\nVersion:      0.9.0\n\nLicense:      GNU General Public License v2 or later\n\nLicense URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n\nText Domain:  twentytwentychild\n\n*\/<\/pre>
Depois disso, você poderá criar um template básico de página personalizada (page-react.php<\/strong>) utilizando esse exemplo:<\/p>
<? php\n\n\/**\n\n* Template Name: React Template\n\n*\/\n\nget_header();\n\n?>\n\n<main id=\"site-content\" role=\"main\">\n\n <article class=\"post-2 page type-page status-publish hentry\">\n\n   <?php get_template_part( 'template-parts\/entry-header' ); ?>\n\n   <div class=\"post-inner thin\">\n\n     <div class=\"entry-content\">       \n\n       <div id=\"react-app\"><\/div><!-- #react-app -->\n\n     <\/div><!-- .entry-content -->\n\n   <\/div><!-- .post-inner -->\n\n <\/article><!-- .post -->\n\n<\/main><!-- #site-content -->\n\n<?php get_template_part( 'template-parts\/footer-menus-widgets' ); ?>\n\n<?php get_footer(); ?><\/pre>
Agora você pode criar uma nova página no WordPress e então selecionar o React Template <\/strong>como modelo de tal página. <\/p>
Como Utilizar o React em seu App<\/strong><\/h2>
Se você deseja usar o React em um app que já existe, basta adicionar o CDN<\/strong><\/a> (rede de distribuição de conteúdos) diretamente no seu arquivo HTML. Para começar o processo, navegue até a página HTML na qual você deseja adicionar o React. <\/p>
Insira uma etiqueta (tag) <div> vazia, em branco. Isso vai criar um container no qual você pode renderizar um componente. No exemplo deste tutorial, vamos considerar que estamos tentando criar um botão. <\/p>
Depois, insira três tags de <script> na página antes de fechar a tag <\/body>. As duas primeiras serão utilizadas para carregar o React, e a terceira dessas etiquetas de script irá carregar o código do seu componente – neste nosso exemplo, um botão. <\/p>
Agora, na mesma pasta em que está sua página HTML, crie um novo arquivo e nomeie ele como button.js<\/strong> (ou qualquer nome que seja relevante, considerando o elemento que você está querendo adicionar. Button neste caso é referente ao botão que desejamos criar). Dentro deste arquivo, copie e cole o seguinte código:<\/p>
'use strict';\n\nconst e = React.createElement;\n\nclass Button extends React.Component {\n\n constructor(props) {\n\n   super(props);\n\n   this.state = { clicked: false };\n\n }\n\n render() {\n\n   if (this.state.clicked) {\n\n     return 'You pressed this button.';\n\n   }\n\n   return e(\n\n     'button',\n\n     { onClick: () => this.setState({ clicked: true }) },\n\n     'Press Me'\n\n   );\n\n }\n\n}<\/pre>
Esse código vai construir um componente de botão que exibe uma mensagem quando um usuário clica nele. Para usar esse botão em sua página HTML, você pode adicionar o seguinte fragmento de código ao final do arquivo recém criado, o button.js<\/strong>:<\/p>
const domContainer = document.querySelector('#button_container');\n\nReactDOM.render(e(Button), domContainer);<\/pre>
Esse código faz a conexão com o container <div> que você adicionou anteriormente na página HTML, e então faz a renderização do componente de botão React. <\/p>
Você também pode utilizar o React para criar, do zero, um app React em branco. A melhor maneira de fazer isso é utilizando a solução Create React App que comentamos anteriormente. Ela pode ser muito útil para aplicações de uma única página. <\/p>
Para dar início nesse processo, você pode rodar o seguinte comando em seu terminal:<\/p>
npx create-react-app my-app<\/pre>
Note que você pode alterar o “my-app” para qualquer nome que deseja dar ao seu app. Para rodá-lo, basta navegar até a pasta do app através do comando cd my-app seguido por npm start.<\/p>
Então o app irá rodar no modo desenvolvedor. Você pode visualizá-lo em seu navegador pelo endereço http:\/\/localhost:3000<\/strong>.<\/p>
Conclusão<\/strong><\/h2>
Desenvolver projetos WordPress em React pode ser um processo simples e direto, mesmo se você for um iniciante nesse universo. De todo modo, para fazer isso com sucesso, é muito importante aprender como o framework JavaScript funciona com esse CMS e com a REST API dele. <\/p>
Felizmente, com um conhecimento básico de JavaScript, HTML e CSS, você consegue aprender as funcionalidades do React rapidamente. Como discutimos nesse artigo, você pode usar o React para criar temas, templates de páginas personalizadas e aplicações de uma única página. <\/p>
Esperamos que este guia tenha te ajudado a entender melhor o React e suas possibilidades de desenvolvimento web com o WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"
O WordPress é um poderoso Sistema de Gerenciamento de Conteúdo (CMS) que permite que você construa qualquer site na internet, desde simples blogs até complexas lojas virtuais. Para integrar o código PHP da plataforma com o JavaScript, você pode aproveitar os recursos de WP REST API e WordPress React. Desenvolvido pelo Facebook, o React é […]<\/p>\n
Read More…<\/a><\/p>\n","protected":false},"author":305,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Confira nosso guia completo para aprender a integrar essa que \u00e9 uma das mais populares bibliotecas de JavaScript do mundo com o CMS WordPress.","rank_math_focus_keyword":"","footnotes":""},"categories":[4911],"tags":[6568,7470],"class_list":["post-32063","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-react","tag-wordpress-react"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-react","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-react","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/react-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wordpress-react","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/panduan-wordpress-react","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-react","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/a-beginners-guide-to-wordpress-react-development-projects","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/a-beginners-guide-to-wordpress-react-development-projects","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wordpress-react","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wordpress-react","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wordpress-react","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wordpress-react","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-react","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-react","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-react","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-react","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/32063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=32063"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/32063\/revisions"}],"predecessor-version":[{"id":34665,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/32063\/revisions\/34665"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=32063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=32063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=32063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}