Merging WordPress’ REST API with React

In the past, my go to method of quickly spinning up a blog for myself has been just directly posting into my database, spinning up a quick API in PHP and then rendering the page with some sort of Javascript framework (I prefer React). I’ve since realised, though, that using WordPress’ REST API is essentially just a better way of doing exactly the same thing.

So, how did I set it up?

It’s worth mentioning, before we start, that you could just check out my repo. I’ve tried set it up to be easily changed to any WordPress instance, but there are a few key things you need to fix before forking.

I had to set my permalink settings to “Post Name”, for some reason. Don’t ask me why, but you can do this easily through your WordPress Settings > Permalink Settings and then setting Common Settings to Post Name. While you’re at it, you should also go to Discussion under Settings and make sure you have “Users must be registered and logged in to comment” unchecked.

I started off by running create-react-app , removing some boilerplate and then installing a few dependencies. Axios to make the API-calls, react-router-dom for the routing of individual posts and HtmlToReactParser from html-to-react just to parse the body of the article more easily.

Getting the data

I only really need to make a couple of calls, one to /wp-json/ for the site name and description, and one to /wp-json/wp/v2/posts for the articles. If I want to just get an individual post, I can make a call to wp-json/wp/v2/posts/?include[]=postid.

 reactParse = parse => {
    let HTMLToReactParser = new HtmlToReactParser();
    let reactElement = HTMLToReactParser.parse(parse);
    return ReactDOMServer.renderToStaticMarkup(reactElement);
  };

Dealing with comments

I get comments from /wp-json/wp/v2/comments?post=postid this will give me an array of objects that look something like this:

[
  {
    id: 21,
    post: 12,
    parent: 0,
    author: 0,
    author_name: "Author name",
    author_url: "",
    date: "2019-09-02T13:53:00",
    date_gmt: "2019-09-02T13:53:00",
    content: { rendered: "<p>Comment content</p>\n" },
    link: "wpurl/migrating-to-wordpress-rest-api/#comment-21",
    status: "approved",
    type: "comment",
    author_avatar_urls: {
      "24":
        "https://secure.gravatar.com/avatar/...",
      "48":
        "https://secure.gravatar.com/avatar/...",
      "96":
        "https://secure.gravatar.com/avatar/..."
    },
    meta: [],
    _links: {
      self: [{ href: "wpurl/wp-json/wp/v2/comments/21" }],
      collection: [{ href: "wpurl/wp-json/wp/v2/comments" }],
      up: [
        {
          embeddable: true,
          post_type: "post",
          href: "wpurl/wp-json/wp/v2/posts/12"
        }
      ]
    }
  }
];

What I mostly care about is id, content.rendered, author_name and date . I use these to render my comments. To post a new comment, I just need to make a post request to that same URL with atleast the following data:

{
  author_name: "",
  author_email: "",
  content: "",
  post: 12, // Article-ID
  parent: 0 // If comment is a reply, ID of the parent-comment, if else leave it empty or 0
};

That’s it, for the most part. To properly render the articles you’ll need some CSS, but it won’t take much. My CSS sits at around 300 lines and it accounts for layouts, article covers, comments, spacing, and listing both collapsed and opened articles.

If you want a more in-depth tutorial on how to set up something similar using WordPress’ REST API, please leave a comment below.

Why not just use WordPress directly?

I’m not really a big fan of working with PHP, and building this in React gives me full control over how things work in a way that I’m used to working in. All of the goodies of React, with some goodies from WordPress.