Using the WordPress API with React JS

Using the WordPress API with React JS

Using the Headless WordPress API

The WordPress API is enabled by default on your WordPress website; if you wish to restrict API access, this guide will help you out. To get started, just put your website’s domain name and one of the endpoints into a browser window, And then press the return key. If your website has been set up to deliver API data. This indicates that you are ready to begin coding in order to use the API.

Build a React JS website using headless WordPress APIs

Using npx create react app, go through the regular steps for creating a React JS website. Make a file called WordPress APIs with headless WordPress and put it in the services folder. This is where we will keep all of our endpoint methods. 

Begin by creating the base URL, which will be the domain name of your website, and then create constants to contain each endpoint we will utilize. We can break it down as follows:

  • Concatenate the baseURL and posts Endpoint constants to create the endpoint.
  • To show the whole endpoint string on the console, use a console.log. While developing, it is useful to be able to recognize flaws.
  • To get data from the endpoint, use fetch.
  • Convert the original answer to JSON.
  • Create a JSON object with the following properties: totalPages, totalPosts, allHeaders, and JSON.

Header fetch response object

The headless WordPress API’s v2/posts endpoint delivers two headers: x-wp-totalpages, which is the total number of published posts, and x-wp-total, which is the total number of pages. There are more headers, but the headless WordPress backend has exposed these two so that we may use them. 

In our headless wordpress development company function for getting data from the API, we add an extra step where we create a new response object and save the two headers in one property and the JSON content in another.

Building a component to show post titles

Now we will make a component that displays the post titles, so make a components folder and add a new file named PostTitles.jsx to it. Again, breaking down this file, we refer to the API data object that we previously generated in the WordPress API.jsx file, which will allow us to access the function by writing apiData.getPosts (). 

The next step is to create a state object named posts and a function called getPostsData. This function calls API data.get posts() and stores the JSON property of the data received in the post’s state after it resolves. If an issue happens, we ensure that it is detected and, in this instance, simply output the error to the console.

Controlling posts from the WordPress API Posts endpoint

First, we must change the endpoint such that the per page option, rather than the default of 10, is used to specify how many posts we want to be returned. We’ll also need to change the gateposts function to accept the number as a variable and attach it to the destination. 

We also need to alter our PostTitles component so that we can send a number as a parameter and the API data get posts function may be used from anywhere.

Fixing the strange characters by parsing them

We will install the HTML-react-parser package, which will allow us to parse the text and decode any unusual characters. Now we will import the parse function from the html-react-parser package and send the title into the parse function on the line where we render the real title.

Adding some styling to the website

Now we will use Bootstrap to add some style to the website. If you have not used Bootstrap with React previously, you might find my earlier post on it interesting. Now we will add this to the beginning of our PostTitles.jsx file to import the bootstrap CSS and Row and Card components.

Tailwind CSS can be used to raise the bar of the front end. It is more efficient than Bootstrap. Many web development agencies are moving towards Tailwind for providing pixel-perfect frontend. 

Author Bio:- Mr. Gerry is a technical content writer like to write about various technology blog WordPress development themes and plugin Development he owns an author account at free guest posting sites.

contributor

Related Articles

Leave a Reply

Your email address will not be published.