Replicating my site with React and WP REST API

I’ve been wanting to improve my React knowledge for a while now, which included taking Wes Bos’ fantastic React For Beginners course thanks to WebDevStudios. Wes’ course is great and got me excited about learning this new technology in a way I haven’t felt in quite some time. I love what I build each day, of course, but learning something completely new can either be totally daunting and overwhelming or inspiring. As soon as I started putting the pieces together in Wes’ course I found myself motivated enthusiastic about watching each chapter and writing some really nifty code. Once I was done, I setup a subdomain to host my project to show off what I had accomplished.

One thing I found myself having trouble with, though, was translating Wes’ course to WordPress. I work primarily in WordPress and wanted to know how to utilize React in my day-to-day. While creating the Catch of the Day project taught me a lot, I struggled at putting those pieces together in a way that I could utilize the knowledge in WordPress. I also had a lot of trouble finding resources to build a theme using React and the WP REST API. I found a bunch of great-looking React-based themes, but they were all a bit confusing since I was having trouble getting past some opening roadblocks. I also found tons of tutorials and blog posts focused on creating a single page that pulled in posts, but I wanted to do more than that – I wanted to be able to create a fully functioning site with a homepage, single posts, category and tag archives, and pages. Essentially, I wanted to recreate my current site using React and was coming up short in figuring out quite how to do it.

A couple of weekends ago I started with a single page pulling in all of my posts. This wasn’t too difficult, but as soon as I tried using Routers and getting single posts to work I felt my head spinning. For several days I went on a fruitless search for a tutorial (free, paid, whatever) that could show me the basics of what I needed to do – display some posts, then allow for clicking through to a single post.

When I thought all was lost I found this course on TutsPlus by Jeremy McPeak. There were only a couple of intro videos to preview, but chapter 2.2 was titled “Creating the Post Component” and its description read:

“Our app needs the ability to display two things: an individual post and a list of posts. In this lesson, I’ll show you how to add these to the app.”

Yes.

Please.

Thank you.

I couldn’t buy the individual course, but Envato/TutsPlus offers a $29/month membership for all of their courses. If I could learn the thing I wanted to learn in a matter of a couple of hours, $29 was more than reasonable.

The beginning of the course offered information that I had already learned here and there, or showed different ways of doing things I had done before. Once we got the the post component chapter, though, I was kind of blown away with how easy Jeremy made everything seem. I was able to get the single post Router working, then went on to setup archives for categories and tags before setting up various single page Routers.

I’m super stoked to say that I’ve replicated (most of) my site in React and you can check it out here! It’s not as polished visually as my current site – and there are still some things I want to tidy up, like certain characters in post titles not displaying correctly, figuring out how to better format dates, and porting over the content from my Resumé page to name a few. For the most part, though, I’m feeling good about the progress I was able to make over the past couple of weeks with this and I’m looking forward to whatever I build next!

I’m planning on tossing all the things up into a Github repo at some point in the near future – maybe next weekend – but for now I’m going to relax and focus on finishing up another project of refinishing and sprucing up an old record shelf.

Comment section

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Created by shashank singhfrom the Noun Project