What is a Headless Content Management System(CMS)?

Step 1: Create a new installation for WordPress

WordPress Installation is pretty simple. WordPress can be downloaded via https://wordpress.org/download/. To run a WordPress site and establish a database, using phpmyadmin, it’s also necessary to download XAMPP or WAMP servers. After all, things have been configured to go ahead and access the admin dashboard. For example- http://your.com/wp-admin.

Step 2: Install the WordPress REST API Plugin

Go to Plugins > Add New and look for “WordPress REST API.” Go ahead and install, then turn it on.

Step 3: API Check

Now it’s time to get the favoured API application tool such as Postman, SOAP UI and HP UFT.

Get API request to http://your-site.dev/wp-json/. You will receive JSON format data containing your site’s content and resources.

Step 4: Required Plugins

What are we going to do next? You must use custom fields to display your dynamic content on the webpage.

CPT UI: The most powerful WordPress plugin is the Custom Post Type. You can build custom content.

For demonstration Create a custom post type as a movie.

Now we will manually build a custom post type. The next steps are to establish a custom post type.

1. Go to CPT UI > Add/Edit Post Types

2. For the Post Type Slug, enter as a slug movies.

3. For the Plural, enter Movies

4. For the Singular Label, enter Movie

5. Now comes the key part: go down and find the Settings option, where you will find the “Show in REST API” option.

6. Scroll all the way to the bottom and select Add Post Type.

Advanced Custom Field: ACF is one of WordPress’s most famous plugin. Custom fields are table and custom fields are columns of that table, while considering a data base.

To create custom fields, follow these steps:

1. Go to Custom Fields > Fields Group

2. To Add New Field, click on Add New.

3. Enter a name such as “Movie Title” or something like that for the Field Group title.

4. Set the post type to be Movie equivalent.

ACF to REST API: ACF does not give API support so that this problem can be overcome The ACT to REST API entered the scene and provides API support.

Step 5: Post Data Import

This is the final stage in serving movie data. For importing we require movie data collections. Go Tools > Import and click to import data on the bottom.

Step 6: Install Create React App

You must first install Node on your system. Following this, execute the following install command:

npm install -g create-react-app

That’s all, your react app has been created.

Step 7: Create the App

Now Change the directory using the cd command and name the folder something like

cd create-react-app headless-wp

Run command npm start from there

You will redirect to http://localhost:3000: automatically

Step 8: Create your Component

We’ll create one component like componentname.js and import it into the parent component.

Open your App.js now delete existing code exclude import react and export default. So your file will look like this:

import React, { Component } from ‘react’;
export default App;

Now you need to create render() for this component. This function calls each and every time when the function state will change.