If you’re like me, you’ve probably run across the multitude of React and Flux conversations across the Internets and thought it would be a good skill to pursue. Perhaps, like me, you’ve also been able to follow along with the Thinking in React tutorial that helps you understand how to create a basic React app. Maybe you’ve even started a React app and finished some basic functionality.

Then you get about seven React components and three handlers manipulating the state, and you start to understand where Flux comes in. Your app, although small, starts to become unwieldy as you try to manage the increasing amounts of application state passing through the various React components. This must be where Flux comes in.

Where do you start? Perusing through the many Flux tutorials brings a quick realization that the next step in your application’s architecture is not so simple. This isn’t like learning another NPM package to add to your app. This is like learning MVC all over again. There are some frameworks like Reapp that could be used as a shortcut to complete your app, but it’s probably better to get a foundational understanding of what Flux is doing first. Consequently, I am writing this article to take myself step-by-step through the development of a Flux-based React application.