How you can use WordPress with React to build a Modern Web App

To use our WordPress with React, we will treat WordPress as a headless CMS, WordPress will manage the content, while React will render it on the front end.

1. Install and configure WordPress

Install WordPress locally (using LocalWP, MAMP, or XAMPP) or on a live server. Once installed, access the WordPress REST API by visiting:

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

If you see JSON data, the API is active and ready.

2. Add key plugins

Enhance your headless WordPress setup with these essential plugins:

JWT authentication for WP REST API – for secure user login.

Advanced custom fields (ACF) – for managing custom content fields.

WPGraphQL (optional) – if you prefer using GraphQL over REST.

With this setup, WordPress becomes a powerful back end, exposing data and accepting authenticated requests.

Now that your headless CMS is ready, it’s time to build a React front end for WordPress.

1. Initialize the React App

Use vite for fast performance:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

2. Install Axios

We will use Axios to interact with the WordPress REST API:

npm install axios

3. Create API utility

Create a file with file path services/api.js, inside the React project:

import axios from 'axios';
 
const API_URL = 'https://yourdomain.com/wp-json/wp/v2';
 
export const getPosts = async () => {
  try {
    const response = await axios.get(`${API_URL}/posts`);
    return response.data;
  } catch (error) {
    console.error('Error fetching posts', error);
    return [];
  }
};

Now that data retrieval is ready, let’s render it.

Edit App.jsx to include:
import React, { useEffect, useState } from 'react';
import { getPosts } from './services/api';
 
const App = () => {
  const [posts, setPosts] = useState([]);
 
  useEffect(() => {
    getPosts().then(setPosts);
  }, []);
 
  return (
    <div>
      <h1>WordPress & React Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title.rendered}</h2>
            <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
          </li>
        ))}
      </ul>
    </div>
  );
};
 
export default App;

This simple setup connects your React front end for WordPress directly to your content.

To enable login and secure interactions, integrate JWT authentication.

1. Install JWT decode

npm install jwt-decode

2. Update api.js to include login

export const login = async (username, password) => {
  try {
    const response = await axios.post(`${API_URL}/jwt-auth/v1/token`, {
      username,
      password,
    });
    return response.data;
  } catch (error) {
    console.error('Login failed', error);
    return null;
  }
};

3. Create a login component

import React, { useState } from 'react';
import { login } from '../services/api';
 
const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState(null);
 
  const handleLogin = async () => {
    const data = await login(username, password);
    if (data) {
      setToken(data.token);
      localStorage.setItem('token', data.token);
    }
  };
 
  return (
    <div>
      <h2>Login</h2>
      <input type='text' placeholder='Username' onChange={(e) => setUsername(e.target.value)} />
      <input type='password' placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};
 export default Login;

This approach empowers users to log in and securely access protected data.

Deploy WordPress

You can host your WordPress website/backend using the providers like Kinsta, WP Engine, or on your own LAMP/LEMP stack.

Deploy the React App

After building your front end with:

npm run build

You can deploy it on Netlify, Vercel, or any static file server.

• Performance: React loads content faster, improving user experience.
• Scalability: Decoupled systems scale independently.
• Flexibility: You can customize and control each and every part of the front end.
• Better developers experience: It allows developers to use modern JavaScript tools and practices with the state management, and routing features.

When using WordPress with React, you are now taking advantage of the best parts of both ecosystems, which contributes to robust content management and the cutting-edge UI frameworks. If you are considering a custom solution to build a WordPress and React App, explore our custom web development services to turn your idea into a world-class product. If you’re considering a custom solution, explore our custom web development services to turn your idea into a world-class product.

Very obviously, the integration of WordPress and React is redefining the standards for web development. Whether you are building a blog, a portfolio, or an enterprise-level web application, these technologies will deliver the performance and flexibility to your modern application and satisfy the user’s demand.

If you are looking for experts in this space, partner with a top WordPress website development company to ensure your project is built to the highest standards.

Let the synergy of WordPress with React power your next big idea!