This guide will show examples using OSX, some terminal commands may be different between operating systems. If you have any questions on how to execute commands on your OS feel free to contact me.

These are the default settings for creating a WordPress environment. Now if you run docker-compose up docker will run in detached mode, pull the required Docker images and start the WordPress and database containers. You should see something like this:

Docker compose will host a local host environment that you can visit. Here you will be able to run the installation of WordPress (filling out the database might be different per install, you can leave it as default for now). You can set up the installation settings in any way you want, as this is not significant at this stage. Just make sure to uncheck the search engine visibility.

Now login to your website using the username and password you set. We don’t have to install anything else to access our Rest API since WordPress 4.7. In order to test if the API of our WordPress works for you, you can fire a get request in Postman or just visit the link. We can also check our Hello World post. You should be able to see the example page created by WordPress. Let’s create a couple of pages to simulate a real website.

You can now check all the pages available in the REST API.

React + React Router

So now that we have our WordPress environment set up we can start working on the React part. React works with a Virtual DOM by manipulating the root div on our web page and allows a single page while the application changes or interacts with the user. That’s why React is a SPA. But we don’t want to be on one page, we would like to have multiple pages and navigate by changing the URL. This is where React Router will come in. React Router will serve as a navigation tool through our React SPA. It will simulate Routes by adjusting the URL and change the content on the page. Let’s start by creating a basic React App. For this, we will use NPM and Node. SO, create a new folder, outside the WordPress folder. Here we will create our app. 

npx create-react-app wordpress-frontend

Then navigate to the folder and run it

cd wordpress-frontend && npm start

You should see the base create-react-app landing page.

Next, we will need some data before we actually start creating routes. Our routes will be based on the pages that exist in our WordPress environment. The first step will be to connect our frontend and backend to receive the content for us to display. In order to receive the pages, we have to GET the content from WordPress. We use the library Axios for this. Axios is basically the same as Fetch but has a couple of important added features. Some benefits of Axios:

• Transformers: allow performing transforms on data before a request is made or after a response is received (We can use this later to only fetch differences to increase the performance
• Interceptors: allow you to alter the request or response entirely (headers as well). Also, perform async operations before a request is made or before Promise settles. (This will be handy for spoofing 404 responses so pages that do not exist do not get indexed.)
• Built-in XSRF Protection

Our content comes from the headless WordPress and will determine what pages/links/posts will be available. Luckily Axios allows us to work with promises what will come to a great benefit to us. First, we add Axios to our project with:

npm install axios

Then, let’s modify our App.js file in the src folder to reach out for the pages and display the page-slugs on our website.

1. import React, { Fragment } from "react";
2. import axios from "axios";
3. import "./App.css";
4. 
   
5. export default class App extends React.Component {
6.     constructor(props) {
7.         super(props);
8. 
   
9.         this.state = {
10.             pages: []
11.         };
12.     }
13. 
    
14.     getAllPages = async () => {
15.         let res = await axios.get(
16.             `http://localhost:8000/?rest_route=/wp/v2/pages`
17.         );
18.         let { data } = await res;
19. 
    
20.         this.setState({ pages: data });
21.     };
22. 
    
23.     componentDidMount = async () => {
24.         await this.getAllPages();
25.     };
26. 
    
27.     render() {
28.         const { pages } = this.state;
29. 
    
30.         return (
31.            
32.                 {pages.map((page, index) => {
33.                     return

    {page.slug}

    ;
34.                 })}
35.            
36.         );
37.     }
38. }
    

The reason we use a class is to be able to use the constructor and add a pages state. We can then use the array that will be stored in this.state.pages to render our pages dynamically. The reason we use a pages state to store pages is so that we are able to store pages in the cookies or local storage of the user. Before we actually fetch the content we can then compare the local storage and our WordPress environment. We will discuss further optimization in the second blog.

“You can also use React Hooks or State if you want to. You can read more about it here: https://reactjs.org/docs/hooks-state”