React JS para usuários do WordPress: uma introdução básica

Por mais de 15 anos, o WordPress tem sido a solução CMS mais popular e completa que permite construir qualquer coisa, desde um portfólio de uma página até uma plataforma de comércio eletrônico completa. WordPress usa PHP para toda a sua infraestrutura de back-end, como atualizações, APIs, auth, camada de banco de dados e a maior parte do front-end. No entanto, como outras estruturas populares, o WordPress também foi forçado a evoluir nos últimos tempos.

Dado o potencial crescente e o poder dos aplicativos JavaScript para web, bem como aplicativos móveis nativos e de desktop, a API WP REST tenta preencher a lacuna entre o legado do núcleo do PHP do WordPress e a ascensão do JavaScript. Eu acredito que este é um grande passo para o WordPress por dois motivos:

1. Os sites WP existentes podem usar React / Vue ou outra biblioteca de front-end para criar uma melhor experiência de IU.
2. Por outro lado, os desenvolvedores da Web obtêm um CMS sem cabeça padrão da indústria que pode ser facilmente integrado com a pilha de sua escolha.

Essa é uma situação ganha-ganha para todos. Neste artigo, vamos concentrar nossa energia na construção de um front-end React para o back-end do WordPress. Mas primeiro, vamos dar uma olhada na API REST do WordPress.

Noções básicas da API REST do WordPress

O desenvolvimento da API WP REST começou há alguns anos e foi inicialmente projetado como um plugin de recurso autônomo. WordPress v4.4, codinome 'Clifford', introduziu a infraestrutura real da API REST no núcleo do WordPress. Os endpoints reais apareceram no WordPress v4.7, codinome 'Vaughan'. A API WP permite que você use o WordPress como um CMS sem cabeça que é fácil de usar, estável e compatível com JSON.

JSON

JSON é o formato preferido se você pretende integrar o WordPress com uma pilha de JavaScript. JSON é semelhante ao XML no sentido de que nos dá a capacidade de transferir dados com eficiência usando uma sintaxe muito legível.

JSON é na verdade uma string que compreende uma representação baseada em texto de um objeto JavaScript. Ele armazena dados em um conjunto de pares de valores-chave. Um exemplo simples de JSON de uma postagem WP pode ter a seguinte aparência -

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

Uma resposta JSON completa usando a API WP REST geralmente inclui informações adicionais sobre a postagem, como metadados. Você tem tudo o que precisa para criar um tema de front-end ou um plug-in para seu aplicativo.

Os pontos finais

Os endpoints do WordPress são muito acessíveis ao público. Se você estiver executando a versão mais recente do WordPress, basta anexar / wp-json / wp / v2 ao final da URL. Por exemplo, você pode acessar os pontos de extremidade básicos em 127.0.0.1/wp-json/wp/v2 se tiver configurado uma instância do WordPress em seu host local. Se você quiser embelezar a saída, pode usar uma extensão do visualizador JSON que faz o JSON parecer bonito em seu navegador.

Os dados que estão sendo exibidos na tela são essencialmente o conteúdo, bem como as metainformações no formato JSON. O que você fez aqui foi definir uma rota e pediu ao seu navegador para buscar os dados para você.

O que queremos dizer com rota? Uma rota é um URL mapeado para um método específico. O núcleo do WordPress lê a rota e entende que cada '/' representa um caminho ou parâmetro específico que precisa ser seguido.

Por exemplo, um endpoint pode ser '/ wp-json / wp / v2 / posts / 1' , onde você está solicitando uma postagem com um id equivalente a 1. APIs do WordPress são úteis porque são muito extensas. Isso se traduz na capacidade de pegar qualquer dado do seu site e transformá-lo em um terminal. Quase todas as funcionalidades básicas do WordPress são suportadas e todos os recursos futuros também serão suportados. Aqui está uma lista de APIs do WordPress com suporte no momento em que este tutorial foi escrito:

Os desenvolvedores de temas, bem como os desenvolvedores de plug-ins, podem criar terminais personalizados para seus aplicativos. Se você deseja verificar todos os terminais diferentes disponíveis, você pode baixar um aplicativo como o Postman. Isso fornecerá a você uma GUI feita especialmente para explorar APIs. Além disso, você pode fazer chamadas de API diretamente para aplicativos de terceiros sem ter que depender de plug-ins.

Vamos dar um exemplo. Carregar arquivos e manter várias versões deles é um requisito integral para qualquer aplicativo da web moderno. Isso é particularmente verdadeiro no caso de arquivos de mídia. No WordPress, há uma abundância de plug-ins disponíveis que podem fazer isso por você; no entanto, pode ser necessário fazer chamadas para o servidor WordPress para usá-los.

Com a API WP, a lógica de gerenciamento de mídia pode ser abstraída do WordPress. Você pode fazer todas as chamadas de API de terceiros diretamente do front-end, o que é ótimo em termos de separação de interesses. Você pode usar uma biblioteca como a Cloudinary para manipular as imagens e outros arquivos de mídia instantaneamente e, em seguida, enviá-los para a nuvem. Depois de carregado, o URL da imagem pode ser armazenado no backend do WP. As opções são infinitas e você pode combinar as peças da maneira que achar melhor.

Vamos agora ver como conectar o back-end do WordPress ao React.

Primeiros passos com React

React é uma biblioteca de front-end declarativa para construir interfaces de usuário e aplicativos interativos na web. Com o React, você pode compor pedaços menores independentes de código reutilizável, conhecidos como componentes. Vamos criar nosso primeiro componente criando um projeto React.

A maneira mais popular de criar um projeto React é executando create-react-app. CRA oferece um ambiente confortável para aprender React e é a melhor maneira de começar a construir um novo aplicativo de página única se você for um iniciante. Ele configura seu ambiente de desenvolvimento para que você possa usar os recursos JavaScript mais recentes, como ES6 e webpack. Além disso, o create-react-app fornece uma boa experiência de desenvolvedor e otimiza seu aplicativo para produção.

Você precisará ter Node> = 8.xe npm> = 5.2 em sua máquina. Para criar um projeto, execute os seguintes comandos:


npx create-react-app wp-react-demo


O comando acima cria um modelo padrão para nosso aplicativo react, que chamamos de wp-react-demo .


cd wp-react-demo
npm start


Se tudo correr bem, ele deve ser capaz de servir o aplicativo recém-criado em um servidor de desenvolvimento em http: // localhost: 3000 /.

Se você está curioso para ver a estrutura de diretórios gerada por create-react-app, esta é a aparência:

.
├── 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
└── yarn.lock


O diretório público contém todos os ativos necessários para iniciar o aplicativo. O diretório src compreende todos os arquivos JavaScript nos quais estaremos trabalhando e você gastará muito do seu tempo lá.

Quando você visita localhost: 3000, o arquivo index.html é carregado. Se você abrir o arquivo public / index.html, não há muito lá. Mas você encontrará esta linha em algum lugar no meio:

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

Esse é o ponto de partida onde o React renderiza a árvore de componentes na raiz do aplicativo.

O que isso significa? Vá para o diretório src e abra index.js .

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

O React tenta encontrar um elemento com id "root" no documento e então injeta o componente na raiz. Na realidade, o componente App é renderizado e é daí que vem o logotipo giratório do React. Você pode verificar isso abrindo o arquivo src / App.js.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

Esta é basicamente a aparência de um componente. Cada componente renderiza uma parte de sua IU. Você pode compor um componente dentro de outro e é assim que obtém uma estrutura de árvore de componentes como esta:

Se você está se perguntando por que podemos usar HTML dentro de render (), essa é a mágica do JSX. JSX é uma extensão de sintaxe para JavaScript e permite usar HTML simples em um arquivo JavaScript. Você pode ler mais sobre isso nos documentos oficiais.

Vou excluir todo o conteúdo HTML e, em seguida, substituí-lo por um

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';