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

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

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!

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

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

Riferimenti

🙋‍♂️ 🍻

Developer https://github.com/jackcoral89