In anticipation to start using some React.js components on Mapertunity it was necessary to upgrade the backend of Mapertunity to at least wordpress version 5.0.

But upgrades are prone to disaster so prior to the wp upgrade I backed up the entire site including the MySQL database tables, structures and relationships as well as all the data in each table.

I also used a sitewide backup tool and backed the whole site using a secondary method.

I also backed up all the source code and I have all that safely locked away in an offsite offline vault.

So the backup went ok and I felt safe moving to the next part of the upgrade.

The next step was to do the wordpress upgrade.

Luckily that was just a button push to do the upgrade.

To my great surprise and relief, the upgrade went without a hitch and Mapertunity is now live on version 5.4.0.

I have been getting myself up to speed on React.js and Node.js recently and was wondering if we can use React components and it’s component type framework on a wordpress based site?

The answer I found out was Yes. We can use react on a wordpress site but only if we upgrade to wordpress version 5.0 or later.

The reason version 5.0 is important is because React.js is now a built in native library that just ships with wordpress version 5.0 or later.

Yay, I don’t have to install a new library just to start using React.js in wordpress. It’s now built in. Woo hoo.

However, the template page programming model is a new paradigm and I need to use npx to set up the default page template to bridge the gap between the old wordpress world and the react.js component and rendering framework.

There is another reason I wanted to start working with React.js and the reason is, the other main platform I work with, Hubspot, is now also using react compents and I need to stay ahead of the curve. 

The new react/wordpress template pages all look the same to me. The header and page footer page include statements look the same and the Loop looks about the same.

The only thing new is to include the Root <div> as the main component of the page.

So now we are ready to start introducing a new technology stack to Mapertunity. Hopefully these new react tools will help us improve the user experience as well as introduce new site capabilities.

Let’s see how it goes.

I will first of course continue to set up offline prototype pages to test out new ideas before I integrate the changes with production and expose them to the world.

Doug Ayers

Mapertunity.com, Lead Developer (Psst, I am the only developer so far)