How to Build Dynamic Websites with React and the WordPress API?

React is an effective JavaScript toolkit for creating dynamic user interfaces, and WordPress is a well-liked content management system (CMS) that underpins over one-third of the internet. Combining the two allows us to build dynamic websites that use React to display data obtained from the WordPress API in a dynamic and interactive manner.In this guide, we’ll show you How to Build Dynamic Websites with React, WordPress API, and displays posts + categories.

Step 1: Setting up the React App

Start by using Build React App to create a new React app. Enter the following command into a terminal once it is open:

‘npx create-react-app my-app’

This will create a new React app called “my-app”.

Step 2: Installing Dependencies

We must install several requirements before we can access to the WordPress API. They comprise:

A promise-based HTTP client for nodes and browsers is axios.

A collection of React navigational components called js react-router-dom
The following command should be used to install them:

‘npm install axios react-router-dom’

Step 3: Connecting to the WordPress API

In order to retrieve data, we now need to connect to the WordPress API. To access posts, pages, categories, and other stuff from WordPress, we’ll be utilizing the REST API.

We’ll employ axios to establish a connection to the WordPress API. Create a new file called api.js in your React app’s src directory and add the following code to it:

import axios from 'axios';

export const getPosts = () => {
  return axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts');
}

export const getCategories = () => {
  return axios.get('https://your-wordpress-site.com/wp-json/wp/v2/categories');
}

Replace ‘https://your-wordpress-site.com’ with the URL of your WordPress site.

Step 4: Creating Components

We can begin developing components to display the data now that we have established a connection to the WordPress API. The PostList and CategoryList components should be created.

Make a new components folder in the src directory. Create the PostList.js and CategoryList.js files inside this folder. To PostList.js, add the following code:

import React, { useEffect, useState } from 'react';
import { getPosts } from '../api';

const PostList = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    getPosts()
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title.rendered}</li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;

And add the following code to CategoryList.js:

import React, { useEffect, useState } from 'react';
import { getCategories } from '../api';

const CategoryList = () => {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    getCategories()
      .then(response => {
        setCategories(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h2>Categories</h2>
      <ul>
        {categories.map(category => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </div

Step 5: Adding Navigation

We have two components now; let’s add some navigation so that we may switch between them. The following code should be added to the App.js file in the src directory:

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import PostList from './components/PostList';
import CategoryList from './components/CategoryList';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/posts">Posts</Link>
            </li>
            <li>
              <Link to="/categories">Categories</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/posts">
            <PostList />
          </Route>
          <Route path="/categories">
            <CategoryList />
          </Route>
          <Route path="/">
            <h2>Home</h2>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

With connections to the home page, the posts page, and the categories page, a navigation menu is created. The associated components are displayed when the links are clicked.

Step 6: Styling the App

Let’s add some styles to improve the app’s visual appeal. Add the following styles to the App.css file in the src directory by opening it:

nav {
  background-color: #333;
  overflow: hidden;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

With a black background and white lettering, this produces a straightforward navigation bar. To suit your demands, you can alter the styles.

Conclusion:

As a result of this lesson, you now know how to use React with the WordPress API to create a dynamic website. In order to display posts and categories, we connected a React app to the WordPress API, and we also included navigation to navigate between the different parts of the app. Using this information, you may create robust and dynamic WordPress-integrated websites. more info contact Us