Headless WordPress and the REST API

Recently I’ve spent a fair amount of time building up React websites using WordPress as the data source. This has been a very interesting period of learning for me, coming from a PHP background and as such, I’m going to write down my thoughts on the process in the hope that it can help others approaching this task! 

Why go headless?

In my case, the reason for going headless was that a client we were working with wanted a progressive web app (PWA) rather than a standard website. The site had to be used often by employees and they wanted it to be available when offline also. The PWA would have to be written in some sort of JavaScript framework but we needed to decide on a data source. WordPress as a headless CMS made perfect sense to me. It gave the clients the same admin interface they were used to, sped up the development time of the backend significantly and already had a functioning API ?.

Going headless also has other benefits. It allows us to really speed up the site, by quickening the perceived page load time. It allows us to hide the admin area away from prying eyes and it means we get to separate the backend and front end, with frontend devs not having to worry about learning WordPress, just learning how to consume the API.

Why React?

Realistically, I think this could have been any JS framework, but for myself, I wanted to learn to work with React as it seems to be used more and more in the WordPress ecosystem. Therefore, this was a bit of a selfish choice, not coming from, “What is the best thing to use on the front end”, but more so, “I want to learn this framework”.

That said, I can’t complain at all about choosing React and since working with it more recently it’s really grown on me. The ability to break everything down into re-usable components makes me happy and seems to stick with SOLID principles that I was taught when learning PHP.

So what’s the full stack?

This is the stack we ended up using.

Backend

• WordPress
• Gutenberg Plugin
• Advanced Custom Fields Pro
• ACF to REST API
• WP-REST-API V2 Menus
• A bunch of custom functionality plugins

Frontend

• React (via Create React App)
• Redux (for state management)
• Repress (A great helper for pulling from the WP API, by Human Made)
• React Router
• Some other packages for functionality.

Out of all the front end packages, I have to say that Repress is an absolute lifesaver and makes working with the WP REST API a piece of cake. It connects into your Redux store and allows you to dispatch actions which are pre-routed to the WP API, it also handles storing them in a sensible way too.

Tutorials I found helpful.

I won’t link you to a list of the documentation sites for each thing I used, but below are some general tutorials I was sent or that I found along the way that proved to be an amazing help:

JavaScript tutorials

Whilst I’ve worked a lot with JavaScript, starting with React really pushed me to learn new best practices. I’d not played with an awful lot of ES6 and some of the new ideas took a bit of getting used to (I’m looking at you, spread and destructuring ?) This course by Wes Bos is amazing at introducing you to ES6 concepts and functions in understandable ways and he uses real-life examples which makes it so much easier to follow along. This course is well worth the money!
https://es6.io/

React tutorials

Not to kiss Wes’ ass, but his React for beginners course is also amazing and worth every penny. Again, I think due to the way he explains things along with his real-life examples this course is great and helped me a bunch, so go and check it out!
https://reactforbeginners.com/

Redux tutorials

This tutorial by Dan Abramov, who wrote Redux, is a great intro on how Redux works and how you can use it simply with React. Until I watched this series, I really struggled to get my head around it, so it’s definitely worth a watch!
https://egghead.io/courses/getting-started-with-redux

Coming next

I’ve actually planned out a set of posts for once regarding this topic, so next, I’ll be working through Repress. How to set it up, how to use it and any quirks I learned along the way.