Steps to Build a Stunning WordPress Theme with React JS

Introduction

WordPress powers over 40% of websites, but traditional PHP-based themes can feel outdated. React JS offers a modern,
dynamic solution to enhance user experience, performance, and maintainability. This guide walks you through the process
of building a custom WordPress theme using React JS.

Why Use React JS for WordPress Themes?

React JS enhances WordPress themes by:

• Improving
  performance
  with a fast-rendering virtual DOM.
• Creating
  dynamic and interactive
  UI components.
• Offering a
  component-based architecture
  for reusable code.
• Ensuring
  seamless integration
  with the WordPress REST API.

Step-by-Step Guide to Building a WordPress Theme with React JS

Step 1: Set Up Your WordPress Environment

Before integrating React, ensure you have a WordPress development environment ready:

• Install
  Local WP
  or use XAMPP/MAMP.
• Download and set up the latest version of WordPress.
• Create a new theme directory in
  wp-content/themes/your-theme-name/
  .

Step 2: Install React and Set Up a Frontend Project

React requires a separate project structure. Set it up using:

npx create-react-app your-theme-react
cd your-theme-react
npm start

This initializes a React project with a development server.

Step 3: Connect React with WordPress

To serve your React app in WordPress, follow these steps:

• Build Your React App

npm run build

This generates static assets in the build folder.

• Move the Build Folder Copy the contents of build to your WordPress theme directory.

• Load React in WordPress In functions.php, enqueue React scripts:

function theme_enqueue_scripts() {

    wp_enqueue_script('react-app', get_template_directory_uri() . '/build/static/js/main.js', array(), null, true);

    wp_enqueue_style('react-style', get_template_directory_uri() . '/build/static/css/main.css', array(), null);

}

add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

Step 4: Fetch Data Using the WordPress REST API

React communicates with WordPress through the REST API. Fetch posts dynamically:

fetch("https://yourwebsite.com/wp-json/wp/v2/posts")

  .then(response => response.json())

  .then(data => console.log(data));

Step 5: Create a Custom React Component for Blog Posts

Example of a simple React component for displaying WordPress blog posts:

import { 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>

      {posts.map((post) => (

        <div key={post.id}>

          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />

          <p dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />

        </div>

      ))}

    </div>

  );

}
export default BlogPosts;

Step 6: Deploy Your React-Based WordPress Theme

• Ensure the
  React app is properly integrated
  in the theme.
• Upload the theme folder to wp-content/themes/.
• Activate the theme in
  WordPress Admin > Appearance > Themes
  .
• Test the site for responsiveness and performance.

Example: Creating a React-Based Theme Structure

Here’s an organized directory structure for a React-based WordPress theme:

your-theme/

│── build/             # React build output

│── template-parts/    # PHP files for templates

│── index.php          # WordPress main template

│── style.css          # Theme stylesheet

│── functions.php      # Enqueue scripts & styles

│── header.php         # Theme header

│── footer.php         # Theme footer 

Optimizing Your React-Based WordPress Theme

To maximize performance:

• Use
  code splitting
  with React.lazy() and Suspense.
• Optimize images with the next-gen format (e.g., WebP).
• Implement
  lazy loading
  for components.
• Enable caching for API calls.

Conclusion

Integrating React JS with WordPress can transform a static theme into a dynamic, fast, and interactive experience. By
following this step-by-step guide, you can build a modern, stunning WordPress theme tailored to today’s web standards.

For more tutorials on WordPress and React development, check out
Ajay Khandal’s blog
and explore insightful articles like:

• Best Practices for WordPress Development

Prefer to keep the theme itself classic PHP and swap in React only where it counts? Compare this approach with building a custom WordPress theme from scratch, or take the React pattern further into plugin territory with creating a WordPress plugin using Node.js.