Flux Architecture: Overview and Project Setup

[00:00] In a typical React application all of the root component's information and functionality is handed down to nested or children components and those components are represented in our Flex application diagram here in this view panel. Now, the view panel represents everything React. The rest of these guys are not React. They are Flux.

[00:24] You can see here that the view can send an action to a dispatcher received by a store, which in turn can send that action back to a view. Now, a view can register to listen to particular actions or events within our application.

[00:40] When it does register and an action is triggered, potentially by another view, we've got this guy, the dispatcher. Now, the dispatcher receives everything that happens in our application as an action and then distributes that information to the correct store.

[00:55] Now, the store manages all the state in our application. When the store receives an action and something is changed in the state of our application, it then announces that to the rest of our application and any view that was registered to listen for that action is updated as the store basically delivers the state of that view or component.

[01:18] To get started our Flex application we're going to go ahead and MPM a nit in order to set up our package json. I'll just enter through these guys. We'll clear that out. Now we're going to MPM install Flux, which will get us the open-source dispatcher code available to us from Facebook. Of course we're going to have React, React.DOM, and also React Router, and right now we're going to go ahead and make sure that we get the latest version, which would be 1.0Go and save that to our dependencies.

[01:52] Now that those are installed, I'm also going to mention that we're also going to be using Babel as well as Webpack, so you're going to want those installed so that'd be MPM install Babel, Webpack, as well as Webpack Dev Server.

[02:08] You can just throw a tac G on there in order to install those globally. Assuming you have those installed we're going to go ahead and install a couple other dependencies. These would be our dev dependencies. It's going to be Babel loader and a couple Babel presets. First React, then ES2015. We'll save those to our dev dependencies. Minor typo there.

[02:38] Now that we've installed all the packages we'll need, let's go ahead and set up some of our application structure.

[02:43] First thing I'm going to do is create a directory called dist, which is where built application will live. Create a directory called source, which is where our source code will go. CD into that and we're going to create another directory called js, for JavaScript. CD into that, and now we're going to create a handful of directories beginning with actions, then components, constants, dispatchers, mix-ins, and finally stores.

[03:14] Additionally right here in the JS directory I'm going to go ahead and create a main.js, which will act as our entry point into our application. CD into components and create an app.js, which will be our root component. Finally I'm going to back up to our disk directory and create an index.html file and we can move onto our build process.

[03:44] Our build process is going to use Webpack, so we're going to create a webpack.config.js, and I'm just going to drop in some boilerplate here. This won't be a series on Webpack but I'll walk you through it really quick.

[03:59] We are exporting this object. It has a key of entry, which points to the entry file that we created in our source JS. That's the main JS. We've got an output object here that's going to output to this path, which is our dist directory. Our file name is going to be bundle, and we've got this public path, which is a way for the Webpack dev server to generate URLs so it knows where to get this file when we are running a dev server.

[04:27] We've got some dev server configuration here. Inline true and content base. I'm not really going to go into those, but this is inline versus IFrame and content base is just where our content actually lives. Then down here we've got our loader. We've only got one of them. We're testing for JSX or JS. We're excluding anything in node modules or bower components. Our loader is in fact Babel, and then on the query key here we're loading in our presets of ES2015, as well as React.

[04:57] Now, in our package json, I'm going to go ahead and create a script called start. We're simply going to run webpack-dev-server and that will automatically pick up on the webpack config file we just created.

[05:16] Now we're going to jump over to our dist directory and set up our index.hml. Let's call that Flux. We're going to drop in Bootstrap just so our application looks nice. Set our script source to bundle.js, which doesn't exist yet but will be built by Webpack.

[05:35] We're going to set up a div here with an ID of main. That'll be the target for our application. We're going to jump into our components and here in our app JS, which would be our first component we're going to import React from React and we're going to set up our app component, which we'll export by default.

[05:54] I'm just going to return NH1 and we'll just say Flux inside that NH1. Save that and we'll jump to our main. Here we're simply going to import React from React. We're also going to import React.DOM from React.DOM, since we're going to be rendering these components to the DOM, and of course we're going to import app from components app. We're just going to react.DOM.render our app component to document.git element by ID main.

[06:29] We should just be able to go ahead and MPM Start. If we load up the browser and head over to local host 8080, we should see our application up and running. There it is. If we jump back over here to our app component, let's get the browser on the screen and we go ahead and change this to "a Flux app" and save that, we should see it refresh there in the browser, and there it is.