React JS per gli utenti di WordPress: un'introduzione di base

Da oltre 15 anni, WordPress è la soluzione CMS più popolare e completa che ti consente di creare qualsiasi cosa, da un portfolio di una sola pagina a una piattaforma di e-commerce a tutti gli effetti. WordPress utilizza PHP per tutta la sua infrastruttura di backend come aggiornamenti, API, autenticazione, livello DB e la maggior parte del frontend. Tuttavia, come altri framework popolari, anche WordPress è stato costretto ad evolversi negli ultimi tempi.

Dato il crescente potenziale e la potenza delle applicazioni JavaScript per il Web, nonché delle applicazioni desktop e mobili native, l'API REST di WP tenta di colmare il divario tra l'eredità del core PHP di WordPress e l'ascesa di JavaScript. Credo che questo sia un enorme passo avanti per WordPress per due motivi:

1. I siti Web WP esistenti possono utilizzare React/Vue o un'altra libreria frontend per creare una migliore esperienza dell'interfaccia utente.
2. Al contrario, gli sviluppatori web ottengono un CMS headless standard del settore che può essere facilmente integrato con lo stack di loro scelta.

Questa è una situazione vantaggiosa per tutti. In questo articolo, concentreremo le nostre energie sulla creazione di un frontend React per il backend di WordPress. Ma prima, diamo un'occhiata all'API REST di WordPress.

Nozioni di base sull'API REST di WordPress

Lo sviluppo dell'API REST di WP è iniziato alcuni anni fa ed è stato inizialmente progettato come plug-in di funzionalità autonomo. WordPress v4.4, nome in codice "Clifford", ha introdotto l'attuale infrastruttura dell'API REST nel nucleo di WordPress. Gli endpoint effettivi sono apparsi in WordPress v4.7, nome in codice "Vaughan". L'API WP ti consente di utilizzare WordPress come un CMS headless facile da usare, stabile e compatibile con JSON.

JSON

JSON è il formato preferito se intendi integrare WordPress con uno stack JavaScript. JSON è simile a XML in quanto ci dà la possibilità di trasferire in modo efficiente i dati utilizzando una sintassi molto leggibile.

JSON è in realtà una stringa che comprende una rappresentazione testuale di un oggetto JavaScript. Memorizza i dati in una serie di coppie chiave-valore. Un semplice esempio JSON di un post WP può assomigliare a questo:

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

Una risposta JSON completa che utilizza l'API REST di WP di solito include informazioni aggiuntive relative al post, come i metadati. Hai tutto il necessario per creare un tema front-end o un plug-in per la tua applicazione.

I punti finali

Gli endpoint di WordPress sono molto accessibili al pubblico. Se stai utilizzando l'ultima versione di WordPress, devi semplicemente aggiungere /wp-json/wp/v2 alla fine dell'URL. Ad esempio, puoi accedere agli endpoint di base su 127.0.0.1/wp-json/wp/v2 se hai configurato un'istanza di WordPress nel tuo host locale. Se vuoi abbellire l'output, puoi utilizzare un'estensione del visualizzatore JSON che rende il JSON bello sul tuo browser.

I dati che vengono visualizzati sullo schermo sono essenzialmente il contenuto e le meta informazioni in formato JSON. Quello che hai fatto qui è definire un percorso e chiedere al tuo browser di recuperare i dati per te.

Cosa intendiamo per percorso? Un percorso è un URL mappato a un metodo particolare. Il core di WordPress legge il percorso e comprende che ogni "/" rappresenta un percorso o un parametro specifico che deve essere seguito.

Ad esempio, un endpoint può essere '/wp-json/wp/v2/posts/1' , dove stai richiedendo un post con un id equivalente a 1. Le API di WordPress sono utili perché sono piuttosto estese. Questo si traduce nella capacità di prendere qualsiasi dato dal tuo sito web e trasformarlo in un endpoint. Sono supportate quasi tutte le funzionalità principali di WordPress e saranno supportate anche tutte le funzionalità imminenti. Ecco un elenco delle API di WordPress supportate al momento della stesura di questo tutorial:

Gli sviluppatori di temi, così come gli sviluppatori di plugin, possono creare endpoint personalizzati per la loro applicazione. Se vuoi controllare tutti i diversi endpoint disponibili, puoi scaricare un'applicazione come Postman. Questo ti fornirà una GUI creata appositamente per esplorare le API. Inoltre, puoi effettuare chiamate API direttamente ad app di terze parti senza dover fare affidamento su plug-in.

Facciamo un esempio. Il caricamento di file e il mantenimento di più versioni di esso è un requisito fondamentale per qualsiasi applicazione Web moderna. Ciò è particolarmente vero nel caso dei file multimediali. In WordPress, c'è un'abbondanza di plugin disponibili che possono farlo per te; tuttavia, potrebbe essere necessario effettuare chiamate al server WordPress per utilizzarli.

Con l'API WP, la logica di gestione dei media può essere sottratta a WordPress. Puoi effettuare tutte le chiamate API di terze parti direttamente dal frontend, il che è ottimo in termini di separazione delle preoccupazioni. Puoi utilizzare una libreria come Cloudinary per manipolare le immagini e altri file multimediali al volo e quindi caricarli sul cloud. Una volta caricato, l'URL dell'immagine può essere archiviato nel backend di WP. Le opzioni sono infinite e puoi combinare i pezzi insieme come meglio credi.

Vediamo ora come connettere il backend di WordPress con React.

Iniziare con React

React è una libreria dichiarativa front-end per la creazione di interfacce utente e applicazioni interattive sul web. Con React, puoi comporre pezzi indipendenti più piccoli di codice riutilizzabile noti come componenti. Creiamo il nostro primo componente creando un progetto React.

Il modo più popolare per creare un progetto React è eseguire create-react-app. CRA offre un ambiente confortevole per l'apprendimento di React ed è il modo migliore per iniziare a creare una nuova applicazione a pagina singola se sei un principiante. Configura il tuo ambiente di sviluppo in modo che tu possa utilizzare le ultime funzionalità JavaScript come ES6 e webpack. Inoltre, create-react-app offre una piacevole esperienza di sviluppo e ottimizza la tua app per la produzione.

Dovrai avere Node >= 8.x e npm >= 5.2 sulla tua macchina. Per creare un progetto, esegui i seguenti comandi:


npx create-react-app wp-react-demo


Il comando precedente crea un modello standard per la nostra applicazione react che abbiamo chiamato wp-react-demo .


cd wp-react-demo
npm start


Se tutto va bene, dovrebbe essere in grado di servire l'applicazione appena creata su un server di sviluppo all'indirizzo http://localhost:3000/.

Se sei curioso di vedere la struttura della directory generata da create-react-app, ecco come appare:

.
├── 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


La directory pubblica contiene tutte le risorse necessarie per avviare l'applicazione. La directory src comprende tutti i file JavaScript su cui lavoreremo e trascorrerai molto tempo lì.

Quando visiti localhost:3000, il file index.html viene caricato. Se apri il file public/index.html, non c'è molto. Ma troverai questa riga da qualche parte nel mezzo:

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

Questo è il punto di partenza in cui React esegue il rendering dell'albero dei componenti nella radice dell'applicazione.

Che cosa significa? Vai alla directory src e apri index.js .

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

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

React prova a trovare un elemento con id "root" nel documento e poi inietta il componente nella radice. In realtà, il componente App viene renderizzato ed è da lì che proviene il logo rotante di React. Puoi verificarlo aprendo il file 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;

Questo è fondamentalmente l'aspetto di un componente. Ogni componente esegue il rendering di una parte dell'interfaccia utente. Puoi comporre un componente all'interno di un altro ed è così che ottieni una struttura ad albero dei componenti come questa:

Se ti stai chiedendo perché siamo in grado di utilizzare HTML all'interno di render(), questa è la magia di JSX. JSX è un'estensione della sintassi per JavaScript e consente di utilizzare HTML semplice in un file JavaScript. Puoi leggere di più a riguardo nei documenti ufficiali.

Cancellerò tutto il contenuto HTML e poi lo sostituirò con a

<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';