Name: React Flux: Project Organization
Uploaded: 2014-07-09T11:29:26-05:00
Description: Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

React Flux: Development Environment Setup

React Flux: Overview and Dispatchers

React Flux: Actions

React Flux: Stores

React Flux: Components/Views

React Flux: Project Organization

React Flux: Routing with react-router-component

React Flux: Remove Duplicate Code with Mixins

React Flux: Wrapping Up

React: Flux Architecture (ES5)

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

https://app.egghead.io/api/v1/lessons/react-react-flux-project-organization/subtitles

[00:01] Now that we have our Flux application up and running, I thought we would talk about increasing the complexity of our UI and how since our architecture is set up well, we should not need to change the architecture at all.

[00:13] Here's our updated wireframe. The first thing I want to point out is we're going to be doing some routing. Our initial route is going to be our catalog page. We've got this additional route of item/ITEM_ID, which is our catalog detail page, and then finally, we've got a cart route, which is our cart component.

[00:32] If we look at this guy, we've got a handful of things going on here. We need to be able to identify how many of these items are in the cart.

[00:39] We've got this recurring header that contains this cart summary view. We're going to need to create that. That outputs the cart items, quantity, and cost. It's just a running thing as we go along.

[00:52] Everything else looks pretty similar. We've got a few different changes in the catalog details. We've got this "Learn More." That's going to lead us to the details page. What I did is I broke this out a bit and outlined the new components that we're going to need.

[01:07] You'll notice that each of these is wrapped in something called "app template." We've got it there, there, and there. That's going to allow us to just drop everything inside a single template. Later, if we want to add some sort of sidebar or a footer, or whatever it may be, we'll be able to do that easily.

[01:23] I've also broken this header component out. It's going to contain this cart summary. That's going to recur through each of these views. Then, we've got what I'm calling our "catalog item component." We'll be able to reuse that throughout the application.

[01:38] I said, we weren't going to change anything in our architecture, but I am going to change one item here, in our catalog data.

[01:46] Again, this doesn't really belong here. It's not super Flux-specific, but I'm going to add this key of image. It's just going to point to this static product image to give us this product image. We'll add that in in a bit.

[01:59] Since we're going to have a lot of new components being added to our application, first thing we need to do is organize this a bit, or we're going to end up with what Cliff Meyers calls the "sock drawer method of organization," where we've just got a directory called "components" and all of our components are in it.

[02:14] What we want to do is organize this by feature. We're going to go ahead and create a few new directories here. First one's going to be cart. Next one's going to be catalog. We're going to have one for our header, and finally, one called "product."

[02:30] We're going to start moving these components where they belong, again, based on feature. Our cart, our decrease, increase, and remove from cart all belong in the cart directory. Our add to cart, and our catalog belong in the catalog directory. Our header, we're going to go ahead and create a new component called "app-header.js."

[02:57] We'll just create. We'll just stub out a null component here for right now. The other component that's going to be in our header directory is going to be our app-cartsummary component. Again, we'll just stub this out, return a null value for right now, and export CartSummary.

[03:21] Then in our catalog directory, we're going to create a component called "CatalogItem." Export CatalogItem. Then in our root components directory, we're going to create a new component called "app-template.js." Again, we'll just stub this out for now.

[03:57] We are now looking much more organized. However, we are going to need to update a bunch of our paths. Here, in our app-cart, stores is now two directories up, removefromcart is fine. These are all in the same directory, as well. actions is now two directories up. A lot of these are going to be the same. addtocart's in the same directory. Looking good.

[04:48] Then, in our app...let's see. This is going to be in the catalog directory. This is going to be in the cart directory. Save that. Let's go ahead and load up our application in the browser. Refresh this guy. Everything seems to be working.

[05:08] With all those changes and new components, we haven't broken anything. That's a good sign. Now, we can move on to our routing.

React Flux: Project Organization

Share this video with your friends

Course

React: Flux Architecture (ES5)