Installing the Flux package
We'll close the first chapter by getting our feet wet with some code, because everyone needs a hello world application under their belt. We'll also get some of our boilerplate code setup tasks out of the way too, since we'll be using a similar setup throughout the book.
The first NPM package we'll need installed is Webpack. This is an advanced module bundler that's well suited for modern JavaScript applications, including Flux-based applications. We'll want to install this package globally so that the webpack command gets installed on our system:
npm install webpack -g
With Webpack in place, we can build each of the code examples that ship with this book. However, our project does require a couple of local NPM packages, and these can be installed as follows:
npm install flux babel-core babel-loader babel-preset-es2015 --save-dev
The --save-dev option adds these development dependencies to our file, if one exists. This is just to get started—it isn't necessary to manually install these packages to run the code examples in this book. The examples you've downloaded already come with a package.json, so to install the local dependencies, simply run the following from within the same directory as the package.json file:
npm install
Now the webpack command can be used to build the example. This is the only example in the first chapter, so it's easy to navigate to within a terminal window and run the webpack command, which builds the main-bundle.js file. Alternatively, if you plan on playing with the code, which is obviously encouraged, try running webpack --watch. This latter form of the command will monitor for file changes to the files used in the build, and run the build whenever they change.
This is indeed a simple hello world to get us off to a running start, in preparation for the remainder of the book. We've taken care of all the boilerplate setup tasks by installing Webpack and its supporting modules. Let's take a look at the code now. We'll start by looking at the markup that's used.
<!doctype html>
<html>
<head>
<title>Hello Flux</title>
<script src="main-bundle.js" defer></script>
</head>
<body></body>
</html>
Not a lot to it is there? There isn't even content within the body tag. The important part is the main-bundle.js script—this is the code that's built for us by Webpack. Let's take a look at this code now:
// Imports the "flux" module.
import * as flux from 'flux';
// Creates a new dispatcher instance. "Dispatcher" is
// the only useful construct found in the "flux" module.
const dispatcher = new flux.Dispatcher();
// Registers a callback function, invoked every time
// an action is dispatched.
dispatcher.register((e) => {
var p;
// Determines how to respond to the action. In this case,
// we're simply creating new content using the "payload"
// property. The "type" property determines how we create
// the content.
switch (e.type) {
case 'hello':
p = document.createElement('p');
p.textContent = e.payload;
document.body.appendChild(p);
break;
case 'world':
p = document.createElement('p');
p.textContent = `${e.payload}!`;
p.style.fontWeight = 'bold';
document.body.appendChild(p);
break;
default:
break;
}
});
// Dispatches a "hello" action.
dispatcher.dispatch({
type: 'hello',
payload: 'Hello'
});
// Dispatches a "world" action.
dispatcher.dispatch({
type: 'world',
payload: 'World'
});
As you can see, there's not much to this hello world Flux application. In fact, the only Flux-specific component this code creates is a dispatcher. It then dispatches a couple of actions and the handler function that's registered to the store processes the actions.
Don't worry that there's no stores or views in this example. The idea is that we've got the basic Flux NPM package installed and ready to go.