Using Wordpress with React.js
Tags: react, wordpress, webdev, tutorial
Published: 2019-02-18 14:18:06

---
title: 'Using Wordpress with React.js'
published: true
description: 'In this article, we will cover how to use WordPress as a headless CMS by leveraging the WordPress API and React js when building a project.'
tags: #reactjs #wordpress #webdev #tutorial
canonical_url: https://www.iamtimsmith.com/blog/using-wordpress-with-react/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2yv7xh09q7omcqmahrt3.jpg
---

In this article, we will cover how to use WordPress as a headless CMS by leveraging the WordPress API and React js when building a project.

If you've ever wondered whether or not you can use React with Wordpress, the answer is yes. If you've built wordpress sites before then the solution may not be as obvious as one might expect.

# What is a Headless CMS

Before we get into the code, it may be useful to explain how we will handle this. You may have heard the buzz word _"headless cms"_ tossed around if you've searched for an easy way to manage content for your react js project. Because this term is becoming more popular, it may be beneficial to define that sooner rather than later.

> A headless CMS is a back-end content management system that doesn't provide a front-end solution.

By default, Wordpress uses themes and templates to provide a front-end for our Wordpress sites. Building a site like this uses to interact with the database and create structure our users can view. Using this method to build a front-end can have a couple of downsides.

First, it can create sites that aren't particularly performant. While PHP is a versatile language, there are better solutions for building out UIs for our users. Second, Wordpress powers something like one-third of the internet. Because of this, hackers like to try to get into Wordpress sites to access sensitive data. Having a separate front-end prevents users or hackers from knowing it is a Wordpress site at all.

![I hate this hacker crap!](https://media.giphy.com/media/DBfYJqH5AokgM/giphy.gif)

## Okay, so how do I use a React js to do this?

Wordpress exposes a REST api that allows access to the data created by the site. We can leverage this technology with a library like Axios to consume the data from our Wordpress site and pull it in to our React.js project. This means that we can have the best of both words: the ease of using Wordpress to manage content and the joy of building with React js.

# Using Wordpress as Our Back-end

Lets take a look at a Wordpress site so you can see exactly what I'm talking about. You can use any Wordpress site for this, even a site being hosted at a subdomain. For this article I will be looking at the [TechCrunch](https://techcrunch.com/) website.

By simply adding `/wp-json/wp/v2/posts` to the end of the url, we will see a JSON output of all of the most recent posts. By simply changing `posts` to `pages`, [we can see the data for the pages in the TechCrunch site](https://techcrunch.com/wp-json/wp/v2/pages).

![TechCrunch Posts API](https://d33wubrfki0l68.cloudfront.net/91befd6efc0390046829b0c7eb88c1fa4ca07e43/166ec/static/dc5bb46f97eec1032c16225b69860ef0/9c5b2/techcrunch_posts_api.png)

We can [try out different options](https://developer.wordpress.org/rest-api/reference/) like `posts`, `pages`, `users`, and more. Go ahead and play around to see what data you can find. This will allow us to decide what we want to use and what we don't.

![Decisions Decisions](https://media.giphy.com/media/3diE2vbIarCXWXaN15/giphy.gif)

# Our React js Starter App

I have created a react [starter you can download from here](https://github.com/iamtimsmith/using-react-with-wordpress-demo.git). The solution is also in there on another branch. You can download the files, run `yarn` or `npm install` (whichever you prefer) and then `yarn start` or `npm run start`. You will see our simple page, but will notice that there isn't any content. Lets get started and add some content.

## Install Necessary Packages

If we open up the `package.json` file, we can see that I have already included `react`, `react-dom`, and `bulma` to build our front-end. Before we can go further with our react js app, we need to add a few more packages.

We can add [Axios](https://github.com/axios/axios) which is a package that allows us to make http requests from our application without any hassle. [React-router](https://github.com/ReactTraining/react-router) can be used to create routes which means that we can switch pages or components without a browser refresh. To install these two packages, we can use the following code in our terminal:

![Install axios and react-router](https://d33wubrfki0l68.cloudfront.net/57a30b90e99d23375f13854cf9a8ee7f66982bba/6c27a/static/a63b2f68f5a2e30bf59069932da18282/9c5b2/code1.png)

## Add React Router to App.js file

Now that we have our new packages installed, we need to set up `react-router` in our app.js file to tell our browser what should be displayed when different paths are entered into the address bar. To start, we need to import the pieces we need from `react-router` at the top of the file. At the bottom of the imports, add the following code:

![Import react-router into app.js](https://d33wubrfki0l68.cloudfront.net/af04a7ae68a8a21788752d07cc165cc6273e7f79/8d7cd/static/aec12b098c15134e83febf03d45bf0f7/9c5b2/code2.png)

Now that we have imported `react-router`, we can use those components to set up routes. Our current app.js file looks something like this:

![App.js file after adding import statement](https://d33wubrfki0l68.cloudfront.net/944c0c45923d031a7a5d66c789a62fe92e432cb5/6f704/static/0a1a9e2fa4ac816805187231a2f35d7d/9c5b2/code3.png)

To add a router to our `app.js` component, we need to wrap the outermost `<div>` in a `<Router>` component so we can set up our application's routes. Then we can replace our `<h1>` tag with these two routes:

![Add our application's two routes](https://d33wubrfki0l68.cloudfront.net/7b3f4a260eab3bc2b797b29da734d0533ff0ef7d/e7bc7/static/650e5bc14eb3edc7359ae032d3cc3aaf/9c5b2/code4.png)

Let's break this down:

Our first route tells reactjs to show a component called `PostList` when a user visits the home route ([http://localhost:1234](http://localhost:1234)). The `exact` attribute means that it needs to match this route **exactly**, which means that if we have anything after that it will not go to this route.

The second route will show a component called `PostView` when a user visits a wildcard route. The `:slug` denotes that any string after the slash will be a different route in our application. In our case, this string or `slug` (since that's what we named it) will be the slug for the TechCrunch blog post. Our `app.js` file should now look like this:

![Modified app.js file](https://d33wubrfki0l68.cloudfront.net/cb8683b5777da7c08e132bb49496bda5ad7f66c3/03942/static/01262472b8dfe0e28da10e24a48e3773/9c5b2/code5.png)

Next we need to create the `PostList` and `PostView` components and import them into the `app.js` component.

# Creating our PostList Component

Before starting to create our `PostList` component, we should spend a little time thinking about [what kind of component we should use](https://www.iamtimsmith.com/blog/class-components-vs-stateless-functional-components/). We will be making an http request with axios using the `componentDidMount` lifecycle method and then [we can store it in state](https://www.iamtimsmith.com/blog/this-state-how-to-use-state-in-react/). We can use both state and lifecycle methods in a class component. Now that we have an idea of how this component will be built, we can get started. First we should create the file for the component:

![Create the file for our PostList component](https://d33wubrfki0l68.cloudfront.net/79461a9c7f8cd5df927bcf0bccc55ce0cd887ade/677e5/static/ebef24a8c583a37b8f840f68613efde6/9c5b2/code6.png)

Next we should import the stuff we will need to build this component. Add these import statements to the top of the `PostList.js` file:

![Add imports to our PostList.js file](https://d33wubrfki0l68.cloudfront.net/29080b0955b99ad9730b2f488a4a60daed905a85/8b41b/static/db307a08334e87656ec174d7c728aaa4/9c5b2/code7.png)

After that, we can create a class component called `PostList` and set up the constructor and state for the index page of our blog. Our state should hold a list of the posts we will be displaying. Any custom functions we write in this component will be bound to the `this` keyword in this constructor.

![Set up constructor and state for PostList](https://d33wubrfki0l68.cloudfront.net/d13e756efdeb1b311c8ee536a147276ffcd37f3d/d1536/static/2db2766a986b4843e584403f98e62c74/9c5b2/code8.png)

Now that we have a place to put the data for our posts, we should create a lifecycle method to pull in that data and assign it to our state. We can do this pretty easily by adding the following code after our constructor:

![Add componentDidMount lifecycle method to react js component](https://d33wubrfki0l68.cloudfront.net/587d9db01f064c5c4c3a868881a9cf9e7d368402/d65c2/static/6cba40e157b47eae5aff89ee854748c6/9c5b2/code9.png)

If you're developing React applications often, I would recommend installing the [React DevTools](https://github.com/facebook/react-devtools) in your browser of choice. This makes development with react js very simple and keeping track of data being passed through state and props.

We can now check our state to make sure that it is being populated correctly from our `componentDidMount` lifecycle method. To do this, open developer tools in your browser and go to the react tab. Then we can drill down in the structure until we find our `PostList` component and the pane on the right shows our state and props.

![Check react js devtools to make sure state is being assigned](https://d33wubrfki0l68.cloudfront.net/7c35626f955294bf314849fde3b9fc823b9d2480/666b8/static/a4ffd90e0c70b0b74dc69a187aae691a/9c5b2/devtools.png)

Since we have all of the posts in our state, we can create a render method with structure for our page. To do this in a simple way, we can use a `map()` function which will iterate over each item in an array. Our render method can go after our `componentDidMount` method with the following code.

![Add render method to PostList.js](https://d33wubrfki0l68.cloudfront.net/d8230aa355e007bd180f2d8a1991d647c0901c16/d9091/static/57e106f4a239261665cfa546bac25e4a/9c5b2/code10.png)

If we run our site with `npm run start` or `yarn start`, we can see that our blog posts are being displayed correctly but we can see the HTML tags being rendered. That's not cool. To render this correctly, we should create a function to use with the `dangerouslySetInnerHTML` attribute.

Lets add a function to do this after our `componentDidMount` but before the `render` method. We also need to bind the `this` keyword inside our constructor. We can then use the `dangerouslySetInnerHtml` attribute to render the post excerpt in a `<div>`. Our completed `PostList` component should look like this:

![Completed PostList component](https://d33wubrfki0l68.cloudfront.net/7cac993a63fde0f3b6dff0cca5469ced2a635004/4c408/static/2e0859abb4a54aad125e9377cffcb16d/9c5b2/code11.png)

# Creating a PostView Component

If we look back at our `app.js` file, we can see that the blog post will be rendered with a `PostView` component, so let's go ahead and create it!

![Create a file for our PostView component](https://d33wubrfki0l68.cloudfront.net/e929df62d7ddd4d124122e82aae891a396734153/72181/static/2a212a9312bf9e27833507aef05aa9dc/9c5b2/code12.png)

The code above will create a file to house our `PostView` component and open it in your default code editor. To make things simple, we can just copy the formula for our `PostList` component. We can copy and paste the code from our `PostList` component and make a few small modifications.

First, we need to make sure and change the name of the component from `PostList` to `PostView`. Next we need to modify the `componentDidMount` method a bit. We can add a line of code which will get the `:slug` from the url in the address bar and use that to filter the posts being returned by the Wordpress API down to a single post. Finally, we need to alter the `render` method to display a full post if one exists or not show an error if it doesn't.

The code below will be used for our completed `PostView` component. Take a look at it and see if you can spot the differences and figure out why we handled them this way.

![The code for our completed PostView component](https://d33wubrfki0l68.cloudfront.net/f4b9298ca95dec4a24464d0876220b9aed6063ff/a95ef/static/8202ee35cbc9b6379dbb26c61b6b75d6/9c5b2/code13.png)

# Last Steps for Our ReactJS Blog

We are pretty much set now with our blog. There are just a few more small things we need to do to get our application working how we want. First, it's expected that a logo or site title links back to the homepage. Since we're using `react-router` in our project, we can even do this without a page refresh. To do this, we can open the `components/header.js` file and modify it to look like this:

![Our modified code for the Header component](https://d33wubrfki0l68.cloudfront.net/e7ca9ff5bbd6353f6f7c1516170d9822a57eae80/d4ec8/static/52232383bbb71c90fd72aad0db0172ac/9c5b2/code14.png)

The last step for our Wordpress and React js blog is to add import statements to the `app.js` file for our two components, `PostList` and `PostView` so react knows where to get them from. Once you have done this, you should be able to run the application and see the most recent blog posts from TechCrunch.

# Performance Issues with React js

You may notice some issues with load speed or a _glitchy_ sort of feeling where the screen is blank for a second before showing the content. This is because the content is being rendered after the component is mounted so there is a small delay. In addition, search engine crawlers have a hard time reading the content on sites like this because it is loaded via javascript after the page is rendered. There are a few popular ways to handle these issues:

![Gatsby js](https://media.giphy.com/media/g9582DNuQppxC/giphy-downsized-large.gif)

## Gatsby.js, a Static Site Generator

[Gatsby js](https://www.gatsbyjs.org/) is one of my favorite tools to build with in the react js ecosystem. It allows us to build a site or app using React, React-router, and Graphql right out of the box! Then, when we actually build the application, Gatsby js creates static files which make our applications stupid fast.

Because the files for our application are being served statically, they can be very fast as the content is all created beforehand rather than as the page is rendering. This can be a bit tricky since we have to figure out a way to trigger a build when we update the content. [Netlify](https://www.netlify.com/) is my go-to service for this as it's very easy to use and when you push to a certain git branch it will rebuild the Gatsby js project.

![Thank U, Next](https://media.giphy.com/media/1gUWdf8Z8HCxpM8cUR/giphy.gif)

## Next.js, Server-Side Rendered React js

Another popular solution to handle these issues is called [Next js](https://nextjs.org/), which provides server-side rendering for react js applications. Rather than using `componentDidMount` to fetch our data after our component has mounted, Next js exposes a new method called `getIntialProps` which allows us to fetch data before the component is rendered.

The fact that Next js offers server-side rendering also fixes the issue with the crawlers having trouble reading content. In addition, the tutorials available on their site are pretty awesome. This would be a great solution if you're building an app [using the MERN stack](https://www.iamtimsmith.com/blog/what-is-the-mern-stack-and-how-does-it-work/) because it can handle frequently changing data.

# Wrapping up our Wordpress and React js project

As you can see, it's really pretty easy to leverage the awesome UI provided by Wordpress while getting to enjoy React js for the front-end. You can take advantage of these tools in your personal projects, enterprise solutions, or freelance work. This is one of those rare occasions where you do get the best of both worlds!