React JS: The new kid on the block

There are a lot of front-end frameworks, and choosing the correct one is tough. In our day-to-day work, Angular or plain JS with some jQuery usually make the cut, depending on the project and its needs.  But recently React caught my attention, and I had the luck to work with it deeply on a recent client project at Tivix.  

React is written by Facebook, and recently open-sourced. It’s the engine that drives many of the FB interactions you use every day, including statuses, chat, and the entire Insight analytics platform for your Facebook page. And React is slowly taking on more and more core Facebook functionality. React touts itself as “a javascript library for building user interfaces,” which differentiates it from many Javascript frameworks that sell themselves as a one-stop shop for your front-end code. React is just the UI layer. You can think of it as just the View in a traditional MVC framework (model, view, controller). You’re in charge of the rest. React recommends using Flux to extend its data-flow functionality, but we’ve found that even using plain Javascript objects with some thought behind them will carry you far and without worry.

At the core of React is the concept of Components. Your UI is broken into Components with a State, creating one-way reactive data. React captures events, changes the State of components, re-renders, and repeats the whole process. Nested components can inherit data and events from their parent. Let’s take a look at an example of how Components can be used.

via: http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome

Let’s take a look at some sample code.

Outputs this:

The first thing you’ll notice is that there is HTML in your javascript. This is because React uses JSX, a JavaScript syntax extension that looks similar to XML. This allows you to write HTML and not have to worry about jumping through hoops either doing string concatenation or loading templates to get your data on the page.

Walking through the functions in the above code, the Render function is most important. It returns your current view of the Component.  In this case, it’s a timer in a simple <div> tag and it renders whatever the component’s State is.  This is set when the component gets created in getInitialState.

The next major function is componentDidMount.  Once the <div> has been rendered to the page, this function is called. It is where you might bind the HTML to a modal or datepicker. In our case, we are setting an interval to call the tick function.

Tick simply updates the State of secondsElapsed. The act of changing the state triggers a re-render, causing the timer <div> to update with the correct amount of time that’s passed.  Lastly, the componentWillUnmount function allows you to clean up and unbind, and is a good practice to include with your Component’s definition.

React is a simple, clean interface for your front end code. Break your UI into its Component blocks and go from there. If you want to know more, there are excellent videos and articles on it.

For further reading:

The React Home Page

Thinking in React

Introduction to React.js