This article is one of Metal Toad's Top 10 React JS Tips. Enjoy!
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.