Use WordPress com React para criar CMS Headless para seu aplicativo da web

WordPress Rest API é um dos muitos excelentes recursos que o WordPress oferece. Ele permite que os desenvolvedores criem plug-ins e temas fascinantes, e também permite que eles desenvolvam aplicativos de terceiros com o WordPress CMS.

Em aplicações web modernas, o sistema de gerenciamento de conteúdo também é desenvolvido para gerenciar o conteúdo do site. Isso pode adicionar carga de trabalho extra para os desenvolvedores. Com tantas possibilidades que a API Rest oferece, também se pode pensar em usar o WordPress com React como um CMS sem cabeçalho para seus aplicativos da web baseados em JavaScript.

Então, o que diabos é WordPress sem cabeça?

Ser 'sem cabeça' definitivamente não significa que o CMS não tenha a seção de cabeçalho. Isso significa que você pode usar o CMS como um sistema de gerenciamento de conteúdo genérico, independentemente da tecnologia usada para construir o front-end.

Rest API permite que os desenvolvedores interajam com interfaces de tecnologia cruzada, desde que ambos falem a mesma linguagem de JSON. A API WordPress Rest gera dados no formato JSON, que é compreensível por um grande número de tecnologias da web. JSON é uma representação baseada em texto de objetos JavaScript que contém dados no par chave-valor.

 "amigos": [
      {
        "id": 0,
        "nome": "Harriet Stanley"
      },
      {
        "id": 1,
        "nome": "Benton Odom"
      },
      {
        "id": 2,
        "nome": "Jackie Edwards"
      }
    ],

Hoje, vou demonstrar o poder do WordPress Rest API usando-o com React andWordPress como um CMS sem cabeçalho para meu aplicativo web básico.

O benefício de usar o CMS WordPress sem cabeça

Sendo uma plataforma de código aberto; O WordPress oferece grande flexibilidade para criar qualquer tipo de site. Usar o WordPress como um CMS sem cabeçalho permite que você crie o front-end de seu aplicativo da web usando qualquer tecnologia da web e gerencie seu conteúdo usando um dos CMS mais populares.

Você pode se deparar com a situação em que precisa adicionar um recurso de blog em um aplicativo da web existente criado com React ou Angular. Em vez de codificar o sistema de gerenciamento de conteúdo completo na estrutura nativa; use o WordPress CMS sem cabeça para gerenciar o conteúdo usando a API Rest.

Configurando um Site WordPress

Vamos começar configurando o site WordPress, pois ele funcionará como uma fonte de dados para nosso aplicativo React front-end.

Baixe o arquivo zip do plugin WP-Rest API do git e carregue a pasta zip dentro da pasta de plugins do WordPress. Assim que o arquivo for carregado, ative o plugin. Isso habilitará a API WordPress Rest dentro do seu site WordPress.

Agora, vá para Configurações → Permalinks e selecione Nome da postagem ou Estrutura personalizada.

Como estamos trabalhando com chamadas de API, baixe a extensão do Chrome para Postman . No Postman, insira o URL no seguinte formato:

https://example.com/wp-json/wp/v2/posts

O URL acima irá buscar os dados das postagens dentro do seu site WordPress.

Baixe o plugin de UI de tipo de postagem customizado para criar tipos de postagem customizados. Esta postagem personalizada será exibida quando usarmos o WordPress com React na próxima etapa.

Instale e ative o plugin e vá em frente para adicionar um novo tipo de postagem. Para este tutorial, estarei criando um tipo de postagem personalizado para Livros.

Dentro do Slug de tipo de postagem, digite o nome de sua postagem personalizada.

Certifique-se de que a caixa de seleção Mostrar na API REST esteja definida como verdadeira e que o slug de base da API REST também esteja definido. Isso é obrigatório se você deseja usar o WordPress como CMS sem cabeçalho.

Marque todas as caixas para obter as informações que deseja obter da API REST.

Depois de salvar as alterações, você notará que uma nova opção é preenchida na barra lateral. Clique nele para adicionar o novo livro dentro do seu tipo de postagem personalizado.

Criei meu primeiro livro colocando os dados de amostra, bem como um trecho para minha postagem.

Para verificar se os dados estão disponíveis via API, vá em frente e acesse a URL dentro do Postman.

Agora, o URL deve ser semelhante a https://exampe.com/wp-json/wp/v2/ books

Também podemos adicionar outros campos, como Editor, usando os plug-ins ACF e ACF para RestAPI .

Instale e ative ambos os plug-ins.

Por padrão, o ACF não se comunica com a API Rest do WordPress, portanto, também precisamos baixar o plugin da API ACF REST .

Usando o plug-in de campos personalizados, adicionarei o campo Editor para meus livros.

Certifique-se de selecionar o tipo de postagem desejada na lista. Depois disso, clique em " Publicar ".

Um novo campo é preenchido dentro do meu tipo de postagem personalizado, onde posso definir a editora do meu livro. Isso é tudo o que precisamos fazer para configurar nosso WordPress para enviar nossos dados para nosso aplicativo da web ReactJS.

Primeiros passos com React

O que é ReactJS

React é uma biblioteca JavaScript para a web mantida pelo Facebook e pela comunidade de desenvolvedores. JavaScript é uma ferramenta poderosa para desenvolvimento web e existem várias bibliotecas escritas em JavaScript para melhorar a funcionalidade dos sites. ReactJS é usado principalmente para desenvolver aplicativos de página única que são rápidos, robustos e dinâmicos.

Configurando o aplicativo React

Para construir aplicativos usando React, você precisa ter as seguintes dependências instaladas em seu computador.

• NodeJS e NPM.
• Editor de texto como Sublime ou Visual Studio Code.
• Git para controle de versão (opcional)

Após configurar o ambiente, abra a linha de comando e execute o código a seguir para criar o projeto com ReactJS.

 front-end npx create-react-app

Depois que o aplicativo for criado, faça cd (altere o diretório) para a pasta do aplicativo e digite o seguinte comando para instalar o pacote Axios para chamadas API.

 npm i axios

Agora, abra a pasta dentro do seu editor de texto favorito. Estou usando o Visual Studio Code.

Inicie o aplicativo executando o comando npm start.

Se tudo funcionar corretamente, estamos prontos para construir nosso aplicativo da web com React usando WordPress como CMS headless.

Crie uma nova pasta ' componentes ' dentro da pasta src , e dentro da pasta ' componentes ' crie um novo arquivo ' Books.js '.

Renderizando dados de postagem no ReactJS

Dentro do arquivo Book.js , buscaremos os dados da API Rest do WordPress. Abaixo está o código que solicita o endpoint da API Rest - que no meu caso é ' / books ' - e exibe os dados no formato JSON.

 import React, {Component} de 'react'
importar axios de 'axios';

export class Books extends Component {
   estado = {
       livros: [],
       isLoaded: false
   }

 componentDidMount () {
   axios.get ('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .então (res => this.setState ({
           books: res.data,
           isLoaded: true
       }))
       .catch (err => console.log (err))
   }


   render () {
      console.log (this.state);
       Retorna (
           <div>
              
           </div>
       )
   }
}

exportar livros padrão

O código acima mostrará a matriz de dados no console que é então utilizada dentro do bloco de renderização.

Agora, dentro do arquivo App.js, chame o componente Books , conforme mostrado abaixo.

 import React from 'react';
import './App.css';
importar livros de './components/Books';

function App () {
 Retorna (
   <div className = "App">
    <Livros />
   </div>
 );
}

exportar aplicativo padrão;

App.js é o ponto de entrada de nosso aplicativo da web, portanto, é importante fazer referência aos componentes “Livros” dentro deste arquivo.

Exibindo dados de postagem no ReactJS

Os dados podem ser exibidos adicionando o código dentro do método de renderização.

 render () {
       const {livros, isLoaded} = this.state;
       Retorna (
           <div>
               {books.map (book =>
               <h4> {book.title.rendered} </h4>
               )}
           </div>
       );
   }

Em vez de exibir dados aqui, criaremos um novo componente e o nomearemos ' BookItems.js ', pois quero mantê-lo separado do componente pai.

Altere o método de renderização dentro de Bookk.js para algo como:

 render () {
       const {livros, isLoaded} = this.state;
       Retorna (
           <div>
               {books.map (book =>
               <BookItems key = {book.id} book = {book} />
               )}
           </div>
       );
   }

Agora, precisamos renderizar o componente BookItems.

Dentro de BookItems.js, adicione o seguinte código:

 import React, {Component} de 'react'
importar axios de 'axios';
importar PropTypes de 'prop-types';

export class BookItems extends Component {
 
   render () {
       const {title} = this.props.book;
       Retorna (
           <div>
              <h2> {title.rendered} </h2>
           </div>
       )
   }
}

exportar BookItems padrão

No código acima, estou me referindo ao suporte do livro para obter o título e outras informações.

Observação: certifique-se de fazer referência ao componente BookItems dentro do componente “Livros”.

Minha versão final de BookItems.js se parece com isto:

 import React, {Component} de 'react'
importar PropTypes de 'prop-types';
importar axios de 'axios';
export class BookItems extends Component {

   estado = {
       imgUrl: '',
       autor: '',
       isLoaded: false
   }

   propTypes estáticos = {
       livro: PropTypes.object.isRequired
   }

   componentDidMount () {
       const {feature_media, author} = this.props.book;
       const getImageUrl = axios.get (`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/$ {feature_media}`);
       const getAuthor = axios.get (`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/$ {autor}`);
      
       Promise.all ([getImageUrl, getAuthor]). Então (res => {

           console.log (res);
           this.setState ({
               imgUrl: res [0] .data.media_details.sizes.full.source_url,
               autor: res [1] .data.name,
               isLoaded: true

           });
       });
    }
 
   render () {
       const {título, trecho} = this.props.book;
       const {autor, imgUrl, isLoaded} = this.state;
       Retorna (
           <div>
              <h2> {title.rendered} </h2>
              <img src = {imgUrl} alt = {title.rendered} />
              <strong> {autor} </strong> <br/>
              <div dangerouslySetInnerHTML = {{__ html: excerpt.rendered}}> </div>
           </div>
       )
   }
}

exportar BookItems padrão

E a saída no navegador é semelhante a:

Não é o mais bonito certo? Bem, isso é porque o estilo está fora do escopo deste tutorial.

Empacotando!

Hoje, mostrei como usar o WordPress com React como um CMS sem comando para seu aplicativo da web. O código React também está disponível no Git para você fazer o download. No entanto, não se limita a React. Você também pode experimentar com VueJS, Angular ou qualquer estrutura JavaScript. Existem várias coisas que você pode fazer com a API Rest do WordPress. O céu é o limite, então vá em frente e use o WordPress para seu próximo projeto da web.