Learning React Frameworks

Today I started work late since I was feeling ill in the morning. That meant that my team mate had already started working on what I planned to do today, which was creating a new, cleaner-looking version of the user guide. I took the time today to learn more about React and frameworks that use it. This was something I’ve been meaning to do lately anyways when time allowed. Most people right now don’t create React apps, they create apps with the Flux or Redux frameworks, which use React as their “view” layer.

I found some excellent resources for learning these concepts in this YouTube tutorial series and this blog post.

React enforces a functional style of programming, which is great. It helps you avoid issues with some state existing here, other state existing there, and now you have to make sure the two places don’t change each other’s state in ways that screws up your app. You do this with React components by making the top-level component in a tree of components hold the state that gets accessed by those lower-level components. You hoist the state as high as it needs to go. Then, the values in that state flow down (usually as props) when they’re changed. The child components get informed of that new state (through their props) and they may or may not re-render. This is “unidirectional data flow”.

Frameworks like Flux and Redux take this concept even further. The only place any state is allowed to exist is in a “store”. When the store is changed, the components react to that change (using a sort of pubsub/observer pattern). The components reaction fire “actions”, which then may end up changing the store’s data. And that may cause components to react to that change. If reading this makes you picture a circle in your head, you’ve got the right idea.

React is data flowing in a line. Flux is actions flowing in a circle.

At least that’s what I’ve gathered so far… I have more learning to do to learn how this benefits our apps as they scale. We probably won’t end up using any of these frameworks for our Visual Analysis Tool now that we’ve started building it without them, but I think it’s still a good idea for me to get familiar with them.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s