React and WordPress?!?

1.11.22


I wanted to write about React and WordPress because these two tools are nearly impossible to avoid with modern web development and it still seems that some people aren’t aware that it is possible to combine these two technologies. Not only is it possible but these two together can be quite powerful for developers. There are several ways to combine React and WordPress. The first method I actually mention in a post from back in June when I was exploring content management system options. With the WordPress RESTful API you can use WordPress as a headless CMS which allows for developing an independent React frontend completely outside of the classic WordPress ecosystem.

I briefly mentioned Frontity in that post. Frontity is an open source React framework for WordPress. They make it super easy to connect WordPress to a React frontend, in fact they even offer several themes to bootstrap a site, much like WordPress proper. Since these themes are built with React, there are plenty of advantages over typical WordPress themes. Some of these pre-built themes come with Redux bundled in. These themes, along with developing your own React frontend have a few more advantages like performance and speed which has a positive impact on SEO. More advantages are scalability and unlimited control over the UI. Since WordPress and React seem to both dominate the web right now, I’d say you could bet your NFT collection that Frontity, along with other React frameworks like Next.js and Gatsby combined with WordPress will continue to grow in popularity.

But what if you need to or want to work within the WordPress ecosystem? I have recently experienced the former and then latter. I recently contributed to a project built out within the WordPress ecosystem and after going down the rabbit hole I have resurfaced with a whole new respect and affinity for the WordPress ecosystem. In the back of my mind I kind of thought WordPress was for people who can’t or don’t code and thought I was above WordPress. It turns out that is quite ignorant. To be fair, I was mostly thinking about WordPress.com instead of WordPress.org. While WordPress.com can and certainly is used by people who have never coded and don’t want to start, if you aren’t afraid of a little PHP and know a little bit about web development, it turns out WordPress.org can be a surprisingly powerful, free and fun tool for creating websites and apps. I noticed that some WordPress developers even use PostgreSQL instead of MySQL.

Plugins are part of what makes WordPress so powerful. The WordPress plugin game is so big, it has become its own industry. These plugins are well developed and maintained and at this point you can find one to help you do almost anything. In reality, there are plugins to contradict most of the advantages I even mentioned in the previous paragraph. There are very powerful SEO plugins and I even found a Redux plugin.

An obvious way to incorporate React into the WordPress ecosystem would be through a plugin. The RectPress plugin is an easy way to embed a React app into WordPress. It allows for use of the familiar npx create-react-app and will connect a local development server into a WordPress theme. That is cool because you can see exactly what you are doing before you even run the build. With this method you still utilize the WordPress API or WPGraphQL to get data to and from the React app.

One of the last ways I want to discuss combining React with WordPress takes advantage of the fact that since late 2018, WordPress ships with an abstraction of React. The WordPress 5.0 update included Gutenberg, which is the name for the new block editor. Gutenberg is actually built using React. So, modern WordPress already contains the entire React and ReactDOM libraries. This allows for writing lightweight React code to be used within the WordPress ecosystem in two primary ways. The first is template based, meaning you can include a React theme into the WordPress ecosystem by adding it to the famous functions.php file. This is great for running site wide components like a header or footer. The other method would be to make your own Gutenberg block/plugin using React and then use the block at will. Now that is cool. This option felt like the most exciting and viable option to use React and to fully take advantage of the power of WordPress.

The gif below is me testing this out by making my own Gutenberg block/plugin out of an MUI React slider. The project that I mention earlier specifically asked for a React slider so that is where I started.



I think it is safe to say that these methods of combining React and WordPress offer some exciting possibilities. As with most things of this nature, choosing how to approach this highly depends on the project and development preference. WordPress and React are both highly respectable in their individual own rights and when combined you can create beautiful, custom content and design with the cutting edge modern tools while being able to deliver products that are comfortable and trusted for all types of users and clients from small blogs to large sites with heavy traffic to SaaS projects.