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!
Compartilhe!
Expertise
agile android app Architecture bigdata brasil business chatbot Cloud comercial cordova desenvolvimento design design de conversao development digital engenharia de software facebook funil de vendas google inbound inovação IOS javascript landing page lead leads marketing marketing digital mautic mobile negocios php produto rest scrum seguranca SEO startup tech vendas webservice website wordpress xp
Soluções
Landing Pages
Inbound Marketing
Chatbots
Webservices
WordPress
Mobile Apps
Vagas para programadores
Newsletter
Receba boletins informativos sobre tecnologias e negócios
© Morettic 2014 - 2019 | Florianópolis - SC - Brasil | Whatsapp: +55 (48) 99600-4929 | Painel do Cliente | Hospede seu Site | Mundo POO | Sponsors | Fiverr