Use react with WordPress

Every developer and their dog have something to say about WordPress, and it’s not always flattering. Far from it. However, even its most avid detractors are forced to take notice of this feature, because it has already transformed the way we use the popular CMS.

WordPress REST API is a huge step forward for frontend developers looking to combine the power of JavaScript frameworks like React (or Vue.js) with WordPress.

This is exactly what I want to do today with this demo of the WordPress REST API in the work.

I’ll use WordPress as a backend, and the REST API to feed data into a React app.

More precisely, you’ll learn how to:

  • Access the WP REST API from your frontend
  • Add a custom post type and expose it to the API
  • Build a React app backed by this API
  • Handle React Hooks (and create a custom one)

Before we start, let’s see what is the REST API for WordPress and why you should care about it.

What is WordPress REST API?

WordPress itself doesn’t need any introduction, but let’s take a closer look at the recent WP REST API. Before we start sliding down the road of its evolution, let’s get some definitions out of the way:

An API (Application Program Interface) is a set of protocols for building software applications. It defines the way information is shared between programs and structures the way different components of an application will interact with each other. A good API makes for easier program development by providing all the necessary pieces.

REST (Representational State Transfer) is an architectural style defining constraints on the way programs are made. When this architecture is met by web services we called them RESTful APIs or, simply, REST APIs.

JSON (JavaScript Object Notation) is a format for structuring data so that a large number of applications can read it. It makes interactions between something like, say, WordPress, and any kind of app convenient.

Since WordPress 4.7, these concepts have been applied to create the WordPress JSON REST API. It allows for a decoupled approach, effectively separating data (back) from views (front).

WordPress can now be used as a headless CMS.

This offers a whole new world of possibilities for developers, as the frontend of WordPress doesn’t need to be “WordPress”—PHP-generated views. The ever-growing numbers of frontend frameworks can now be hooked up to a WordPress backend to develop websites and applications.

When it comes to WP REST API, benefits abound.

Don’t only take my word for it, developers already using it are thrilled of this paradigm shift:

“I’ve been able to forget about some of the weaker aspects of WordPress and take advantage of some of its better features — such as revisions, a simple editing interface, and familiarity. I can then use any frontend framework to consume the REST API, and display the content in the form I choose, taking advantage of the great features of those JavaScript frameworks, without the hassle of WordPress theming.”

Working alone on a small demo means that I still have to deal with it to get WordPress running. On a larger project with a bigger team though, frontend developers could work in the language of their choice (without ever touching PHP) even if all the data is managed with WordPress on the backend. JSON magic at work right here.

Looking for alternatives? We’ve listed a load of headless solutions that we’ve put to the test in other technical tutorials.

Easier applications & using React on a headless WordPress

What’s truly awesome is that we can end the long-running debate of traditional CMSs vs. modern web development tools like JS frameworks. We can now use the best aspects of both worlds and make them work together beautifully.

WordPress REST API makes it easier to connect to apps. A custom looking mobile or single-page app can now more easily than ever not only read WordPress data, but also create, edit and delete that data.

Many have started to use WordPress in “weird places”, as in applications where it would have been a pain to work with a few years ago.

As for us? We chose React for this demo because, well, it’s React. When we wrote the first version of this post, we still had to justify this choice, but it has since gotten so popular that it simply is the use case that will reach the most devs out there.

Plus, it is more than ever one of the best frameworks out there: flexible & reusable component system, virtual DOM, efficient workflow with JSX, etc.

Oh, and added more recently: React Hooks, which I’ll use in the demo below.

Also, using WP REST API with a React frontend you can put together a full JAMstack, the which I’m always more than willing.

Leave a Reply

avatar
  Subscribe  
Notify of