Serving up WordPress with React Part II

Welcome back to the second part of the Setting up WordPress with React. In case you missed it, check out Part 1 before continuing so that you’re all caught up. If you’re all set, then lets begin by setting up our folder structure. Now this bit is entirely subjective, if you feel you have a better way to structure your app then feel free to do so, as long we accomplish our goals. Speaking of which, our application goals are the perfect way to decide on the structure of the app. So let’s run through our application goals quickly.

We want to allow all visitors to :

  • See a listing of all posts
  • Search for specific posts
  • Filter posts (By Category / Tags / Date)
  • Sign Up

All Registered Users should be able to :

  • View all authored posts
  • Create / Update / Delete posts
  • Sign In / Sign Up

In this part we’ll deal with handling Post data only and move onto to Authentication and User data later.

With that in mind, let’s start by creating our containers. We need our Home Page to hold a listing of all our posts, which are searchable and filterable. So that makes it our Blog page. So within our Container folder in our Src folder, create a Blog folder. This will contain our Blog.js, which holds our React Class Component.

Take a look at the diagram for a clearer look at the folder structure.

Our Blog Container will handle the processing of all our posts and will mainly deal with Post data. I’ve set up components to include Navigation, and Post and Single Post views.

 

 

Now let’s begin by setting up our app to use our dependencies for routing and Bootstrap.

In Index.js add the following imports

import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';

Create a new constant for App to include BrowserRouter.

const app = (
  <BrowserRouter>
   <Provider store={appStore}>
     <App />
   </Provider>
  </BrowserRouter>
);

ReactDOM.render(app, document.getElementById('root'));

Moving onto App.js, remove all the content you see there, since create-react-app pre-populates the file with some content. Then we use Route to specify our routes that App.js needs to load. AnimatedSwitch is a replacement for Switch, since I want the route transitions to be animated. Other than that there is no difference in usage from Switch, which is imported from react-router-dom.

If you remember, Navigation, Blog and SinglePost are all containers and components from our folder structure. Use empty components for now for the sake of placement. We’ll fill them out eventually.

Now let’s set up our Navigation bar using Bootstrap. In our Navigation container, add the following code:

The main import here is my NavigationItem component which handles the display of the navigation items. I’m using an array so that when I need to add more links later there is a convenient way of doing it. The isVisible property may not seem useful now, but will come in handy once we work out authentication.

Here’s a look at our NavigationItem.js file.

And that should set up our Navigation bar with clean Bootstrap styling. Before we can move on to working with our Blog, take a quick look at a video on the WordPress Rest API routes we will be using in this section. All calls are made using Postman, we’ll use them in React soon.

Now that we’re familiar with our to make our API call, let’s get started with the Posts section of our React app. In order to set up our posts we first need to set up our Redux store, so that we can share data easily among components. For this we set up a Store folder to hold all our Redux related files. I have two folders Actions and Reducers to hold my action methods and Reducers. Let’s start with our Reducers for the Posts first.

Create a new file posts.reducer.js.

Start by setting the initial state of our data and our reducer function which simply returns state for now.

const initialState = {
 posts: null
}

const postReducer = (state = initialState, action) => {
 return state;
};

export default postReducer;

This will allow us to set up our store in our index.js file. In order to do so, we need to following imports

Our store is all set up. Before I start making axios call, I want to set up an axios instance with my base URL, so that my axios calls look neater.

Now before we can work on Blog container, we have to set up an action method to load all posts. So let’s create a file posts.actions.js in our Actions folder in Store.

Now our reducer needs to be updated to handle this action, and to set the value of posts in our store.

With that, we can now easily access our retrieved posts in our React application. Let’s finally get started with our Blog container. Here I will display the list of posts using the Post component.

Now let’s look at how the Post component is set up to display the post.

Note that to rig up my Read More button, I’m making use of a different component, SinglePost to load the post. App.js loads this component for the URL /post. So I push this URL along with the selected posts ID into the history array to force a URL change. Here is my SinglePost component.

In order to load a single post I’m using a different action, wherein I’m loading a single post by the ID passed to the method. The rest of the process is the same, I still need to load the featured media separately from the Media table.

Now our ReactPress should load a list of 5 posts, and allow you to view any of these posts in a more detailed view.

Join me next week as we add pagination to our Blog, search and filtering. You can find all the code at https://github.com/kvnam/reactpress

If you have queries or comments, do write to me at kavita@bluekrill.com, or hit me up on Twitter or LinkedIn.

If you like it, tell others:

Leave a Comment

Your email address will not be published. Required fields are marked *