In the last couple of months you've probably heard talk around the watercooler about React as a simpler and more maintainable way to build applications. It has received a lot of attention since Google's Angular 2 announcement last fall and there's been a noticable increase in the number blog posts, hacker news references and stackoverflow questions regarding it. If you are interested in seeing how you can leverage React for your next project you've come to the right place.
There is no time like the present to learn React and we are going to do so with a series of tutorials to build a banner management application with React, Node and MongoDB. We'll start off slowly with an introduction to React and Flux, then we'll build a bare-bones React app with Flux so you can see all of the working parts in motion and finally we'll round out the series with a full-fledged production app backed by an API with authentication and data persistence.
What React Is?
React is Facebook's UI library for creating interactive, stateful & reusable UI components. It's the "V" in MVC and could care less about the rest of your technology stack. It has a lot of great features such as a Virtual DOM, one-way data flow, client and server-side rendering and more. We'll hit on a number of these topics shortly.
In React functionality is incapsulated into components. You build components that have their own "properties" and "scope", so you can easily define the functionality of the component and reuse them as many times as you want without conflicting with one another. Each component defines a
render function which returns the generated HTML from the component in the browser.
React is just a view layer. That's it. All React does is render HTML for you.
Why React is so awesome
React's main strength is that it is super fast at rendering markup. It uses a concept called the Virtual DOM that selectively renders DOM nodes based upon state changes for the component. So if you have a large HTML table and your state changes in only one row, React simply update the DOM for that single row instead of rewriting the entire DOM. Its diff algorithm does the least amount of DOM manipulation possible in order to keep your view up to date. (Side note: Angular 2 will also implement a Shadow DOM.)
There are a ton of great resources for learning React so I'm not going to reinvent the wheel. My favorites are Ryan Clark's Getting started with React (great overview), the egghead.io React tutorials (don't skip these!!) and the scotch.io Learning React.js series. You also need to check out this collection of awesome React libraries, resources and shiny things. Tons of great stuff!
What is Flux?
Like I said, you cannot build a SPA simply with React. Every superhero needs a sidekick to do the dirty work, and in this case React's Robin is Flux. The main thing to understand is that Flux is an architectural pattern for building applications with React. Flux is not a framework nor a library nor any type of MVC paradigm.
What the Flux? has a far better explanation of this, but The Flux Application Architcture is composed of the following parts.
- Views - the rendered HTML from your component
- Action Creators - dispatcher help methods that get more "stuff"
- Actions - perform some type of action on the "stuff"
- Dispatcher - notifies listeners that there is new "stuff"
- Store - a singleton that holds state and business logic for your stuff
So the flow is that your component's view triggers an event (e.g., user types text in a form field), that fires an event to update the model, then the model triggers an event and the component responds by re-rendering the view with the latest data. Simple!? Another great article you should read is Flux For Stupid People.
Now, I'm not a rocket surgeon nor do I play one on TV but this looks like a lot of work and is pretty damn confusing when you look at some sample Flux code. Since Facebook doesn't provide a Flux library the community has implemented a number of their own including Flux Dispatcher, Fluxxor, ReactFlux, Flux-Action and RefluxJS. I'll be using Reflux for this series. I found it much easier to grok then the other libraries, it has a "strong" community on github and is very straightforward to implement. React.js architecture - Flux VS Reflux is a great article you should read regarding the differences and advantages of Reflux.
So that wraps up our first post in the series. In our next one we'll build a very simple React application with Reflux to demonstrate how this process works.