Introduzione a React per sviluppatori WordPress

Mi sto interessando molto allo sviluppo di blocchi per il nuovo editor WordPress e anche se esistono delle valide alternative in PHP, non sarai mai in grado di offrire la stessa esperienza utente.

I nuovi blocchi si creano in JavaScript, precisamente grazie a wp.element che non è altro che un abstraction layer sopra React.

Questo significa che gli sviluppatori WordPress hanno creato un’interfaccia per utilizzare le funzionalità offerte da questa libreria senza dover rischiare problemi di compatibilità in futuro.

A te alla fine non cambierà molto perché scriverai comunque codice React ?

Quello che voglio fare in questo articolo è introdurti ai concetti principali di questa libreria descrivendo, nel miglior modo possibile, le sue differenze con il linguaggio PHP (che spero tu conosca bene).

Se non ti senti ancora pronto ti consiglio di seguire il nostro corso dedicato al linguaggio PHP o a JavaScript che ti permetteranno di acquisire le nozioni base (e anche qualcosa in più) per comprendere gli esempi successivi.

Pronto?

Bene, iniziamo con la parte interessante dell’articolo!

Che cosa è React e perché sceglierlo

React è una libreria JavaScript nata come un progetto di uno sviluppatore Facebook il cui unico scopo era quello di realizzare qualcosa per semplificare la creazione di interfacce.

Dato che stiamo parlando di Facebook un requisito importante che doveva soddisfare questa libreria era la velocità, lasciami dire che ha completamente raggiunto il suo obiettivo implementando il Virtual DOM.

A differenza di altre librerie o framework JavaScript, React permette di aggiornare le nostre view velocemente.

Considera il Virtual DOM come una sorta di cache che permette di modificare velocemente soltanto i nodi DOM che vengono modificati durante l’esecuzione dell’applicazione.

Se conosci AJAX puoi pensare “hanno scoperto l’acqua calda” ma l’approccio è molto diverso perché al posto di modificare direttamente il DOM di una pagina (approccio AJAX) React modifica la versione virtuale che è mantenuta in memoria e successivamente invia le modifiche al browser.

Anche in questo caso, per approfondire questi concetti ti lascio alla documentazione del progetto.

Cerchiamo invece di rispondere alla domanda: perché sceglierlo?

In tutta onestà in questi ultimi anni io non sapevo che pesci prendere, il mondo JavaScript si evolve a una velocità pazzesca e si leggono costantemente annunci di nuovi framework o librerie che promettono questo o quello.

Vue.js, Angular, Svelte…

Sono soltanto alcune delle soluzioni che sono nate in questi ultimi anni e sono tutte ottime, a seconda degli scopi per i quali vengono utilizzate.

Perché ho scelto React?

A questo punto mi sembra doveroso fare un piccolo chiarimento: quelle che trovi di seguito sono le mie opinioni e non sono affermazioni basate su ricerche e test.

Ti spiego semplicemente quale è stato il processo che mi ha portato a scegliere React come libreria per ampliare le mie conoscenze JavaScript.

Per prima cosa, dato che nutro un forte interesse nei confronti di WordPress e seguo da vicino le sue evoluzioni, ho scelto React perché è stato utilizzato sia per la creazione di Calypso che per il nuovo editor dal quale sto scrivendo questo articolo.

WordPress mi ha spinto a conoscere questa libreria JavaScript, ma ci sono altri aspetti che mi hanno convinto.

Sto imparando React perché è molto richiesto in ambito lavorativo.

Qualche tempo fa ho partecipato al primo meetup di Palermo dedicato a questa libreria e parlando di compensi l’organizzatore ha affermato che un freelance bravo (quindi un Senior) con questa libreria può guadagnare tra i €150 e i €500 ora mentre il dipendente ha un RAL che può variare tra i €40000 e i €65000.

Per raggiungere gli stessi compensi come sviluppatore WordPress (o PHP) bisogna essere ancora più bravi ed avere la fortuna di incontrare il cliente/datore di lavoro che è in grado di apprezzare tali competenze.

Quindi ti ho detto che ho scelto React perché: lo ha scelto WordPress e in genere i compensi sono più alti (se si è bravi).

Ci sono altre motivazioni che mi hanno spinto a prendere questa scelta?

Sì, un paio.

Come ti ho detto prima l’ho scelto perché è veloce ma soprattutto perché è una libreria mantenuta da Facebook quindi, a differenza di altri progetti, non dovrebbe rischiare di essere abbandonata da un giorno all’altro.

Se ti preoccupa che dietro le quinte ci sia Facebook non dovresti farlo.

React è un progetto Open Source quindi se, per chissà quale motivo, Facebook deciderà di non supportarlo molti degli sviluppatori coinvolti potranno forkare il repository e portare avanti lo sviluppo della libreria.

I tempi di jQuery sono finiti!

Che tu scelga React o una qualsiasi altra libreria o framework JavaScript c’è una cosa che desidero che tu porti a casa dalla lettura di questo articolo: jQuery ha fatto il suo tempo, oggi ci sono soluzioni migliori che puoi usare.

Ti dico questo perché al giorno d’oggi JavaScript si è evoluto tantissimo, le arrow function sono soltanto un aspetto dei miglioramenti che ha ottenuto questo linguaggio di programmazione.

Se non vuoi credere alle mie parole ti consiglio di consultare la pagina creata dagli sviluppatori di HubSpot che si intitola potresti non aver bisogno di jQuery. Una bellissima collezione, con un repository che ha ottenuto più di 12.000 stelle, che mostra come sostituire la sintassi e le funzioni di jQuery con approcci 100% JavaScript.

Non è mia intenzione discutere ulteriormente perché non usare jQuery (ci sono i commenti se vuoi approfondire) ma ti basta sapere che su questo blog non vedrai più una snippet di codice pubblicata con questo linguaggio.

Cosa deve sapere uno sviluppatore WordPress per lavorare con React

Eccoci dopo poco più di 1000 parole a esporre le conoscenze che uno sviluppatore WordPress deve avere assolutamente chiare prima di potersi approcciare allo sviluppo in React.

Scusa se mi ci è voluto un po’ di tempo ma ritengo che l’introduzione e le motivazioni della scelta di questa libreria fossero necessarie.

Con i build tool ti semplifichi la vita

Task runner o module bundler forse sono ancora nomi sconosciuti nella tua professione, alla fine hai tutto quello che ti serve per lavorare con WordPress è un server Apache-MySQL-PHP.

Però se desideri utilizzare React (o altre soluzioni moderne) devi assolutamente conoscere questi strumenti.

Abbiamo già pubblicato un articolo dedicato al task runner Gulp.js per usarlo nella compilazione del codice SCSS quindi in questa sezione non affronterò l’argomento e ti rimando all’articolo che ti ho appena presentato.

Passiamo invece al termine module bundler.

Un module bundler è un’applicazione che permette, per prima cosa, di sfruttare i moduli JavaScript che ti consentono di separare il tuo codice.

Nel tempo queste soluzioni sono state estese anche per includere la compilazione dei SCSS (o qualsiasi altra sintassi fornita dai precompilatori CSS), implementare un transpiler, avere il live reloading e un sacco di altre cose fighissime.

Il concetto che sta alla base dei modle bundler viene espresso molto bene dalla homepage di Webpack, una delle soluzioni più famose.

Quindi lo sviluppatore sarà libero di utilizzare qualsiasi approccio per organizzare e scrivere il suo codice e il module bundler verrà configurato per fornire il minor numero possibile di asset statici comprensibili dal browser.

Al momento questo è tutto quello che devi sapere sui task runner e module bundler.

Non voglio approfondire oltre l’argomento perché se non vedi l’ora di iniziare esistono pacchetti npm come create-react-app e create-guten-block (per la creazione di blocchi Gutenberg) che permettono di creare ambienti di sviluppo già configurati.

Tutto quello che scrivi è JavaScript

Una argomento molto usato dagli sviluppatori React è “mi ha aiutato a scrivere un miglior codice JavaScript”.

Questo è vero perché React, non essendo un framework, non reinventa il tuo approccio allo sviluppo. Tutto quello che fa è offrirti un set di funzioni che semplificano il suo approccio, ma alla fine scriverai sempre JavaScript.

Per esempio, quando devi selezionare un elemento nella tua pagina userai document.querySelector() o document.getElementById().

Se devi lavorare con un array puoi utilizzare .map(), .filter(), .reduce() o qualsiasi altro metodo reso disponibile da JavaScript.

Vuoi organizzare meglio il tuo codice?

Utilizzare la sintassi dedicata ai moduli JavaScript è un must con React, anche perché altrimenti dovrai richiamare la libreria in ogni pagina del tuo progetto.

Questi sono soltanto alcuni esempi per aiutarti a capire che tutto quello che scrivi è JavaScript e non ti devi spaventare se appena apri un file React ti sembra di non capirci niente.

Gli approcci Functional Programming e Object Oriented convivono molto spesso tra loro all’interno dei componenti ma, se inizialmente può sembrare strano, basterà qualche giorno di pratica per renderlo una seconda natura.

Dedica del tempo e leggi rigo per rigo quello che succede, se conosci JavaScript non avrai grandi problemi.

Aggancia React alla pagina HTML

Come qualsiasi codice JavaScript, anche React ha bisogno di collegarsi a un elemento presente nel DOM.

L’approccio più semplice per creare un’applicazione React è quello di creare un file App.js dove inserire tutto il codice che sarà gestito per eseguire l’applicazione stessa.

Nel file App.js si definiscono tutte le importazioni necessarie per utilizzare i componenenti che si posizioneranno nella pagina.

Ecco il codice di partenza che ci offre create-react-app:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>La mia applicazione React</h1>
            </div>
        )
    }
}

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

Grazie ai moduli JavaScript questo file ha una struttura molto semplice, anche se fa veramente molto dietro le quinte.

Quella che vedi sopra è la classica dichiarazione di un componente (per la precisione è un class component), una sintassi che vedrai molto spesso in React e ci sono alcuni aspetti che è bene chiarire prima di proseguire.

• in React il metodo render() serve per comporre il componente,
• render() ha sempre un return che restituisce il componente,
• se return restituisce più di una riga si usano le parentesi tonde () perché JavaScript proverà a inserire un ; alla fine del primo rigo,
• il componente <App /> si aggancia all’elemento con ID root grazie al metodo ReactDOM.render().

Può sembrare molto da digerire ora ma con un po’ di pratica la sintassi diventerà una seconda natura e non c’è molto altro che dovrai conoscere per mostrare il tuo componente.

Tutto è un componente

React nasce come una libreria per creare interfacce utente, al suo interno tutto viene definito come un componente.

Senza entrare troppo nel merito e nella distinzione tra User Interface e Business Logic, possiamo dire che React ha anticipato i tempi e rende possibile lavorare con i Web Components anche se la specifica non ha raggiunto una versione stabile.

Anzi a dirla tutta non sappiamo ancora se riusciremo mai ad avere i Web Components interpretati dai nostri browser senza alcun polyfill ma poco importa perché grazie al transpiler che userai durante la scrittura del codice React non ne avrai bisogno perché tutto verrà gestito da JavaScript.

Se non ti è chiaro che cosa sia un componente spero che questo esempio pratico possa esserti di aiuto.

Diciamo che vuoi creare un gruppo di pulsanti, qualcosa come questo:

L’esempio è molto semplice e che un qualsiasi sviluppatore frontend potrebbe realizzarlo in pochi minuti ma è il concetto che sta alla base del termine componente che voglio chiarire in questo momento.

Una volta caricata la libreria di componenti React Material UI quello che dovrai scrivere per ottenere gli stessi elementi è:

<ButtonGroup color="primary" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Gli elementi <ButtonGroup> e <Button> non esistono in HTML ma questa è la killer feature dei Web Components, ognuno può crearsi il componente che desidera!

È possibile farlo perché, in questo caso grazie a React, il nostro componente verrà interpretato da JavaScript e genererà un codice HTML che il browser comprende senza alcun problema.

<div class="">
    <div role="group" class="" aria-label="outlined primary button group">
        <button class="" tabindex="0" type="button">One</button>
        <button class="" tabindex="0" type="button">Two</button>
        <button class="" tabindex="0" type="button">Three</button>
    </div>
</div>

Quello che vedi sopra è una versione semplificata del codice HTML che è stato generato ma come puoi vedere i vantaggi, intesi anche come caratteri scritti, sono molteplici ed è per questo che tutto il web si sta spostando verso l’uso dei componenti.

Sembra HTML ma è JSX

Uno degli aspetti che più rivoluzionari introdotti da React è che permette di scrivere una sintassi molto vicina al classico HTML che tutti quanti conosciamo.

Senza JSX dovresti scrivere React.createElement() ogni volta che desideri creare un componente, invece puoi scrivere una sintassi molto simile a quella HTML che ti renderà più naturale la scrittura del codice.

Facciamo un esempio pratico.

Vuoi realizzare una struttura che contiene una testata e un titolo.

Al posto di usare i due tag HTML <header> e <h1> usiamo due componenti <Header> e <Title>.

Se non fosse stata inventata la sintassi JSX ecco il codice che avrei dovuto scrivere:

React.createElement( Header, null, 
  React.createElement( Title, { variant: "huge", content: "Il mio titolo" } )
);

Già con questo semplicissimo esempio notiamo una cosa, la ripetizione di React.createElement().

Dove c’è una ripetizione c’è sempre il rischio di qualche errore di battitura.

Oltre alla ripetizione il codice risulta anche difficile da leggere e c’è il rischio di utilizzare un sacco di funzioni di callback che ci riporta alla scrittura di codice jQuery ?

Grazie a JSX invece il risultato è il seguente:

<Header>
  <Title variant="huge" content="Il mio titolo" />
</Header>

Come puoi vedere il risultato è molto più semplice da leggere e utilizzare una sintassi che ricorda l’HTML è molto utile.

Al posto di cadere nella trappola delle callback ci basta un carattere di indentazione per definire la gerarchia dei nostri elementi.

Ma se JSX fa solo questo allora non serve neanche. Posso scrivere semplice HTML!

Fosse così avresti completamente ragione, ma non lo è.

JSX è una sintassi apprezzata perché permette di mescolare HTML e JavaScript senza alcun problema. Un po’ come succede nei templating language, basta utilizzare qualche carattere speciale (le parentesi graffe) per dire a React qualcosa come: ferma tutto, all’interno di queste parentesi sto richiamando codice JavaScript.

In esempio molto banale è quello relativo all’uso delle variabili.

Per farlo però devo mostrarti come si dichiara un functional component all’interno di React, se non ti è chiaro ci arriviamo tra poco. Quello che devi fare è focalizzarti sulle parentesi graffe presenti al rigo 7 ?

function App(){
  const tit = "Il mio titolo"
  return (
    <Header>
      <Title 
        variant="huge" 
        content={tit} 
      />
    </Header>
  );
}

Come puoi notare tu stesso io ho inserito gli stessi componenti presentati poco fa ma al rigo 7 ho richiamo il contenuto presente all’interno della variabile con la sintassi {tit}.

La sintassi JSX può fare anche molto di più! Non sarà raro infatti vederla utilizzata per richiamare una funzione {miaFunzione()} oppure per dichiarare operatori ternari.

La cosa fondamentale da tenere sempre a mente è che siamo sempre in un mondo JavaScript e per questo motivo non possiamo, per esempio, impostare una classe con l’attributo class.

class infatti è una parola chiave riservata in JavaScript, si usa per definire le classi. Quindi per definire una classe si usa la via JavaScript con l’attributo className.

Ti ricordo che questo è un articolo introduttivo dove il mio unico interesse è quello di mettere in luce le nozioni fondamentali che uno sviluppatore WordPress dovrà possedere per iniziare a lavorare con React.

Tutti i dati che passiamo a un componente sono props

Già con la distinzione fatta precedentemente con className ti dovrebbe essere suonato un campanello d’allarme, in JSX gli attributi non sono gli stessi che utilizziamo in HTML.

Fermiamoci un momento a pensare a cosa serve un attributo.

Ti è venuto in mente niente?

Un attributo HTML ci permette di passare delle informazioni che personalizzano il contenuto mostrato dall’elemento.

Per esempio, un elemento img non mostrerà niente se non popoliamo l’attributo src.

Ebbene anche in React vengono usati quelli che sembrano attributi ma in realtà si chiamano props.

Le props creano un oggetto contenente tutti gli attributi (e i valori) passati a un componente. Questo consente a React di lavorare più velocemente e a noi sviluppatori di poter utilizzare la sintassi JSX.

Ottieni i dati da una REST API, non collegandoti al database

Quando si parla di React all’interno di WordPress i dati che stiamo elaborando provengono dal database ma non ci stiamo connettendo direttamente ad esso, come in una classica applicazione PHP.

I dati con i quali lavoriamo, per esempio il contenuto di un articolo, non vengono ottenuti come si farebbe con il PHP, non ci connettiamo al server SQL che contiene il database WordPress.

Invece facciamo una chiamata alle REST API WordPress che restituisce un oggetto JSON.

Questo approccio consente un accesso più veloce alle informazioni perché invece di eseguire tutta l’applicazione WordPress la chiamata REST andrà a richiedere soltanto le informazioni necessarie, eseguendo la richiesta più velocemente.

Stiamo parlando di un approccio completamente diverso da quello a cui siamo abituati utilizzando WP_Query, un approccio che ha ottenuto un grande interesse durante gli ultimi anni e che ti permetterà di acquisire delle conoscenze che potrai spendere anche al di fuori di WordPress.

{
  "id":23431,
  "date":"2020-02-10T08:14:00",
  "date_gmt":"2020-02-10T07:14:00",
  "guid":{
    "rendered":"https:\/\/skillsandmore.org\/?p=23431"
  },
  "modified":"2020-02-08T11:22:26",
  "modified_gmt":"2020-02-08T10:22:26",
  "slug":"comprendi-specificita-dei-css",
  "status":"publish",
  "type":"post",
  "link":"https:\/\/skillsandmore.org\/comprendi-specificita-dei-css\/",
  "title":{
    "rendered":"Comprendi finalmente la specificit\u00e0 dei CSS"
  },
  "content":{
    "rendered":"...",
    "protected":false
  },
  "excerpt":{
    "rendered":"...",
    "protected":false
  },
  "author":4,
  "featured_media":23470,
  "comment_status":"open",
  "ping_status":"open",
  "sticky":false,
  "template":"",
  "format":"standard",
  "meta":{ ... },
  "categories":[19],
  "tags":[],
  "_links":{ ... }
}

Questa è la risposta JSON che puoi ottenere quando consulti le REST API di SkillsAndMore all’indirizzo https://skillsandmore.org/wp-json/wp/v2/posts/23431.

La risposta contiene tutte le informazioni di cui hai bisogno per creare il tuo componente articolo tramite React (o qualsiasi altro approccio in grado di consultare un oggetto JSON).

Oltre alla diversa risposta che si ottiene, in PHP si avrebbe un array o un oggetto, bisogna anche capire che per ottenere queste informazioni non è necessario accedere al database.

WordPress rende le cose molto semplici perché la connessione al database avviene ad ogni caricamento del sito grazie alle credenziali che salviamo in wp-config.php ma con le REST API la musica cambia!

Le REST API dividono i tipi di richieste che vengono effettuate sul server e, se non necessario, non richiedono neanche l’accesso al database velocizzando ulteriormente le nostre operazioni.

Conclusioni

All’interno di questo articolo hai scoperto le basi per lavorare con React e le principali differenze se provieni dall’universo WordPress.

Come puoi immaginarti le conoscenze da acquisire per padroneggiare questa libreria sono molte e se ancora non lo sai sto già lavorando a un corso dedicato interamente a questa libreria.

Se sei interessato e vuoi approfondire ulteriormente il linguaggio JavaScript e la libreria React non puoi fare a meno che iscriverti alla nostra newsletter, non mandiamo SPAM ma email settimanali ricche di spunti ?