« Previous Tutorial Next Tutorial »

All right, with our hot-reloading back and working, it’s time to get started DRYing out our code. As mentioned in an earlier tutorial, the DRY stands for “Don’t Repeat Yourself” and references a fundamental good practice in programming: if you can do something once, instead of repeatedly, it’s generally a good idea to do so.

Here’s the thing with DRY though – it’s possible to take it too far. When you’re writing code, you need to establish a balance between lots of things. Not being repetitive is good, but so is writing code that’s actually readable. Producing code at a quick and steady rate is also extremely valuable. It’s very possible to fall down the rabbit hole of trying to produce beautiful, perfect, non-repetitive code, and end up spending huge amounts of time producing ever-more-obscure functions and massive super-objects meant to anticipate every possible use case. There are diminishing returns when you get this far down. Sometimes it’s faster, easier, and better to just accept that some stuff is going to repeat a little.

For example, we’re going to end this tutorial with two components that still have an identical Bootstrap-based container around them. This is OK. Preferable, actually, because it allows us to look at the components individually and have a better understanding of how they relate to page structure. Sure, we could do a Template component, and then have it call a “BootStrapRow” component, and then pass props to BootStrapRow that tells it which components to use in the Row, and what classes to add to them, but … that misses the point. Components are meant to be self-contained blocks. In the case of our page level components, that means page-level containers. So don’t get too freaked out when you see that there’s still some repetition.

Anyway, our DRYing process is pretty fast and straightforward, at the moment. We’re going to create a Sidebar component, and then we’ll shift a little bit of code from our pages to our template.

Swing over to Sublime Text and, in /src/components/shared, create a file called Sidebar.jsx, and in it deposit the following code:

import React from 'react';

export default function Sidebar() {
  return (
    <aside className="col-sm-12 col-lg-4">
      This is the new sidebar component.
    </aside>
  );
}

That’s a super-simple, pure-functional React component, right there. Obviously we’ll be doing more with it later, but it’s not later, it’s … it’s right now, so let’s move on. Open up /src/components/home/HomePage.jsx and let’s make some changes. First, add a line after line 1, and on line 3, add the following:

import Sidebar from '../shared/Sidebar';

This will let us replace our non-shared sidebar code with the Sidebar component, so let’s do that. Nuke these three lines:

      <aside className="col-sm-12 col-lg-4">
        This is the sidebar.
      </aside>

and replace them with this one:

      <Sidebar />

The next thing we want to do is remove some of the container HTML from this page. Cut the following two non-sequential lines out of HomePage.jsx and add them instead to /src/components/Template.jsx

    <section className="page-content">
    </section>

So that Template.jsx returns this:

    <Router>
      <div className="wrapper">
        <Header username="anonymous" />
        <section className="page-content">
          <Route exact path="/" component={HomePage} />
          <Route path="/account/profile/:id" component={ProfilePage} />
        </section>
      </div>
    </Router>

Good. Save that and return to HomePage.jsx real quick, where you’ll note that ESLint is complaining because the rest of our HTML is now tabbed in one level too deep. Fix that, and save this file as well. Now open /src/components/account/ProfilePage.jsx and add the following to line 3, just like HomePage.jsx:

import Sidebar from '../shared/Sidebar';

Then remove the opening and closing section tags entirely (again, you’ll need to remove an indent level from your code), and replace these lines:

        <aside className="col-sm-12 col-lg-4">
          This is the profile page sidebar
        </aside>

With this one:

<Sidebar />

Save that file, and we’re good to go. If you had your Express server running this whole time, you’ll have seen it update a few times as you saved files. Hooray, hot-reloading. If not, you’ll need to fire it up and hard-refresh localhost:3000 to make sure you have the latest JS bundle. You should be able to navigate between HomePage and ProfilePage by clicking on the links, just like before, and you’ll see that each is using the new Sidebar component.

Cool, we’re all set. Next up: let’s get some Bootstrap up in here, so that things start to look at least marginally prettier than they do right now. See you soon!

« Previous Tutorial Next Tutorial »