How to Integrate React with WordPress: Step-by-Step Guid

You have two main ways to integrate React with WordPress:

1. Headless (Decoupled) WordPress → React as a separate frontend using the REST API or GraphQL.

2. Embedded React App inside a WordPress Theme or Plugin → React components run within WordPress pages.

Below, you’ll learn both approaches.

⚙️ Option 1: Headless WordPress with React Frontend

In this setup, WordPress acts as a content API, and React is your frontend app.

✅ Step 1: Setup WordPress Backend

1. Install WordPress locally or on a server.

2. Enable REST API (enabled by default in modern WP).
   You can test it by visiting:

   https://yourdomain.com/wp-json/wp/v2/posts

3. Install useful plugins:

   • JWT Authentication for WP REST API (for secure login/auth).

   • WPGraphQL (optional, for GraphQL support)

✅ Step 2: Create a React App

Run:

✅ Step 3: Fetch WordPress Data

In your React app, open src/App.js and replace with:

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

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

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

  return (
    <div style={{ padding: "20px" }}>
      <h1>My WordPress 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 App;

Then run:

✅ You’ll now see your WordPress posts displayed in your React frontend!

✅ Step 4: Deploy Separately

• Host your WordPress site (for backend & content).

• Host your React app (Netlify, Vercel, etc.).

• React will keep fetching data from your WordPress domain.

🧱 Option 2: Integrate React Inside WordPress Theme/Plugin

✅ Step 1: Build Your React App

Create and build your React app:

npx create-react-app my-react-app
cd my-react-app
npm run build

This creates a /build folder with static assets.

✅ Step 2: Add React Build to WordPress Theme

Copy the /build contents into your WordPress theme folder:

/wp-content/themes/your-theme/react-app/ 

✅ Step 3: Enqueue React Scripts in functions.php

In your theme’s functions.php:

function enqueue_react_app() {
  wp_enqueue_script(
    'my-react-app',
    get_stylesheet_directory_uri() . '/react-app/static/js/main.js',
    array(),
    null,
    true
  );

  wp_enqueue_style(
    'my-react-app-style',
    get_stylesheet_directory_uri() . '/react-app/static/css/main.css',
    array(),
    null
  );
}
add_action('wp_enqueue_scripts', 'enqueue_react_app');

✅ Step 4: Add React Root Div in Template

In your theme’s template (like page-react.php):

<?php /* Template Name: React Page */ get_header();
?>

<div id="root"></div>

<?php get_footer(); ?> 

✅ Step 5: Create a Page and Assign Template

1. In WordPress Admin → Pages → Add New.

2. Select “React Page” template.

3. Publish → Visit Page → React App loads inside WordPress!

 Bonus Tips

• Use Axios for advanced API requests.

• For authenticated routes, use the JWT plugin and Authorization header.

• For SEO, consider Next.js + WP REST API instead of plain React.

🚀 Best Stack Recommendation (2025)

If you want a fast, SEO-friendly modern setup, go with:

• WordPress (Headless Backend)

• Next.js (React Framework)

• WPGraphQL + Apollo Client

This gives you static generation, dynamic routes, and headless CMS flexibility.