Metal Toad has been building applications and cloud environments for some of the most well-known global brands for over a decade. Learn more > >

ReactJS Architecture: Part 2

Review

In part 1 (React Architecture: Part 1) we discussed a desire to configure a working React website with as few addons as possible. The post ended with the creation of a basic Webpack config, which left us with a project structure like this:

  - app/
   | - webpack.config.js
   | - index.html
   | - entry.js
   | - node_modules

If that is correct, running webpack --progress --colors on the command line should generate an additional file, called bundle.js. This file contains any and all required JavaScript dependencies, and can be placed in a directory to be included in the index.html file. For this blog post, this will be the only included JS file in that index.html file.

If anyone is wondering, my index.html file looks like such:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

Each time the webpack command is run, the bundle.js file is overwritten with new changes. That's kind of it for Webpack (for this series). As long as external libraries are installed via npm and required correctly, they'll be included in the bundle.js file.

HOW DO WE ROUTE, THOUGH

Director is my "I don't want to learn anything new, how can I get something going quick" router. It's old(ish), but it's very to-the-point. Attach a route to a function. For the sake of this blog post, that's exactly what we're looking for. As a first step, be sure to npm install director --save Doing this will include Director as a JS dependency for Webpack to include in the bundle.js.

The next step? Including Director in the entry.js file and creating some routes/route handlers.

As a demonstration (that can be removed later), I've included a <div id="content"></div> to throw content into in the DOM. This'll be useful for troubleshooting/testing Director.

In entry.js, we can add:

// es6 Import the Router
import {Router} from "director";  
 
// A simple Dashboard route handler
let dashboard = () => { document.getElementById('content').innerHTML = "Dashboard" };  
 
// A simple Alex route handler. 
// This takes an argument to be passed in by the Router.
let alex = (doesWhat) => { document.getElementById('content').innerHTML = "Alex " + doesWhat };  
 
 
 
let routes = {
        // A static route
	'/dashboard': dashboard, 
        // A route that takes a URL parameter. 
       // So if a user went to /alex/Rules, the document would display "Rules"
       '/alex/:doesWhat': alex      
 
};
 
// Begin listening for route changes.
let router = Router(routes);
router.init();  
 
// If the user goes to the site without a route, force Director to get initialized.
if (window.location.hash === '') {
	window.location.hash = '/dashboard'; 
}

After rerunning webpack and refreshing the page, you should be forced to /dashboard. If you then navigate to /alex/Rules, the content element in the body should display the text from the URL.

So what?

So we haven't touched React yet, and it's a bummer. The next post will definitely include some React funsies. For now, we've created a build system (webpack) and configured a Router to listen for route changes. This doesn't seem like much, but the next portion will be all about various types of React components, where and why to use each, and how it plays into the whole infrastructure. Dan Abramov (the guy that authored the super awesome Flux implementation Redux) wrote a really awesome blog post on Container and Presentational React components (or what I'll be calling Smart and Dumb) components that'd be a really great read in the mean time (Presentational and Container Components). This architecture is built completely off of the idea of Smart vs Dumb components, so it'd be good to have that React background.

Guess what? There's a JavaScript Architecture Part 3!

Learn more about JavaScript in our JavaScript Blog Archive.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready to get started?