React WP theme: Smart vs Dumb components + React Router

actions/
components/
containers/
reducers/
store/

index.js
index.template.html

 where our app will mount:

index.js

index.js is the main file of our application. In it, we load all the React components, configure the main Redux store and most importantly set up the app routes with React Router.

I’ll paste the entire file here and will go through it, line by line:

Importing the important stuff

Have you noticed the countless import statements at the beginning of the file? Yeah, if we wanted to be less verbose, we could group them by usage into separate files and import just these, but this way it’s easier to understand and explain.

Firstly, we import React and Component from the react package. We use them to create a React component in the ES6 class manner, like this:

class MyReactComponent extends Component {
}

Looking at the index file, actually, we don’t really need that. 😛

Next is ReactDOM. It bridges the DOM with the React so we can now render the components into the DOM. Look at line 18. There, we call the ReactDOM.render() method, which renders the nested component into the DOM. react-dom used to be one library with react but they’ve decided to separate the two as programmers use React for other things than just creating web pages (e.g. React Native for building mobile apps).

createBrowserHistory is a small lib for managing the history of navigation in our browser. It uses the HTML5 History API if possible and falls back to hash history if not. If I remember correctly, this used to be a part of the react-router library but it’s more modular when separated.

Lines 4 and 6 are not important at the moment (Redux-related). Will talk about that in the next article.

import { Router, Route, IndexRoute } from 'react-router imports all the necessary modules for working with React Router.

React Router

React Router is a brilliant though very simple idea which makes routing in our app a walk with a breeze. It is similar to how we specify routes in Ruby on Rails or Django. It works like this:

• Everything is a standard React component.
• “ is a wrapper around the routes. Its purpose is to initialize the routing system with a specific history API. That’s why we need to provide the `history={…}` attribute to it.
• “ component points to a particular `path` (location in URL) and if that path is matched, it renders the component provided in the `component={…}` attribute.

And that’s basically it!

Let’s have a small example, shall we?

We have a small site (www.example.com) with three pages: home, about and contact. These pages are represented as three React components (i.e. Home, About and Contact). We add the following routing into the app:

Now, when we visit the http://www.example.com/home URL, React Router will look at the defined routes and match the first one (path="/home"). We assigned the Home component to the first route, so React Router will render it.

When we visit the http://www.example.com/about, it will behave exactly like before except rendering the About component instead of Home.

It’s very easy, isn’t it? But back to our code index.js.

Index.js continued

In the file index.js, we have a bit more complex React Router definition:

We can nest routes like other standard React components. It means that we don’t have to specify the whole path to the route — if the component is located “under” the path, we simply nest it.

In the code above, the path="/" is the index route. All the other application routes are located “under” it, that’s why the s representing them are nested inside it. Now, when we define the about page route, we don’t have to specify the initial slash character (/) because the route is nested under the root route with path="/".

“But”, you say, “what if we navigate to the /about URL? Which component will render? The AboutPageContainer or the LexiTheme one?”. Great question! As we nest the “about” route under the “root” route, React Router will render the LexiTheme component. However, it will pass AboutPageContainer as its children. If you know what React children components are, you surely know that in each component, we can access its children through the props like this: this.props.children. Then it’s just a matter of rendering the children components in the parent component, like this:

    

        

            {this.props.children}
        
        <Sidebar />
    </div>
</div>
<Footer />

So the logic here is that we have a single parent component (like LexiTheme) which renders the main navigation, header, sidebar, footer, etc. and its children which will change according to which nested route was accessed.

Phew, I hope you could understand what I was trying to say. Anyways, React Router docs explain it better than I ever could.

Smart vs dumb React Components

Let’s get back to the import statements. Notice that we import some React components from the containers/ folder (e.g. LexiTheme, AboutPageContainer). But the folder components/ holds React components too (obviously, according to its name). So what’s the difference between these two folders?

Initially, I was pretty confused. Then I read Dan Abramov’s article about Smart vs Dumb components and it clicked. To sum it up, we should divide React components into two groups: the smart ones and the dumb ones.

The smart component contains the logic, gathers data, performs computations. The dumb component is rendered from the smart one, passed the final data and just renders the view (HTML). Smart components are specific to a framework and usually can’t be reused easily. On the other hand, dumb components just render some HTML so they can be reused easily.

When we make this distinction, our app and components become reusable and clear. Hopefully.

So, there is a convention that the smart components reside in the containers/ folder while the dumb ones in components/ one. And that’s it.

Wrapping it up

Finally, we import the Bootstrap’s CSS files. The nice thing about Webpack is that it will simply import CSS files, compile them and put them in a separate .css file. We discussed this in the previous article in this series.

After importing all the required objects and modules (a lot of them), we instantiate the createBrowserHistory object, configure Redux stores (will talk about this in a further article) and find the root <div> (the one <div> we placed in the HTML template at the beginning of this post).

The last step is to render React components with ReactDOM.render() method. It takes two arguments: the component to render and the HTML element where to render it.