Projetos de Desenvolvimento com WordPress React: Um Guia Completo para Iniciantes

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 é uma biblioteca de interface do usuário (UI) 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. 

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á!

Uma Introdução ao React

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

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.

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, caso esteja buscando funções mais sofisticadas para seus projetos de desenvolvimento web.

Também é importante notar que existe o ReactJS e o React Native. 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.

Funções e Recursos do React 

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:

JSX

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

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

As etiquetas (tag) JSX incluem um nome, filhos e atributos. 

Uma tag HTML típica de imagens se parece com isso:

<img class="" src="" alt="" >

Já uma tag JSX do mesmo tipo tem esse formato:

<img className="" src="" alt="" />

Além disso, os valores numéricos são escritos dentro das chaves. Similar ao JavaScript, as aspas representam strings: 

const name = 'John Doe’;

const element = <h1>Hello, {name}</h1>;

ReactDOM.render(

 element,

 document.getElementById('root')

);

Você pode colocar qualquer expressão JavaScript válida dentro das chaves. Por exemplo, ela poderia ser “user.firstName” ou “formatName(user)”.

Virtual DOM

O Document Object Model (DOM) 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.

O DOM virtual 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.

O Document Object Model Virtual utiliza um processo conhecido como diffing. 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. 

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.

Componentes

Como já mencionamos, os componentes do React 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, 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. 

Os props são elementos apenas para leitura. Aqui temos um exemplo:

import React, { useState } from 'react'

import ReactDOM from 'react-dom'

const ParentComponent = () => {

   const [stateVariable, setStateVariable] = useState('this is the starting value for the variable');

   return (

       <div>

           <h1>This is a function component view</h1>

           <ChildComponent exampleProp={stateVariable} />

       </div>

   )

}

const ChildComponent = (props) => {

   return (

       <div>

           <h2>{props.exampleProp}</h2>

       </div>

   )

}

ReactDOM.render( <ParentComponent />, document.getElementById('app') );

Há dois tipos principais de componentes React: componentes de classe e componentes funcionais. Os componentes de classe gerenciam seus próprios estados e utilizam ciclos de vida dos hooks do WordPress e ligações API para funcionar:

class ExampleComponent extends React.Component {

 constructor(props) {

   super(props);

   this.state = { };

 }

 render() {

   return (

     <div>

       <h1>This is a view created by a class component</h1>

     </div>

   );

 }

}

Enquanto isso, os componentes funcionais se parecem com o indicado abaixo:

const ExampleComponent = (props) => {

   const [stateVariable, setStateVariable] = useState('');

   return (

       <div>

           <h1>This is a function component view</h1>

       </div>

   )

}

Assim, componentes funcionais renderizam visualizações sem solicitação de dados e sem gerenciamento de estados. 

Estados

O estado 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. 

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 e Recoil, sendo essa última a melhor opção para quem é iniciante no mundo de projetos de desenvolvimento com React. 

Por que Usar o React?

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 do mercado já tem suporte ao recurso.

Já que o React se baseia no JavaScript puro e em componentes, você consegue usar ele para criar aplicações baseadas em web depois de apenas alguns dias estudando seus recursos. Também há muitos sites disponíveis na internet que te ensinam a programar de forma gratuita. Ter um conhecimento sólido do funcionamento básico do JavaScript pode facilitar e otimizar muito o processo. 

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. 

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) e múltiplas funções de renderização para o desenvolvimento de aplicações dinâmicas. 

Com o React também é possível utilizar a interface oficial de linha de comando (CLI) — Create React App — 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. 

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 dos mecanismos de busca rastrearem (crawl) seu site.

Uma Visão Geral da WP REST API

A REST API do WordPress (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.

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. 

O formato para estruturar dados para serem lidos pelas aplicações é chamado de JavaScript Object Notation (JSON). Ele ajuda a otimizar a comunicação entre o WordPress e outras aplicações ou programas. 

A WP REST API resulta em um ambiente desvinculado que permite que os usuários tratem o WordPress como um CMS headless, 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.

React – Antes de Começar

Ter conhecimentos básicos de JavaScript, CSS, e HTML 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 (também conhecido como ES6), com programação funcional e com programação orientada a objetos. 

Em termos de programas, você também precisará de algumas dependências instaladas em seu computador. Elas incluem NodeJS e npm, além de um editor de textos. Um programa opcional é o Git, que você também pode querer utilizar para ter controle das versões. 

A forma mais popular de desenvolver projetos para o WordPress com React é utilizando um aplicativo chamado Create React App:

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. 

Para criar um novo projeto, você pode rodar o seguinte comando em seu terminal:

npx create-react-app wp-react-demo

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. Isso cria um modelo padrão, ou boilerplate template, para a aplicação. Você também pode substituir o elemento “wp-react-demo” com seu próprio nome.

Depois, rode o seguinte comando:

cd wp-react-demo

npm start

A estrutura do diretório que será exibida deverá se parecer com a seguinte:

├── README.md

├── package.json

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

├── src

│ ├── App.css

│ ├── App.js

│ ├── App.test.js

│ ├── index.css

│ ├── index.js

│ ├── logo.svg

│ └── registerServiceWorker.js

No diretório src, você encontrará todos os arquivos JavaScript em que estará trabalhando. Agora, você pode visitar o endereço localhost:3000 para carregar o arquivo index.html.

O arquivo public/index.html 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:

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

Sob o arquivo index.js do diretório src, você encontrará o seguinte:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

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

Isso quer dizer que ele está renderizando o componente App, o qual você pode encontrar em src./App.js. Você poderá substituir isso com o seu próprio conteúdo HTML. Também é possível usar o HTML insider render() graças à extensão de sintaxe JSX. 

Como Consultar a WP REST API a Partir do React

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/.

Para começar a usar o React, você pode rodar o seguinte comando em seu terminal:

npx create-react-app react-app

Em seguida, rode o comando indicado abaixo:

cd react-app

npm install @material-ui/core

No próximo passo, você pode inserir o exemplo indicado a seguir:

import React, { useEffect, useState } from 'react';

import Card from '@material-ui/core/Card';

import CardContent from '@material-ui/core/CardContent';

import Typography from '@material-ui/core/Typography';

import Grid from '@material-ui/core/Grid';

export default function Posts() {

   const [posts, setPosts] = useState([]);

   useEffect(() => {

       async function loadPosts() {

           const response = await fetch('/wp-json/wp/v2/posts');

           if(!response.ok) {

              // oups! something went wrong

               return;

           }

           const posts = await response.json();

           setPosts(posts);

       }

       loadPosts();

  }, [])

 return (

   <Grid container spacing={2}>

     {posts.map((post, index) => (

     <Grid item xs={4} key={index}>

       <Card>

          <CardContent>

               <Typography

                   color="textSecondary"

                   gutterBottom

                   dangerouslySetInnerHTML={{__html: post.title.rendered}} />

               <Typography

                   variant="body2"

                   component="p"

                   dangerouslySetInnerHTML={{__html: post.content.rendered}} />

           </CardContent>

       </Card>

     </Grid>

    ))}

   </Grid>

);

}

Os exemplos indicados acima utilizam os Hooks do React 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. 

Como Criar um Tipo de Post Personalizado com o React

Você também pode utilizar o React para criar um WordPress Custom Post Type. 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. 

Primeiramente, você precisa instalar e ativar o plugin gratuito do WordPress Custom Post Type UI.

Esse plugin simplifica o processo de criação de um tipo de post personalizado no WordPress.

Além disso, recomendamos que você instale outro plugin do WordPress, o Advanced Custom Fields (ACF).

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 para fazer com que seus campos personalizados fiquem disponíveis nos seus posts. 

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 CPT UI→ Add/Edit Post Types 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). 

Na seção de exibição na API (Show in REST API), configure a opção em True 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, marque os campos de seleção das opções  Author e Custom fields. Clique em Save Post Type para salvar as configurações do tipo de post assim que tiver concluído o processo. 

Depois disso, podemos adicionar campos personalizados para o tipo de post customizado que acabamos de criar. Navegue até a aba Custom Fields → Add New, 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 para adicionar e completar o campo com seu rótulo (label), nome e tipo. 

Na seção da localização, Location, você pode configurar o tipo de post para que ele seja igual ao tipo de post personalizado que acabamos de criar (book). Quando tiver concluído, clique em Publish para ativar e publicar o campo personalizado. 

Depois, acesse o menu My Books → Add New e insira o título, resumo e imagem destacada. Você pode repetir esse processo para criar quantos posts personalizados desejar. 

Agora, a partir do seu terminal, insira os seguintes comandos, rodando um por vez antes de passar para o próximo:

npx create-react-app frontend

cd frontend

npm i axios

npm start

Depois, dentro do diretório src, você pode criar uma pasta chamada components, seguida de um arquivo chamado books.js. Quando tiver finalizado essa configuração, insira o seguinte código:

import React, { Component } from 'react';

import axios from 'axios';

export class Books extends Component {

  state = {

      books: [],

      isLoaded: false

  }

componentDidMount () {

  axios.get('http://localhost:3000/wp-json/wp/v2/books')

      .then(res => this.setState({

          books: res.data,

          isLoaded: true

      }))

      .catch(err => console.log(err))

  }

  render() {

     console.log(this.state);

      return (

          <div>

          </div>

      )

  }

}

export default Books;

No arquivo App.js, insira o código indicado abaixo:

import React from 'react';

import './App.css';

import Books from './components/Books';

function App() {

return (

  <div className="App">

   <Books>

  </div>

);

}

export default App;

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).

No arquivo Book.js, adicione o seguinte código:

render() {

     const {books, isLoaded} = this.state;

      return (

          <div>

             {books.map(book => <h4>{book.title.rendered}</h4>)}

          </div>

      )

  }

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).

Como Criar um Tema WordPress React (2 Métodos)

Uma das muitas coisas que você pode fazer com o React é criar um tema WordPress responsivo. Há diversas técnicas para desenvolver um tema utilizando o React, e aqui vamos conhecer dois dos métodos mais populares: 

1. Crie um Tema WordPress React Utilizando o WP Scripts 

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, o CMS já vem acompanhado pelas bibliotecas React e ReactDOM,  e exporta elas em wp.element, um  objeto window global.

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. 

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. 

Para carregar o React no seu tema, navegue até o arquivo functions.php do seu tema e adicione o seguinte trecho de código:

// Enqueue Theme JS w React Dependency

add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );

function my_enqueue_theme_js() {

 wp_enqueue_script(

   'my-theme-frontend',

   get_stylesheet_directory_uri() . '/build/index.js',

   ['wp-element'],

   time(), // Change this to null for production

   true

 );

}

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. A partir da raiz do seu tema WordPress, rode o seguinte comando:

npm init

Uma vez que isso estiver feito, rode o próximo comando: 

npm install @wordpress/scripts --save-dev

O WP Scripts será baixado no seu node_modules, 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, carregar as configurações de “script” e substituí-las com o exemplo indicado abaixo:

{

 "name": "myreacttheme",

 "version": "1.0.0",

 "description": "My WordPress theme with React",

 "main": "src/index.js",

 "dependencies": {},

 "devDependencies": {

   "@wordpress/scripts": "^5.1.0"

 },

 "scripts": {

   "build": "wp-scripts build",

   "check-engines": "wp-scripts check-engines",

   "check-licenses": "wp-scripts check-licenses",

   "lint:css": "wp-scripts lint-style",

   "lint:js": "wp-scripts lint-js",

   "lint:pkg-json": "wp-scripts lint-pkg-json",

   "start": "wp-scripts start",

   "test:e2e": "wp-scripts test-e2e",

   "test:unit": "wp-scripts test-unit-js"

 },

 "author": "",

 "license": "1 GNU V2+, MIT"

}

Depois disso, você pode rodar o seguinte comando:

npm start

Esse comando vai buscar os arquivos importados a partir do src/index.js e construí-los no build/index.js sempre que um arquivo for modificado. 

2. Crie um Tema WordPress React Utilizando o Create-React-WPTheme

Outro método para criar um tema WordPress React é utilizar o create-react-wptheme desenvolvido pelo usuário devloco. Este pacote é muito similar ao create-react-app. Entretanto, ele utiliza o WordPress ao invés do webpack como servidor de desenvolvimento. Você também terá acesso a todas as funções centrais (core) do WordPress como hooks, filtros, ações, etc. 

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:

npx create-react-wptheme barebones

“Barebones” 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. 

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. 

Depois, é necessário adicionar outros arquivos essenciais para validar o processo, como o styles.css e index.php. No terminal, digite o seguinte comando:

cd barebones/react-src

npm run wpstart

Agora, quando você navegar pelo wp-admin → themes, já deverá ver o seu novo tema. Clique no botão Ativar ou Activate e retorne até o terminal para rodar o próximo comando:

npm run wpstart

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. 

Então, para criar um novo tema, você pode usar o seguinte:

npx create-react-wptheme my_react_theme

Note que você pode alterar o elemento “my_react_theme” de acordo com o nome que desejar. Depois, rode o próximo comando:

cd my_react_theme/react-src

npm run start

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. 

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 do seu tema e rode o comando indicado abaixo:

npm run build

Esse processo vai otimizar seus arquivos localizados dentro da pasta. Então você já pode fazer o deploy e implantar no seu servidor. 

Como Adicionar o React em um Template de Página Personalizada

Se você está se perguntando como criar um child theme no WordPress 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. 

Vamos começar com a estrutura padrão de um tema:

/build

/src

/-- index.js

functions.php

package.json

page-react.php

style.css

Depois, você deve adicionar o seguinte trecho de código no arquivo functions.php do seu tema:

<?php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {

 $parent_style = 'twentytwenty-style';

 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

 wp_enqueue_style( 'child-style',

   get_stylesheet_directory_uri() . '/style.css',

   [ $parent_style ],

   time() //For production use wp_get_theme()->get('Version')

 );

 wp_enqueue_script(

   'my-theme-frontend',

   get_stylesheet_directory_uri() . '/build/index.js',

   ['wp-element'],

   time() //For production use wp_get_theme()->get('Version')       

 );

 }

Você também vai precisar adicionar um código no arquivo style.css do tema. Dentro desse arquivo de estilo, copie e cole o seguinte trecho:

/*

Theme Name:   Twenty Twenty Child

Description:  Twenty Twenty Child Theme

Author:       Your Name

Author URI:   https://yourwebsite.com

Template:     twentytwenty

Version:      0.9.0

License:      GNU General Public License v2 or later

License URI:  http://www.gnu.org/licenses/gpl-2.0.html

Text Domain:  twentytwentychild

*/

Depois disso, você poderá criar um template básico de página personalizada (page-react.php) utilizando esse exemplo:

<? php

/**

* Template Name: React Template

*/

get_header();

?>

<main id="site-content" role="main">

 <article class="post-2 page type-page status-publish hentry">

   <?php get_template_part( 'template-parts/entry-header' ); ?>

   <div class="post-inner thin">

     <div class="entry-content">       

       <div id="react-app"></div><!-- #react-app -->

     </div><!-- .entry-content -->

   </div><!-- .post-inner -->

 </article><!-- .post -->

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

Agora você pode criar uma nova página no WordPress e então selecionar o React Template como modelo de tal página. 

Como Utilizar o React em seu App

Se você deseja usar o React em um app que já existe, basta adicionar o CDN (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. 

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. 

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. 

Agora, na mesma pasta em que está sua página HTML, crie um novo arquivo e nomeie ele como button.js (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:

'use strict';

const e = React.createElement;

class Button extends React.Component {

 constructor(props) {

   super(props);

   this.state = { clicked: false };

 }

 render() {

   if (this.state.clicked) {

     return 'You pressed this button.';

   }

   return e(

     'button',

     { onClick: () => this.setState({ clicked: true }) },

     'Press Me'

   );

 }

}

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:

const domContainer = document.querySelector('#button_container');

ReactDOM.render(e(Button), domContainer);

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. 

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. 

Para dar início nesse processo, você pode rodar o seguinte comando em seu terminal:

npx create-react-app my-app

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.

Então o app irá rodar no modo desenvolvedor. Você pode visualizá-lo em seu navegador pelo endereço http://localhost:3000.

Conclusão

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. 

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. 

Esperamos que este guia tenha te ajudado a entender melhor o React e suas possibilidades de desenvolvimento web com o WordPress.