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?
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.
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.
- Gutenberg Plugin
- Advanced Custom Fields Pro
- ACF to REST API
- WP-REST-API V2 Menus
- A bunch of custom functionality plugins
- 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:
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!
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!
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.