Integrare React in un progetto WordPress
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