March 9, 2015 Building with React & Flux: Getting Started

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.

Part #2: Building with React & Flux: Hello React Banners

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.

Let’s start by clearing up any misconceptions about React right from the start. There’s been a lot of talk on the interwebs lately about React as an alternative to Angular, Ember, Backbone or [insert random JavaScript framework]. Comparing React to other JavaScript frameworks, such as Angular, is like comparing Superman to Batman. One can fly, is impervious to harm, has super strength and heat vision while they other is really good with tech. Angular is a complete framework (views, routing, templating, dependency injection, directives, etc.) while React is simply a view layer. You can’t build an SPA with React by itself. React needs help from Flux… it needs its Robin.

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.

Components can be written in pure JavaScript or what Facebook calls JSX, a Javascript XML syntax. JSX allows you to write HTML inside of Javascript without having to wrap strings around it. Now we’ve all been conditioned to separate our functionality from our view, but if you think about it, they are actually intrinsic tied to one another. Once you get past the wierd syntax, combining JavaScript and its accompanying markup into a reusable component becomes quite refreshing.

var HelloMessage = React.createClass({
  render: function() {
    var name = 'jeffdonthemic';
    return (
      
Hello {name}
;
    )
  }
});
React.render(, document.body);

You can either transform JSX into JavaScript at runtime in the browser but this is not recommended for production as it slows down page loads. You can use something like gulp or grunt to setup preprocess build tasks to do this for you.

React is just a view layer. That’s it. All React does is render HTML for you.

Why React is so awesome

React concepts are very easy to graps and the code, being simply JavaScript, is readable and easy to maintain. Once you understand the difference between properties and state you’ve got half the battle won. React implements a one-way data flow pattern which reduces boilerplate and make it easier to follow the flow of your application logic. (Side note: Angular 2 will also implement unidirectional data flow.)

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.)

React runs JavaScript on both the client & server in what is called Isomorphic JavaScript. While most frameworks use client-side DOM rendering, React provides a better experience by performing these actions server-side. Not only is it faster and easier to maintain, but code is indexable by search engines as well.

React Tutorials

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.

1. Views – the rendered HTML from your component
2. Action Creators – dispatcher help methods that get more “stuff”
3. Actions – perform some type of action on the “stuff”
4. Dispatcher – notifies listeners that there is new “stuff”
5. 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](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.