How to Use Headless WordPress CMS with React

Marketing loves WordPress. It’s familiar, flexible, and they can publish content without bugging engineering. But your developers? They’re tired of PHP templates and clunky themes. They want speed, flexibility, and control. Something React delivers in spades.

One team wants the kitchen. The other? Just the food. So what if you gave them both? That’s where headless WP comes in. It decouples your content management from your front-end experience.

This post is your step-by-step guide to building a powerful, fast, and flexible headless WordPress cms as the content backend and React as your frontend.

Whether you’re a developer providing website development services in USA wanting full UI control, a marketer aiming for SEO-friendly content reuse, or an agency planning for long-term scalability, this blog is your go-to guide for making the most of headless WordPress.

What Is Headless WordPress CMS?

Is WordPress a headless CMS? Yes. WordPress headless is WordPress, minus the front-end. You still use the WordPress admin to create, manage, and store your content. But instead of rendering pages with WordPress themes, you pull that content into a separate frontend like React via an API.

Think of WordPress as the kitchen where your content is prepped. The API is your delivery guy. And React is the waitstaff who serves it to users, beautifully and fast.

Traditional WordPress themes handle both the backend and the frontend in one system. Headless separates the two, giving developers full design freedom and marketers the content editor they already know.

What is React?

React is like the secret weapon for building websites that actually feel alive. Built by Facebook, it’s a JavaScript library that lets you design super dynamic user interfaces without getting stuck in a rigid framework.

You get total control over how things look and behave, and it’s all built around reusable components. So instead of rebuilding the same things over and over, you just plug them in where you need them.

It also uses JSX, which basically blends HTML and JavaScript, so your code reads more like English and less like a puzzle. And here’s the performance magic: React updates a virtual copy of your page first, then only changes what’s necessary, making everything faster and smoother.

Whether you’re building for web or mobile, React keeps your UI clean, scalable, and lightning-fast.

How to Set Up ReactJS with Headless WordPress

To set up ReactJS with a headless WordPress, you need to decouple the front end (ReactJS) from the backend (WordPress) and use WordPress as a content management system (CMS) only.

Step 1: Install and Setup WordPress

Step 2: Enable WordPress Rest API

First, download the WP-Rest API plugin as a zip file from git.
Upload the zip folder inside the WordPress Plugin section and install it.
Once you upload the file, activate the plugin to enable the WordPress Rest API.

Step 3: Fetch Post Data

To fetch the post data, follow these steps:

Head to Settings → Permalinks and then select either Post name or Custom Structure.

Download the Chrome extension Postman, since we’re working with WordPress headless API calls.
Click on the Postman extension and enter the URL in the following format:
- https://example.com/wp-json/wp/v2/posts
The above URL will fetch the posts’ data inside your WordPress site.

Step 4: Create Custom Post Types

To create custom post types:

Get the Custom Post Type UI plugin for creating custom post types.

Install and activate the plugin, and add a new post type.
For this tutorial, we’ll create a custom post type for Books.

Type the name of your custom post inside the Post Type Slug

Make sure the Show in the REST API for checkbox is set to true, and the REST API base slug is also set.

Setting this up is very important to use WordPress as a headless CMS.

Tick all the boxes for the information you want to get from the REST API.

After saving the changes, you’ll notice a new “Book” section in the sidebar.
Click on it, then click on “Add New” to add a new Book inside your custom post type.

I added some sample data and an excerpt from my post and created a new book.

Step 5: Check and Verify

To check whether the data is available via API. Go ahead and enter the URL in Postman.
The URL should look something like this:

https://exampe.com/wp-json/wp/v2/books.

We can also add more files like Publisher by using ACF and ACF to Rest API plugins.
Install and then activate both the plugins.
By default, ACF does not speak to the WordPress Rest API. Therefore, we need to download the ACF REST API plugin as well.

Using the custom fields plugin, I will add the Publisher field for my books.

Select your post type from the list. And, hit ‘Publish.’

You can see a new field in my custom post type where I can enter name of the publisher of my book.

That’s all we needed to do to set up our WordPress for sending our data to our ReactJS web application.

What Is React & How to Set it Up

JavaScript is a very powerful tool used in web development, and React is a JavaScript library for the web maintained by Facebook and the developer community. ReactJS is typically used to develop fast, customizable, and dynamic single-page applications.

Pre-Requisites

Before building headless cms React apps, make sure you have the following dependencies installed on your computer.

NodeJS & NPM.
Text Editor such as Sublime or Visual Studio Code.
Git for version controlling (Optional)

How to Create a Project with ReactJS

Once you setup the environment, open the command line and enter the following code to create the ReachJS project.

npx create-react-app frontend

After the app is created, enter cd(change directory) and enter the path to the application folder and type the following command to install the Axios package for the API calls.

npm i axios

Now, open the folder in your favorite text editor. I will be using Visual Studio Code.
Launch the application by running the command npm start.
We are now ready to build our web application using WordPress as a headless CMS if all works properly.
Now create a new folder ‘components’ inside the Create a new folder ‘components’ inside the src folder, and inside the ‘components’ folder, create a new file ‘Books.js.’

How to Render Post Data on ReactJS

We will fetch the data from the WordPress Rest API inside the Book.js file.
The code below requests the Rest API end-point (which in my case is ‘/books’ and displays the data in JSON format:

import React, { Component } from ‘react’
import axios from ‘axios’;
export class Books extends Component {
state = {
books: [],
isLoaded: false
}
componentDidMount () {
axios.get(‘https://WordPress-179008-1030625.homageapps.com//wp-json/wp/v2/books/’)
.then(res => this.setState({
books: res.data,
isLoaded: true
}))
.catch(err => console.log(err))
}
render() {
console.log(this.state);
return (
<div>
</div>
)
}
}

Export default Books
The code above will show the array of data in the console, and it is then utilized inside the render block.
Now, inside the App.js file, call the Books component as shown below.

import React from ‘react’;
import ‘./App.css’;
import Books from ‘./components/Books’;
function App() {
return (
<div className=“App”>
<Books/>
</div>
);
}

export default App;

App.js is the entry point of our web application. Hence, it is important to reference the “Books” components inside this file.

How to Display Post Data on ReactJS

This is how you can display post data on ReactJS.

Add the code below inside the render method:

render() {
const {books, isLoaded} = this.state;
return (
<div>
{books.map(book =>
<h4>{book.title.rendered}</h4>
)}
</div>
);
}

Next, we will create a new component and name it ‘Bookworm.js’. Since we don’t want to display the data here, and keep it separate from the parent component.

Change the render inside Book.js to this:

render() {
const {books, isLoaded} = this.state;
return (
<div>
{books.map(book =>
<BookItems key={book.id} book={book}/>
)}
</div>
);
}

Now, we will render the Bookworms component instead.

Inside the BookItems.js, add the following code:

import React, { Component } from ‘react’
import axios from ‘axios’;
import PropTypes from ‘prop-types’;
export class BookItems extends Component {
render() {
const { title } = this.props.book;
return (
<div>
<h2>{title.rendered}</h2>
</div>
)
}
}

export default BookItems

In the code above, we’re referencing the book prop to get the title and other information. In the code above, I’m referencing the book prop to get the title and other information.

Note: Make sure to reference the BookItems component inside the “Books” component.

My final version of BookItems.js looks something like this:

import React, { Component } from ‘react’
import PropTypes from ‘prop-types’;
import axios from ‘axios’;
export class BookItems extends Component {
state = {
imgUrl: ”,
author: ”,
isLoaded: false
}
static propTypes = {
book: PropTypes.object.isRequired
}
componentDidMount () {
const {featured_media, author} = this.props.book;
const getImageUrl = axios.get(`https://WordPress-179008-1030625.homageapps.com//wp-json/wp/v2/media/${featured_media}`);
const getAuthor = axios.get(`https://WordPress-179008-1030625.homageapps.com//wp-json/wp/v2/users/${author}`);
Promise.all([getImageUrl, getAuthor]).then(res => {
console.log(res);
this.setState({
imgUrl: res[0].data.media_details.sizes.full.source_url,
author: res[1].data.name,
isLoaded: true
});
});
}
render() {
const { title, excerpt } = this.props.book;
const {author, imgUrl, isLoaded} = this.state;
return (
<div>
<h2>{title.rendered}</h2>
<img src={imgUrl} alt={title.rendered}/>
<strong>{author}</strong><br/>
<div dangerouslySetInnerHTML={{__html: excerpt.rendered}}></div>
</div>
)
}
}

export default BookItems
And the output in the browser looks like this:

Not the best looking output right? Well, that’s because we need to add styling, and that’s out of scope of this post.

Drawbacks and Benefits of Headless WordPress

Custom design, better speed, better security, and true omnichannel content distribution are some of the top benefits.

Marketers can easily update once in WordPress and deploy content to web, mobile, or even screens in-store.
Developers can build a unique frontend that actually matches the brand.

Drawbacks? You lose plug-and-play themes. Every visual change requires developer input. Plugins that manipulate the front-end (like sliders, pop-ups) won’t work without custom React equivalents. You also have to manage routing, meta tags, preview functionality, and user authentication manually in React. It’s not for everyone. But for teams who want speed and flexibility. It’s worth the setup.

Headless WordPress Plugins and Tools to Supercharge Project

Consider using WPGraphQL instead of REST for cleaner queries. Next.js and Gatsby are top React frameworks for SSR/SSG.

For auth, use JWT Auth for WP-API. For custom fields, ACF plus the ACF to REST API plugin works well.

Need menus? Use WP REST API Menus plugin. And if you’re building eCommerce, CoCart lets you handle WooCommerce cart functionality via API.

Best Practices

Use CDNs and caching. Use SSR or pre-rendered pages for SEO. Add structured data in React manually. Monitor both your frontend (use tools like Sentry) and backend (uptime, API health). Maintain the editor experience. WordPress still needs to feel familiar to your content team. And always version your front-end React code.

Final Thoughts

Headless WordPress is trendy and practical. You get to keep everything your content team loves, and give your devs the tools to build stunning, modern experiences. Whether you’re building a blazing-fast blog or a multi-channel content hub, combining headless React WordPress gives you the power to scale smart. So start simple. Fetch a post. Render it in React. Feel the magic of decoupling. And never look back.

Struggling to connect WordPress to your React frontend the right way? Our website development services in USA build custom, React-ready WordPress backends that just work, so you don’t have to fix them later. Talk to us today to get started.

How to Use Headless WordPress CMS with React to Build a Modern Web App

What Is Headless WordPress CMS?

What is React?