Using WordPress with ReactJS to Build Headless CMS for Your Website
What Is Headless WordPress?
The benefit of Using Headless WordPress CMS
WordPress, as an open-source platform, provides a lot of versatility in terms of creating any type of website. Using WordPress as a headless CMS allows you to use any web technology to build the front-end of your online application and manage its content using one of the most popular CMS.
You could find yourself in a position where you need to add a blog feature to an existing React or Angular web project. Instead of building a full-fledged content management system in the local framework, utilize the Rest API to manage content with the headless WordPress CMS.
Setting up a WordPress Site
By configuring the WordPress site, which will serve as a data source for our React frontend application. Download the WP-Rest API plugin's zip file from git and place it in the plugins folder of your WordPress installation. Activate the plugin when the file has been uploaded.
Within your WordPress website, this will enable the WordPress Rest API. Go to Permalinks Settings and choose either Post name or Custom Structure. Because we will be working with API requests, install the Postman Chrome plugin.
Enter the URL in the following format in the Postman:
The given URL will retrieve the data from your WordPress site's posts. Create fully customized posts using the Custom Post Type UI plugin. When we utilize WordPress with React in the following phase, this custom post will be shown. After you have installed and activated the plugin, go ahead and create a new post type. Type the name of your custom post in the Post Type Slug field.
Make sure the Show in REST API option is checked, as well as the REST API base slug. If you want to utilize WordPress as a headless CMS, you will need to do this. Fill in all of the boxes for the data you want to retrieve via the REST API. After you have saved your modifications, you will see that the sidebar has been updated with a new option. To add the new Book to your custom post type, click on it.
Getting Started with React
Setting up React App
The following requirements must be installed on your computer in order to develop React applications.
- NPM and Node. JS.
- Sublime Text or Visual Studio Code are two examples of text editors.
- Git is a version control system (Optional)
After you have set up the environment, enter the command prompt and type the following code to make a React.JS project. cd (change directory) to the application folder and enter the following command to install the Axios package for API calls after the app has been developed.
Rendering Post Data on React.JS
We will get the data via the WordPress Rest API in the Book.js file. The code that calls the Rest API end-point and shows the data in JSON format. Because App.js is where our web application starts, it is critical to include the "Books" components in this file.
Displaying Post Data on React.JS
By putting the code within the render method, the data may be shown. We will construct a new component called 'BookItems.js' instead of showing data. Change the render method inside Bookk.js. Now, render the BookItems component, Inside the BookItems.js add the code.
Conclusion:- When you go for a business website that should be highly reliable and faster you can go with headless WordPress development. The website with Headless WordPress is fully responsive and optimized.