React.js Concepts

Overview

React.js is used to create components in your views, it specifically renders UI and responds to events.

Instagram and Facebook have come up with a FrontEnd client library that uses a virtual DOM diff implementation for ultra-high performance.  This works by comparing DOM changes in memory to calculate a patch required to update the DOM:

On every data change React re-renders the entire component in memory then uses a diff to apply a patch for what has changed in the DOM.  This means within React the virtual DOM UI is immutable, on each data change it’s completely replaced. 

Here is a stackoverflow comparing Angular’s dirty checking with Reacts virtual dom diffs, with the answer provided by the creator of React:

http://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode

The syntax is a bit funky but quite simple once you get used to it.  It optionally uses a JSX transform library which is the preferred way of coding with React.  The following examples use JSX.

Concepts

React.createClass:  Creates a component by the developer providing a “render” function.

React.renderComponet:  Renders the component to a specified location

Props (or Properties):  Container object for immutable data, for example used with labels.  This example has two props: now and b.  Now is set to a javascript expression of todays date and b is set to a string literal.

Here is a more complex example showing default values, provided to React by using the getDefaultProps function, which are later overwritten by the component usage.

 

State:  Container object for mutable data for example used with input controls.  You can provide React the values for the initial state using the getInitialState function.  Here is an example of using state (note: state would usually be used with input controls rather than a label):

Controlled control:  Form component rendered with a value (or checked) property e.g.:

Mixins:  Common code that can be reused across components

ReactLink:  Used to streamline the updating of state so you don’t have to write your own onChange function to update state set.

Uncontrolled controls:  Form components rendered without a value (or checked) prop.  This enables React to ignore the component during the render process, allowing for better performance.  onChange event can still be used to detect changes outside of React.  You can also provide a defaultState value.  Beware, as React will not be tracking this component this will cause divergence from Reacts virtual DOM.

Ref:  Similar to the “ID” attribute in HTML, this attribute allows fast access to an item within your component instance:

getDOMNode(): Gets the underlying DOM node from an item within a React component instance.

PropType validation: By providing a propTypes property object you can validate your properties.  This example states the now property must be a string and the b property must be great than 5.

Flux:  Facebook have a separate optional complimentary library called Flux for single (or uni) directional data flow.  They have done this by introducing a dispatcher and (data) store.

The Dispatcher acts as a “traffic controller” for all the actions.

The (data) Store is the data layer that updates whenever it receives a new action from the dispatcher.