Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Flux Architecture: Project Organization

    Joe MaddaloneJoe Maddalone

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

    reactReact
    0.14 - 16
    flux-architectureFlux
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss