Criando um tema do WordPress com React: Parte 1

porLuis Augusto Moretto

Criando um tema do WordPress com React: Parte 1

React JS
yarn install

Neste post vamos abordar uma experiência de desenvolvimeno um pouco mais moderna. Vamos desenvolver um SPA (simple page application), com API REST do WordPress para criar um tema do WordPress com React.

Ja falamos sobre a características Headless do WordPress que permite utilizar o front o back de forma separada e independente.

Para quem não conhece, React foi desenvolvido pelo Facebook. React é uma biblioteca para a construção de interfaces de usuário 

Em conjunto, vamos usar o create-react-wptheme – o que tornará nosso tema em funcionamento com o React em pouco tempo. E, claro, a API WP Rest para o back-end.

Requisitos

  • nodejs + npm
  • instalação local do WordPress

create-react-wptheme

O objetivo deste componente é inicializar um novo tema WordPress baseado em React, com apenas alguns comandos. Se algum de vocês conhece o create-react-app, é basicamente a mesma funcionalidade – mas para o WordPress. 

Uma diferença principal é que ele usa o WordPress (não o webpack), como servidor de desenvolvimento. Isso torna o desenvolvimento consolidado em um front end e back end.

Além disso, como é um tema do WordPress, você tem acesso a todas as principais funções, filtros, ações, hooks etc. Além disso, você pode usar o nonce do WordPress para solicitações autenticadas. 

Por fim, se você precisar usar PHP simples – digamos apenas para uma página específica, ainda poderá usar os modelos de página do WordPress – o que é muito útil.

Então, com isso em mente, vamos começar. No console do powershell windows ou bash linux, acesse a pasta wp-content/themes e digite:

npx create-react-wptheme react-wordpress

Observe que “react-wordpress” é o nome do nosso tema. Você pode simplesmente substituí-lo por um nome de tema de sua preferência.

A instalação criou uma pasta raiz, com um diretório “react-src” dentro dela. Considere o diretório react-src como o diretório dos fontes do projeto, pois contém todo o código não compilado. A partir deste diretório – podemos construir o resto. Observe que, nesta etapa, nosso tema ainda não está pronto.

Veja, se você olhar dentro dos temas wp-admin > , verá “react-wordpress” na seção “Temas quebrados”. Isso ocorre porque não temos os arquivos necessários (principalmente o styles.css) para que seja um tema válido. Observe que também precisamos de index.php, para que possamos manter os arquivos JavaScript e CSS juntos.

wpstart

Vamos voltar ao nosso terminal e digitar o seguinte:

cd react-wordpress/react-src
npm run wpstart

Proximo papo:

Iremos mostrar como criar a estrutura de arquivos do projeto e dicas para rodar. Gostou? deixe seu comentário!