learn2kode.in

Menu
React-with-WordPress-Headless-CMS

How to Use React with WordPress as a Headless CMS (Beginner’s Guide 2025)

React and WordPress are two of the most popular tools in web development. React is known for building fast, interactive user interfaces, while WordPress is the world’s most widely used content management system. Many developers today combine these two technologies by using WordPress as a Headless CMS and React as the front-end.

This powerful combination offers the best of both worlds:

  • WordPress handles content: posts, pages, categories, media
  • React handles UI: fast, modern, responsive front-end

In this guide, you will learn what a headless CMS is, why React + WordPress is a great choice, and how to integrate both step-by-step.

What Is a Headless CMS?

A Headless CMS means that WordPress only manages content, but does not handle the front-end.

  • No themes
  • No PHP templates
  • No WordPress rendering

Instead, WordPress acts like a content API. The content is fetched by a front-end application (React, Next.js, Vue, Angular, etc.) through REST API or GraphQL.

Why Use WordPress as Headless CMS?

1. Familiar and Easy to Use

Editors can still use the WordPress admin panel they already know.

2. React Gives Better Speed

React builds fast, interactive interfaces that load instantly without page reloads.

3. More Security

No PHP templates on the front-end reduces security risks.

4. Scalability

You can use WordPress only for content and deploy your React app anywhere (Vercel, Netlify, AWS).

5. Multi-platform Content

You can display WordPress content on:

  • Website (React)
  • Mobile app (React Native)
  • Desktop app
  • Smart devices
How WordPress + React Works (Simple Explanation)
Copy Text 
WordPress (Headless) → REST API / GraphQL → React Front-End
Key WordPress Stores:
  • Posts
  • Pages
  • Categories
  • Custom fields (ACF)
  • Media
React Displays:
  • Blog pages
  • Single posts
  • Homepage
  • Categories
  • Search

React fetches all content using:

Copy Text 
https://yourwordpresssite.com/wp-json/wp/v2/posts

This API returns JSON data which React can show on the website.

Steps to Use React with WordPress Headless CMS
Step 1: Install WordPress & Enable REST API

Good news — the WordPress REST API is already enabled by default. You can test it by opening:

Copy Text 
https://yourwebsite.com/wp-json/

If you see JSON output, your REST API is working.

Step 2: Allow CORS (Cross-Origin Requests)

React (running on localhost:3000) must be allowed to access WordPress.

Add this to your .htaccess:

Copy Text 
<IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
 Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

Optional (restrict only to your domain):

Copy Text 
Header set Access-Control-Allow-Origin "https://yourreactapp.com"
Step 3: Create Your React App

Run this command:

Copy Text 
npx create-react-app my-app
cd my-app
npm start

Your React app will run at:

Copy Text 
http://localhost:3000/
Step 4: Fetch WordPress Posts in React

Create a React component:

Copy Text 
import React, { useEffect, useState } from "react";

function BlogPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://yourwebsite.com/wp-json/wp/v2/posts")
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Latest Posts</h1>
      {posts.map(post => (
        <div key={post.id}>
          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </div>
      ))}
    </div>
  );
}

export default BlogPosts;

This component displays all WordPress posts inside your React frontend.

Step 5: Display Single Post in React

Developers looking for Copilot-style AI help without paying a subscription.

6. Cursor AI – AI-Powered Coding Editor

Use dynamic routing:

Copy Text 
import { useParams } from "react-router-dom";

function SinglePost() {
  const { id } = useParams();
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`https://yourwebsite.com/wp-json/wp/v2/posts/${id}`)
      .then(res => res.json())
      .then(data => setPost(data));
  }, [id]);

  if (!post) return <p>Loading...</p>;

  return (
    <div>
      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  );
}

Now each post displays full content.

Step 6: Add React Router for Navigation

Install:

Copy Text 
npm install react-router-dom

Setup routes:

Copy Text 
import { BrowserRouter, Routes, Route } from "react-router-dom";
import BlogPosts from "./BlogPosts";
import SinglePost from "./SinglePost";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<BlogPosts />} />
        <Route path="/post/:id" element={<SinglePost />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
Step 7: Deploy React App

You can deploy the front-end using:

  • Vercel
  • Netlify
  • Firebase Hosting
  • AWS S3
  • GitHub Pages

The WordPress backend can stay on your normal hosting.

Optional: Use GraphQL Instead of REST

Install the plugin:

  • WPGraphQL
  • WPGraphiQL (for testing)

GraphQL is faster than REST and gives more control. Example query:

Copy Text 
{
  posts {
    nodes {
      id
      title
      content
    }
  }
}

In React, you can use Apollo Client to fetch GraphQL data.

Advantages of Using React with WordPress Headless CMS
  • Faster performance (React is lightning fast)
  • Better UI/UX
  • Front-end fully under your control
  • Use WordPress only for content
  • Perfect for blogs, business sites, news sites
  • Build mobile apps using the same API
When Should You Use WordPress Headless?

Use headless WordPress if you need:

  • A modern React front-end
  • A mobile app + web app using same backend
  • Faster page loading
  • Full control over design
  • Easier scalability
Avoid headless if:
  • You want to use themes
  • You prefer WordPress plugins for everything
Final Thoughts

Using React with WordPress as a headless CMS is one of the most powerful setups for modern web development. You get WordPress’s easy content management and React’s performance, flexibility, and interactivity.

Whether you’re building a blog, portfolio, business website, or full web app — this combination gives you speed, control, and scalability.