React WP theme: Creating dumb components

In today’s post, we will look at Bootstrap blog template and create React dumb components out of it. Nothing too fancy, just some copy pasting and refactoring. After completing the steps in the article, we’ll be ready to create the smart components, plug the dumb ones into them and have a working blog theme!

Tutorial navigation

1. React single-page WordPress REST API theme tutorial
2. React WP theme: structure, Node packages and Webpack
3. React WP theme: Smart vs Dumb components + React Router
4. React WP theme: Creating dumb components (current)
   .
   . to be written
   .

Breaking down Bootstrap blog theme

The first step is to analyze Bootstrap’s blog theme design and decompose it into logical parts. Let’s have a look at the first figure below:

From it, we can see that there is a main navigation, header, list of posts and a sidebar. The figure below depicts the bottom part of the theme:

This time, there’s a pagination and a footer.

We will create React components according to these observations.

Creating the dumb components

In the previous article, I talked about smart vs dumb React components. To sum it up, it’s basically a division between the controller and the view (for those coming from the MVC world). A React component can contain any kind of logic and presentation as well so it’s a good idea to split it into separate components: the smart ones handle logic (data fetching, computations, transformations) and the dumb ones the presentation of data (HTML).

Firstly, let’s create the dumb components. We’ll place them into the src/components folder.

Header

Create a new file called Header.js in the src/components/ folder. Firstly, we need to import React and Component objects from the package react because both of them will be used throughout the code.

import React, { Component } from 'react';

Now, let’s create a new class called Header which extends from Component:

class Header extends Component {

}

In the first figure, we can see that header is really simple — just two lines of text. That’s why the class will contain only the render() method with some HTML written in the JSX syntax. Here’s the complete file:

Footer and Sidebar

Like Header, footer and sidebar are very simple. We just import React, Component and transform HTML into JSX. Here are the files: footer, sidebar. Note: I might update these components in the future so they might not be that simple. In that case, I’ll write a new article describing how to do it.

Facebook has a cool online HTML to JSX transformer. Although I prefer doing it myself, you can also use that for the job.

MainNavigation

Now, something more interesting. Earlier, I showed you how to use React Router with React to implement the basic Routing. But that’s only one part of the puzzle. What about links in the navigation? How should they look like?

As usual, we need to import React and Component. Then, we need to import Link from react-router:

import { Link } from 'react-router';

Link is a React component which renders the <a> element with proper URL address and performs the routing on clicking the link. It also assigns a special class to the element when the link is active (=> we are on the site the link points to). How does it look like?

<Link to="/about" className="nav-link" activeClassName="active">About</Link>

The most important prop is to. It specifies the <Route> which the link will navigate to. In our case, it’s the <Route path="about" component={AboutPageContainer} /> route. Notice that I put the ‘/’ at the beginning of the path — it’s because if I didn’t, the link would just add ‘about’ to the current URL and that would not match any Routes. So, when I click the About link, React will render the AboutPageContainer component, thus “navigating” us to the About page (more details in the following article).

We can use the activeClassName prop to define our own CSS class which React Router will add to the link when it is active.

Here’s the complete MainNavigation.js file:

AboutPage

AboutPage.js is a dumb component which takes a page data (title, content, etc) as an input and outputs a page in HTML. This component is very similar to those we talked about before, except one thing — we can’t simply put HTML code into a React component due to security precautions.

A standard page has some text which gets wrapped into paragraphs (<p>) when saved to database. Normally, React disallows us from putting HTML into a React component because it “can open you up to a cross-site scripting (XSS) attack“. Fortunately, there’s an official way to bypass this restriction — but I warn you, you gotta be sure about the HTML/JS code your page has. It could really result in a nasty hack.

To put HTML into React component, we need to write a function first:

createMarkup(html) {
    return {
        __html: html
    }
}

This function takes the (secure) HTML as an input and returns an object containing one key __html (notice the double underscore) with the (secure) HTML as its value. Nothing fancy, just to discourage the programmers who don’t understand the risks.

Now that we have the createMarkup function, creating the AboutPage component is really simple. Here’s the entire code:

Post

Post.js is mostly the same as AboutPage.js except we also use the post’s date to display it. Link to the component.

Conclusion

We have learned how to create a simple React component with JSX syntax and how to output HTML content in it. In the following article, we’ll create the smart components which will retrieve the data from the WP backend, handle the logic and pagination. Stay tuned!