In the following tutorial, we’ll see how to retrieve and show a single post from a WordPress site. We’ll learn how to create and render a simple Post React component, how to fetch the data needed for this component all the while using a few bits of the newest JavaScript, called ES6! But first, let’s see how it will look at the end of this tutorial:

Creating a Post component

First, we need to write a component which will render our post. Let’s call it Post. The component won’t have any logic and will only render a few pieces of data (such as post title, content, author and publication date), so we can define it as a stateless functional. We will just pass down a few arguments and the Post component will render them.

Speaking about its parameters, the first one is props. It’s an object containing all the props we sent to it. We can make use of ES6 object destructuring to extract our props out of the parameter directly without having to assign them in the component. Now, let’s return something from the component! We are using the JSX syntax for writing React code as it looks similar to HTML, saves some typing and is a pretty widely used standard.

Firstly, we wrap the body of the post in section React component. Notice the className prop: normally, you would write just class instead of className when defining CSS classes for a HTML element. However, as class is a reserved JavaScript keyword, React developers opted for calling it className. But no worries! It works the same as HTML class attribute.

We fill the article’s section with some h2 containing the title. Notice the curly braces wrapping the title variable. That’s how we pass JavaScript variables or function calls into JSX. Continuing, we add an article component with a CSS class content and one special prop called dangerouslySetInnerHTML.

Rendering string which contains HTML elements in React

When using a React component such as article or section, sometimes, we might need to output a HTML that is in form of a string. If we used the first technique (wrapping the content variable in curly braces and putting them inside article), React would render the HTML tags from the string as plain text without transforming them into proper HTML elements.

We are in this situation: we receive a post content from a server and this content contains HTML tags. In PHP or other server-side languages, we could just output this string into HTML somewhere and it would work. In React, it’s a different story — but for a good reason: security. I think the reasoning behind this is best explained on the React docs page:

In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous

Fortunately, we can trust the data which we receive from the wp-json/wp/v2/posts endpoint as it retrieves the post content in the same way as when showing a post normally (thus sanitizing and securing it for us). But remember, always double-check the data which you are passing to dangerouslySetInnerHTML. The only thing we need to do here is to put a new object with a single property __html: content into dangerouslySetInnerHTML and React will render the HTML tags as React components instead of just pieces of strings.

Finally, what’s left for us is to render the author’s avatar image, author’s name and the article’s publication date. For the image, we use the native img component. As you can see from the code, the img component is very similar to how you would use the img HTML element. Nothing special, really. 🙂

Getting article data

In order to make it as simple as possible, we are using jQuery to make a GET request for the article data. WP API returns the data in a form of JSON. jQuery has a handy method called getJSON which retrieves the data from the specified URL, transforming them from JSON string into JS object. It also implements the Promise interface so we can use then method instead of relying on callbacks.

What about authentication? We don’t need any! If a piece of data is public on a WordPress site, WP API provides it without having to authenticate in any way. This makes it pretty easy to get any public data from any WP site with WP API.

Notice the _embed query parameter. Without specifying that parameter, we would have to do another request for getting the post author’s name or avatar. WP API is designed in such a way that it provides the least amount of data needed to satisfy a request. Any additional related data is provided through set of links which are included in a default response.

For example, this is how it looks if we do a GET request to http://wpcoredesign.mystagingwebsite.com/wp-json/wp/v2/posts/6:

image00.png

We can see the post id, slug, content and so on. Notice the author section. Instead of containing the data about the author, it contains just a link (href) to the endpoint which can give us the author details. However, if we add the _embed query parameter, WP API will respond with all the data about the author as its embeddable key is set to true. You can read more about this behavior on WP API docs pages.

Continuing, we now extract the article’s data into variables so it’s easier to pass them into the Post component later. Notice the const keyword. It’s a new ES6 way of defining a JavaScript variable. From MDN:

Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can’t be redeclared.

As far as handling publication dates (or any date/time manipulation) is concerned, we chose to use moment.js JS library. WP API returns the publication date in two formats: date and date_gmt. The first one (date) is the local publication date of the author of the post. The other one (date_gmt) is the local publication date of the author converted into the GMT timezone. Therefore, we’ll use the GMT format and with the help of moment.js local method, convert it into our local date/time (“our” means the browser’s local time). Finally, we format the date into a string in the “Month (fully expanded) Day (number), Year (number)” form.

The last thing to do is to render the Post component into our page (DOM). React provides a handy way of doing that with ReactDOM.render method. The first argument to render is the React component we want to render (in our case Post) and the second one is the DOM element on our page. To get a DOM element, we can simply use the old good document.getElementById specifying 'app' as the ID. Once again, we use the JSX syntax to initialize the Post component, passing all the required props (such as title, content, etc) into it.

Links