As there are numerous tools available on the market, it can sometimes be hard for programmers to pick the best ones for the tasks they want to accomplish. However, even though an overabundance of options accessible to us can be scary or confusing at times, it is worth knowing which of them are better in given scenarios. A well-thought-out product is advantageous both for its creator and the end-user; it can improve workflow and cost-effectiveness as well as make it more attractive to the customer. It may also turn out that using more than one technology at a time yields better results – and this is what I want to discuss.

In this article I will present the advantages of both React and WordPress and the benefits which combining these technologies can bring to the projects.

What is React?

React (also known as React.js or ReactJS) is an open-source, free JavaScript-based library. It is a framework developed by one of the Facebook (now known as Meta) programmers, Jordan Walke, used for building User Interfaces based on UI components.

Its first release dates back to March 1, 2013, while the latest version is version 18.2.0, released on June 14, 2022.

Why should you use React? It is currently the most popular JavaScript framework, utilized by companies such as Netflix, PayPal and Walmart.

Its main feature is the virtual DOM (Document Object Model). React stores the DOM state in memory; upon detecting a state change, it looks for differences between the virtual and real DOM and updates the changes accordingly.

The second feature is JSX (JavaScript XML). It is an overlay for pure JavaScript that allows us to insert HTML code directly into the file.

The framework itself is also cherished by programmers because of its flexibility, numerous ready-made solutions and huge community surrounding it. It is also considered to be one of the nicest JS libraries.

Applications and websites written in React.js work quickly and cooperate with many other technologies. Building an application in React is like building with blocks, which in our case are called components.

Sample of a simple application:

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

React allows us to create an interesting website which has static code and data, such as images, descriptions or menus.

It is worthwhile for a website or application written by us to have a back-end in which we can add, edit or delete information on our website. Here, many solutions come to our aid, such as node.js, Contentful or WordPress with REST API. It is this last one that I want to discuss in more detail.

What is WordPress?

WordPress is a Content Management System (CMS) written in PHP, created by Automattic Inc. in 2003. Its latest version is 5.9.3 and the beta version 6.0.0 is now available.

About 33% of all websites, which translates to 75 million pages on the web, are based on this system. In Poland, there are thousands of followers and a huge crowd of programmers involved in it.

WordPress was originally created to support blogs. However, it quickly found use as a web development tool. It is employed by many powerful and world-famous companies:

• Mercedes-Benz https://www.mercedes-benz.com/en/

• Coca-Cola https://www.cocacola.fr/fr/home/

• Sony http://blog.us.playstation.com/

It is a CMS with an extensive community and many ready-made solutions (plugins) allowing for an easy and intuitive website creation and administration.

Many people may wonder – why WordPress? The answer is quite simple: it is one of the most intuitive CMS platforms and it offers great possibilities for expansion.

In order to cooperate with React, we need a panel and data that REST API sends us.

What is WP REST API?

API (Application Programming Interface) is software which enables communication with other applications in an orderly and limited way. The API allows for processing and sharing data and messages.

A good example is payment gateways; it is the responsibility of the API to check and verify the data and then change the order status in the store.

We can also use the login function using a social network service; then the API also sends the data needed to authenticate the user.

REST (Representational State Transfer) is the structure of the API architecture. It was designed mainly for efficient data exchange between the client and the server

With the above information, we can create a definition of the WordPress REST API. It is an interface which allows us to interact with a website built on WordPress CMS by downloading and sending JSON objects in order to read, edit, add and remove content from the website.

Using WP REST API, we can build a new interactive interface or use endpoints to transfer the content to a separate application.

WordPress keeps the data; with the use of any technology or programming language, we can make our own independent front-end of the website as well as the post-editing panel.

This means that we can make an Android or iOS application based on data from the WordPress back-end.

WordPress Rest API will return us only JSON in the endpoint, and it depends on us how we use it and in which application.

JSON example:
[
 {
   "id": 157538,
   "date": "2017-07-21T10:30:34",
   "date_gmt": "2017-07-21T17:30:34",
   "guid": {
     "rendered": "https://www.sitepoint.com/?p=157538"
   },
   "modified": "2017-07-23T21:56:35",
   "modified_gmt": "2017-07-24T04:56:35",
   "slug": "why-the-iot-threatens-your-wordpress-site-and-how-to-fix-it",
   "status": "publish",
   "type": "post",
   "link": 
"https://www.sitepoint.com/why-the-iot-threatens-your-wordpress-site-and-how-to-fix-it/",
   "title": {
      "rendered": "Why the IoT Threatens Your WordPress Site (and How to Fix It)"
   },
   "content": {
     ...
   },
   "excerpt": {
     ...
   },
   "author": 72546,
   "featured_media": 157542,
   "comment_status": "open",
   "ping_status": "closed",
   "sticky": false,
   "template": "",
   "format": "standard",
   "meta": [],
   "categories": [
     6132
   ],
   "tags": [
     1798,
     6298
   ],

   }
]


```

We can call this version of WordPress the Headless WP. It is worth providing it with a Custom Fields plugin (I recommend Advance Custom Field) that works with the WordPress REST API.

This version of WordPress does not differ from a regular WP website from the back-end. The whole magic happens at the front-end, as it is not the CMS that returns page views, but the JSON themselves – and they are already supported by React.

The application has modern technology at the front-end as well as an intuitive CMS many people are familiar with, so it is an ideal solution for contemporary websites.

Verdict

As a person who has been in contact with WordPress for 10 years, and who has been enthralled by React for the past 2 years, I think I can answer the question posed in the title of this article. In my opinion, combining React and WordPress is the perfect way to build business card pages, smaller stores, portals or blogs.

At first glance, we can get the same functionality with WordPress itself, but React can provide us with better and much faster performance for users of this application. Combining these two technologies is a solution which does not increase the time needed to build the application itself. Programs that use React are also much more flexible and work better with browsers.

Another thing worth bearing in mind is the fact that nowadays everything happens very quickly, so our website or application should keep up with the pace of affairs.