Flux Architecture: Overview and Project Setup

Flux Architecture: Application Dispatcher

Flux Architecture: Application Actions

Flux Architecture: Application Store

Flux Architecture: Components/Views

Flux Architecture: Higher-Order Components

Flux Architecture: Project Organization

Flux Architecture: Routing with react-router 1.0

Flux Architecture: Component Wrap Up

Flux Architecture: Dumb Stores

React: Flux Architecture (ES6)

In this lesson we'll organize our components by feature.

[00:00] Now that we have our Flex application architecture pretty well mapped out, we're going to move on to creating the full application that we intend to create. We're going to be introducing a lot of new components.

[00:11] We've got this header up here. We've got some routing. We've got this new page that's just for an individual component. We've got our separated cart. What I've done is broken all that out into components.

[00:26] We've got a header up here that contains the cart summary component. You see this entire thing is wrapped in, what I'm calling, app template, because we've got this header on every single view.

[00:38] We've got our Catalog Detail page. We've got our header. We've got our app template wrapping all that. We've got our cart, which is pretty much built. We're going to be putting it into its own route and wrapping it in our app template.

[00:51] One thing we're going to run into here is this Components directory. We're sticking every single component into it. This is what Cliff Meyers would call, "The Sock Drawer method of organization."

[01:02] What we want to do is organize our components by feature. I'm going to jump into our source/js directory, then into our Component directory. We're going to create a couple of directories here. We're going to have one for our cart, one for our catalog, one for that header component, and one for product. That'll be our standalone product page.

[01:27] Now that we've got those, we're going to take our Cart button, cart item, and app cart. We're going to paste those into the Cart directory. We're going to take our app catalog and our catalog item, paste those into our Catalog directory. We're going to need to update some of our paths.

[01:48] Actions is now two directories up. Stores is two directories up. Mix-ins is two directories up. Jump to our catalog. Two directories up for our store and our StoreWatchMixin. Our Catalog Item Actions is two directories up. Our Cart button is one directory up and in our Cart directory.

[02:18] Save that. Jump over to our app where our catalog is now in the Catalog directory, and our cart is now in the Cart directory. Save that. Check out our app. Everything seems to be working fine. Now, we're much more organized.

Course

React: Flux Architecture (ES6)

Flux Architecture: Project Organization

Share this video with your friends