How To Make An App Using WP REST API And React


Today, I will how to make an simple app using React and WordPress REST API. The final result will look like the following.

When you click on a post, you will get the following result.

First, set up a new project on your computer. If you want to do it, here are the steps to follow:

To create a new project run the following commands

2. Delete all files in the src/ folder of the new project (don’t delete the folder, just its contents).

3. Add a file named index.js in the src/ folder

4. Add a file named index.css in the src/ folder

5. Add these three lines to the top of index.js in the src/ folder

6. Now we will add a simple component class in index.js file which will render a list of static posts.

7. Finally, we can render the App component to DOM using ReactDOM.render()

Now if you run npm start in the project folder and open http://localhost:3000/ in the browser, you should see a list of static posts.

We are going to fetch the latest posts from a WordPress blog using WordPress rest API and replace the static posts.

Before fetching posts we need to set up a local state where we will store the posts. Inside the class add a class constructor and initial this.state

Now fetch the posts and store it to local state

You can use your local development server to make WordPress rest API request. So replace http://localhost/dev/ with your own.

The componentDidMount() hook runs after the component output has been rendered to the DOM. We are using Fetch API to fetch posts and
this.setState() to store posts in local state.

We can now loop through the posts and remove the static content. To do that modify the render method

We have declared some variables to save the state and conditionally rendering the content. We are returning an error if fetching has an error, showing loading text until we get the response from WordPress rest API and displaying different view for single post and list of posts.

At this moment single view is not working. We need to add an event handler to display the single view when the title gets clicked.

Let’s add it

You can see that we are passing an argument, later we will add it to the local state.

Now add the callback method which will update the singleView and post state

Try clicking on the post title to see the single view. The problem is that we can not return from single view now. We need a back button, right?

Let’s update the single view content and a back button.

We need another callback method which will update the state and set singleView to false.

Now we can click on the title of the post to see the single view and click on the all posts button to return back to posts list view.

Let’s do some styling. Open index.css and add the following css

The final code

This is really a simple app. In the next tutorial, we will show you how to authenticate users, create, update or delete a post and how to split code in different files.

Thank you.

%d bloggers like this: