Integrare React in un progetto WordPress

Giacomo Corallini

Dec 30, 2020·3 min read

Stessa piattaforma (WordPress 💙), progetti diversi, nuove sfide, nuovi problemi, nuove soluzioni! D’altra parte questo è il lavoro di noi sviluppatori. 😎

Di recente, per un cliente che lavora nel settore Agro-Alimentare, mi è stato chiesto di mettere in piedi una sorta di configuratore per container fisici. Senza entrare troppo nel dettaglio del progetto lascio un link di riferimento per chi volesse vederlo in azione.

L’idea era quella di fornire all’utente finale un esperienza di navigazione senza refresh di pagina e visti i trends del momento nello sviluppo front-end e considerando che React viene già usato in Wordpress per l’editor Gutenberg la scelta è stata piuttosto immediata!

Per questa breve guida (ma non troppo 🤓) faccio riferimento a uno start-theme che ho scritto e uso come template per progetti custom su WordPress.

Struttura del tema

Metterò solamente i file che ci interessano, per vedere l’intera architettura clicca qui!

theme-name/
  └── package.json
  └── webpack.config.js
  └── page-templates/
  │     └── my-component-template.php
  └── public/
  └── src/
      └── app/
          └── my-component/
              └── App.jsx
              └── my-component.js
              └── my-component.scss

File webpack

Non mi dilungherò troppo nella spiegazione di questo file (ci vorrebbe quasi un articolo a parte 😅) se non per il fatto di aver usato il plugin browser-sync-webpack-plugin che consiglio vivamente quando dobbiamo aggiornare spesso la UI.

Spesso capita di vedere questo file splittato in due, ovvero un file per la modalità di sviluppo (es. webpack.dev.js) e uno per la modalità di produzione (es. webpack.prod.js).

Ho preferito invece usare un unico file e passare nei rispettivi script i flag --env=dev e —-env=prod:

Hello World React! ⚡

C️ome prima cosa creiamo una cartella my-component/ in /src/app/ che sarà il contenitore dei nostri file necessari all’applicazione React. Successivamente creiamo il file my-component.js. Sfruttiamo quindi il metodo ReactDOM.render() che renderizzerà un elemento React nel DOM, il file sarà qualcosa di simile a questo:

A questo punto siamo pronti per creare il nostro primo componente in React, lo chiameremo App.jsx e lo passiamo in input come element nel metodo render().

File di template WordPress

Nella cartella dedicata ai file di template WordPress creaimo un file my-component-template.php, in questo caso ho utilizzato una cartella per contenere tutti i file custom del tema, page-templates/.

Conterrà quindi l’id target del container dell’applicazione React e il tag script che punta direttamente al file js generato da webpack nella cartella /public.
Il metodo get_template_directory_uri() ritorna il percorso di root del tema corrente.

Webpack farà il resto

Non ci resta che avviare Webpack, apriamo il terminale, spostiamoci nella root del tema e serviamoci quindi dello script $ npm run dev per la modalità di sviluppo. Se tutto è andato per il verso giusto (capita di rado 😅) browser-sync-webpack-plugin aprirà per noi il browser in localhost:3000.

Riferimenti

Repo starter-theme: https://github.com/jackcoral89/wp__webPack
React: https://reactjs.org
Browser Sync: https://browsersync.io
Configuratore: https://www.selfglobe.com/prodotti/configuratore

🙋‍♂️ 🍻