Let’s build a WordPress theme with React: Part 2 (Routes + Context)



Now that we have our react app setup, let’s form how our application will be structured. We’re going to need 3 main folders: 1) templates, 2) partials and 3) context. These are all going to be inside react-src.

The templates folder is where we’re going to store the main files template files – namely Single.js and Archive.js. Single shows a single post, while Archive shows a running list of post in reverse chronological order.

The partials contain bits and pieces of reusable parts. These are files that make up the header, navigaition, pagination and the loop.

The context is where the data sits. We’re going to have two files in here – Context.js and WithConsumer.js. These files are what we need to store state and props. More on this later.

Also, don’t forget that we have our public folder (which is outside the src directory). This contains all the regular PHP files such as functions.php etc.

Routes

Let’s begin by adding a simple route. Make sure we’re in development mode by running:

npm run wpstart

Let’s create a new component called “Single”. Inside it, let’s start simple and put in the code below:

import React from 'react';

const Single = (props) => {
    return (
        <div className="Post">
            this is the page component
        </div>
    )
}

export default Single;

Pretty basic right? Now let’s install react router by running the command below:

npm install react-router-dom

Open up index.js and include react router in it

import { BrowserRouter, Switch, Route } from 'react-router-dom';

Inside the render function, let’s modify it to look like this:

ReactDOM.render(
<BrowserRouter>
    <Switch>
     <Route path='/page' component={Single}/>     
    </Switch>
  </BrowserRouter>, document.getElementById('root'));

Now navigate to your site, but append the path “/page”. You should see your page component rendered.

Now let’s go back to index.js and modify the Route to look like below:

<Route path="/page/:slug" component={Single} />    

Notice we’re adding a :slug to the path. We’re going to be updating our component with this parameter. The slug will be the actual “slug” of the WordPress post. If you modify our page component with:

<h1>this is the slug: {this.props.match.params.slug}</h1>

You should see something like below:

So by now, you should see how we’re going to continue with our theme. We’re going to be adding the following routes:

  • Home – mapped to “Archive”
  • Page + slug – mapped to “Single”
  • Post + slug – mapped to “Single”
  • Search + term – mapped to “Archive”
  • 404 – mapped to “404”

Go ahead and copy the Single component, duplicate it – and call it “Archive”. Then let’s match it to the routes above.

Our index.js now looks like below:

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'
import './index.css';
import Archive from './templates/Archive';
import Single from './templates/Single';
import Notfound from './templates/Notfound';

const routes = (
    <Router>
      <Switch>
           <Route exact path="/" component={Archive} />          
           <Route path="/page/:slug" component={Single} />    
           <Route path="/post/:slug" component={Single} />
           <Route path="/search/:term" component={Archive} />
           <Route component={Notfound} /> 
      </Switch>
    </Router>
  )

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

Partials

Let’s quickly talk about our partials. Partials are components that we will be reusing in each route component. Things that come to mind are header, footer, sidebar – and whichever reusable piece of code we will come across along the way.

Let’s go ahead and create 2 partials. Head.js and Foot.js. These will be the header and footer of our pages. The code will be a simple functional component like below:

/******Head.js*************/

import React from 'react'
function Head(){
    return (<div className="header">header</div>)
}
export default Head;

/******Foot.js*************/

import React from 'react'
function Foot(){
    return (<div className="footer">footer</div>)
}
export default Foot;

Now in our template components, simply import, and add the components in. Here is the how our Single.js will look like with the partials. Note – make sure you add them inside the main div:

import React from 'react'
import Head from '../partials/Head';
import Foot from '../partials/Foot';

const Single = (props) => {
    return (
        <div className="Post">
            <Head></Head>
            <h1>Home</h1>
            <Foot></Foot>
        </div>
    )
}
export default Home

In the browser, you will see our partials and home page starting to take shape. Inspect the code and it should look like below:

Do the same thing to the rest of our main components so they all share the same header and footer.

Context (Data)

As mentioned above, this is where our data will sit. React has Context API which allows you to have a centralized data store – so that you don’t have to pass data through each child component. This article is probably the best explanation on Context API. As a matter of fact, the two files that we’re going to build, is code that came from the article.

Let’s start with Context.js. This file is considered to be the “Provider“. Add the code below:

import React from "react";

const storeContext = React.createContext();
export const Consumer = storeContext.Consumer;

export class Provider extends React.Component {
  constructor(props) {
    super(props); 
     this.state = {
      posts : []      
    };
  }

 componentDidMount(){     
    this.setState({
       posts : ['title','title2']
    })
 }

 componentDidUpdate(prevProps){
    //more code here later...
 }
 render() {
    return (
      <storeContext.Provider value={this.state}>
        {this.props.children}
      </storeContext.Provider>
    );
  }
} 

Don’t worry so much about the test posts data. We’re just using that for – well, testing. Then let’s create WithConsumer.js

import React from "react";
import { Consumer } from "./Context";

function WithConsumer(WrappedComponent) {
  return function(props) {
    return (
      <Consumer>
        {ctx => <WrappedComponent {...props} context={ctx} />}
      </Consumer>
    );
  };
}

export default WithConsumer;

Now this one is pretty confusing. It’s basically a wrapper – for our components that require the “Consumer” component. Basically, all our components that want to “consume” data from our “Provider” will be using this file.

Now let’s create a partial called “TheLoop“. Add the code below:

import React from 'react'; 
import WithConsumer from '../context/WithConsumer';

const TheLoop = ({ context }) => {

    const posts = () => context.posts;
    const pos = posts();
  
    return (
       pos.map(function(item,i){
         return <div key={i}>{item}</div>
       })
    ); 
};
export default WithConsumer(TheLoop);

Notice that in our export – we’re passing our component TheLoop as a parameter to WithConsumer.

We’re going to talk more in detail about TheLoop component in our next session. For now, we just want to get it up and running – to demonstrate Context and Consumer.

Let’s open Single.js from our templates folder and modify it to look like this:

import React from 'react';
import Head from '../partials/Head';
import TheLoop from '../partials/TheLoop';
import Foot from '../partials/Foot';
import {Provider} from '../context/Context'

const Single = (props) => {  
  return (
    <Provider>
    <div className="Post">
      <Head></Head>
      <TheLoop></TheLoop>
      <Foot></Foot>
    </div>
    </Provider>
  )     
}

export default Single

You see how we’re wrapping everything in “<Provider>“, this is so we have access to our Context.js data. Also, we’ve included “TheLoop” as a component in between Head and Foot.

You should see “title” and “title2” in the browser by now.

Lastly, we need a way to get our “slug” parameter into our context. We can use props for that. Still in Single.js, pass the slug via props like so:

<Provider router={props}>

In Context.js, we should have access to the slug – through “props.router.match.params.slug“. As a matter of fact, we have access to the entire router object here, in a prop called “router”.

Let’s stop here for now. We are going to discuss more about TheLoop and Axios in our next session.



Leave a Comment.