React: Flux Architecture (ES6)

49 minutes

As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How is data shared between components?

These are the questions that Flux was built to answer.

In this series, we will explore React Flux, using ES6 (ES2015), babel, and webpack to manage our developer workflow.

pro-course-rss-logo

PRO RSS Feed

Flux Architecture: Overview and Project Setup

Flux Architecture: Application Dispatcher

P

Flux Architecture: Application Actions

P

Flux Architecture: Application Store

P

Flux Architecture: Components/Views

P

Flux Architecture: Higher-Order Components

P

Flux Architecture: Project Organization

P

Flux Architecture: Routing with react-router 1.0

P

Flux Architecture: Component Wrap Up

P

Flux Architecture: Dumb Stores

P
react tutorial about Flux Architecture: Overview and Project Setup

Flux Architecture: Overview and Project Setup

6:56 react

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

react tutorial about Flux Architecture: Application Dispatcher

Flux Architecture: Application Dispatcher

1:55 react PRO

In this lesson we'll create a very simple application dispatcher utilizing the open source flux dispatcher from Facebook.

react tutorial about Flux Architecture: Application Actions

Flux Architecture: Application Actions

3:25 react PRO

In this lesson we'll build our actions which will be sent to our dispatcher.

react tutorial about Flux Architecture: Application Store

Flux Architecture: Application Store

5:56 react PRO

In this lesson we'll create our Flux application's store which will manage the state of our application.

react tutorial about Flux Architecture: Components/Views

Flux Architecture: Components/Views

9:11 react PRO

In this lesson we'll create our initial components using the architecture we've built so far.

react tutorial about Flux Architecture: Higher-Order Components

Flux Architecture: Higher-Order Components

5:29 react PRO

In this lesson we'll shift the responsibility of managing the state of our application over to a higher-order component rather than having each component managing it's own state.

react tutorial about Flux Architecture: Project Organization

Flux Architecture: Project Organization

2:38 react PRO

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

react tutorial about Flux Architecture: Routing with react-router 1.0

Flux Architecture: Routing with react-router 1.0

6:00 react PRO

In this lesson we'll introduce routing into our application using react-router 1.0

react tutorial about Flux Architecture: Component Wrap Up

Flux Architecture: Component Wrap Up

6:09 react PRO

Using our established architecture we'll make short work of a few remaining tasks to meet our application requirements.

react tutorial about Flux Architecture: Dumb Stores

Flux Architecture: Dumb Stores

2:03 react PRO

In this lesson we'll simplify future development by reducing the logic contained in our application's store.

Presented by:

Joe Maddalone

Joe is a father of five, lives in Chicago, works as a freelance web developer, shares coding tutorials on egghead.io, and codes for fun when not for work.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?