HomeEntertainmentHow to Use WordPress with React to Build a Modern Web App

How to Use WordPress with React to Build a Modern Web App

What is WordPress REST API?

Although WordPress does not require any introduction, let us take a deeper look at the recently released WP REST API. Let’s get some definitions out of the way before we start down the path of its evolution: A collection of standards for creating software applications is known as an API. It organizes the way different components of an application communicate with one other and governs how information is transferred across applications. A good API makes software development easy by offering all of the essential components. More information about APIs may be found here.

Headless WordPress Development and REST is an architectural style that establishes limitations on how applications are developed. Web services that meet this design are referred to be RESTful APIs or simply REST APIs. JSON (JavaScript Object Notation) is a data structure that can be read by a wide range of applications. It facilitates interactions between, for example, WordPress and any type of app. These principles have been used to construct the WordPress JSON REST API since WordPress 4.7. It enables a decoupled approach, effectively separating data (back) and views (front).

What does it mean for users?

WordPress may now be used as a headless content management system. Because the front-end of WordPress does not have to be “WordPress,” PHP-generated views open up a whole new universe of possibilities for developers. To construct websites and apps, a growing variety of frontend frameworks may now be connected to a WordPress backend.

Working on a tiny demo by ourselves means we still have to deal with it in order to get WordPress up and running. Even though all the data is maintained with WordPress on the backend, frontend developers on a larger project with a larger team might work in the language of their choosing (without ever touching PHP). Right here, JSON wizardry is at work.

WordPress & React: REST API

Querying WordPress data

To begin, you must have a WordPress website up and running. We are not going to go over the entire “installing WordPress” section because it is a little out of scope. Before proceeding any further, we will presume you already have a WordPress installation running on your preferred web server or link you to the WordPress documentation. We immediately built one with Docker Compose for local development and tweaked wp-config.php to make the demo work on Heroku as well.

Querying WP REST API from React

Run the following command in a terminal to get started with React quickly:

npx create-react-app react-app

Note that Node.js includes npx, which allows you to run commands without having to install them globally. Then install material-UI (cd react-app, then npm install @material-ui/core) to the project. Add the Posts component to query the posts data: You will see that we utilized two of React’s Hooks, useEffect and state. First, useState is used to define and update the array of posts. When the component is mounted, the use effect allows the fetch code to run. 

Finally, you can “map” over the posts array and return components for each one to show a list of posts. However, there are a couple of peculiarities in the way useEffect operates: Because the callback can not return a promise, an async function can’t be supplied to use effect directly. To have use effect executed just once, an empty array must be supplied to it. This informs React that the impact is independent of any value.

Adding custom post type to WP Rest API

Let’s add a new data type now that we have some basic React code to query WP’s REST API! Many WP functions may be used to register what’s required. All of this will be put into a new PHP file called my plugin.php at wp-content/plugins/my plugin.php. We opted to develop a course type to represent an online course from a learning platform for the sake of this presentation.

We could never cover all of the possibilities for developing custom post kinds. You might use the WP docs or a generator to accomplish this. Whichever method you want, here’s a simplified version of my course type definition; we’ll go over the details later: Because generate course type is linked to init via the add action call, it will be called when WP starts up. The majority of WordPress modifications are linked to activities like this.

The custom type is registered using the register post type in that function. This is the setting that controls how the type is handled in WP, both in the admin and through the REST API. The key options are shown in rest and rest base, which set the URL path for courses to be retrieved through the REST API. /wp-json/wp/v2/courses, As a result, the plugin may now be activated in the WordPress admin area, and courses can subsequently be added.

Further customizations

We recognize that most use cases will be more complicated than this, but it lays the groundwork for a WordPress and React-powered web project. It also aids our understanding of the WordPress REST API. To provide some variety, I made these courses available for purchase to signed-in users. As a result, the API must offer a pricing field. There are two methods for doing so: Use post meta: doing it from the perspective of a plugin is cleaner, but it takes a little more work to develop the meta box for modifying these data.

Custom fields can be added straight from the editor, but the REST API will need to be tweaked to expose them. It will be immediately exposed to the REST API if the show in rest is set to true. Alternatively, you may use the register rest field: to expose custom fields built-in the WP admin interface to the REST API. We specify the get callback for the price field here, then we retrieve and format that information from the post meta in that callback. The REST API delivers a payload when you query it.

Must Read