You may have noticed the appearance of my site has changed a bit! A while back I decided to rebuild my site - finally. In the interest of learning new things, I created a headless WordPress theme using React.
What Is Headless
We’re not talking about a horseman and Ichabod Crane. Headless separates what you see from where you store and manage content. What you’re viewing now is not WordPress. It’s a React app that gets the content from a WordPress install on a completely different server. I still write and publish everything in WordPress though.
Normally, WordPress handles everything. It displays the front end, manages all the content, and interacts with the database. In a headless situation, the frontend uses a completely different server than the backend. They only talk to each other through an API; in this case the WordPress REST API.
I decided to try out a new service called Netlify to host this frontend React app. Netlify boasts about being super fast for both deploying an app and serving it. I wrote a post about my adventures in deploying my app, but I’ve found it’s a good host so far. I plan to try out other services with different projects, just to explore options.
The REST API
WordPress added the backend for the REST API in version 4.4 and the endpoints in version 4.7. Thankfully, since it’s been around for a while, the REST API documentation is good and fairly easy to figure out. I took a course on React development, actually several, including a course on fullstack development with React. They all covered fetching data from a remote source. I only needed to figure out the specifics of fetching data from WordPress.
React
I chose React for several reasons. First, I’d played with it previously, but never built anything beyond some basic tutorial apps. Secondly, since Gutenberg uses React under the hood, I thought it best to learn what WordPress Core uses. Thirdly, there’s a huge ecosystem built around React and I wanted to explore that as well. React was challenging to learn, but highly rewarding. Funny enough, I kept thinking this is how I had wanted to build things all along. React and Javascript made many features super easy to build compared to the workarounds required in PHP.
I used the popular Create React App project from Facebook as a starting point. While I explored creating my own React project from scratch, CRA just makes more sense. There are some ideas I’d like to explore regarding additional optimizations that are difficult without ejecting from CRA. Those can be performed in later versions of this site/app/frontend though.
In the Future…
I’m planning to write more posts about how I built this site and the tech behind it. I’ve already discovered some really good tips for others to follow. My next post covers how links work with a headless WordPress and the simple solution.
