React.JS and Virtual DOM

React is a open source UI library developed at Facebook to facilitate the creation of interactive and reusable UI components. It is not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably. React has pluggable back-ends so it can be used to target the DOM, HTML, canvas, SVG, and other formats. It also uses a concept called the Virtual DOM that selectively renders sub trees of nodes based upon state changes. It encourages the creation of reusable UI components, which present data that changes over time. An important difference with frameworks like AngularJS – which uses a two-way data binding model – is that React features a one-way data binding model.

Here are four thing of React JS that make it stronger.

• Virtual DOM
• Server rendering
• Descriptive warnings
• Custom events system

Virtual DOM

One of the most important concepts of this project is the virtual DOM. The virtual DOM is used for efficient re-rendering of the DOM by using a diff algorithm that only re-renders the components changed. This in turn enables the library to be ultra fast. React keeps two copies of a virtual DOM

• The original
• Updated versions

These two virtual DOM trees are passed into a React function that diffs them and a stream of DOM operations are returned.

Let's dive a little deeper

The Component is the primary building block in React. You can compose the UI of your application by assembling a tree of Components. Each Component provides an implementation for the render() method, where it creates the intermediate-DOM. Calling React.renderComponent() on the root Component results in recursively going down the Component-tree and building up the intermediate-DOM. The intermediate-DOM is then converted into the real HTML DOM. React provides a convenient XML-based extension to JavaScript, called JSX, to build the component tree as a set of XML nodes. JSX also simplifies the association of event-handlers and properties as xml attributes. Since JSX is an extension language, there is a tool to generate the final JavaScript. We can either use the in-browser JSXTransformer or use the command line tool, called react-tools (installed via NPM)[1].

Server Rendering

Another great feature is that it can also render on the server using Node.js. Therefore, you can use the same knowledge you’ve gained both on the client and on the server. This has major performance and SEO benefits. It bit like for jaggeryjs. Many developers are using React.js to render a first, static version of the page on the server, which is faster than doing so on the client and is also SEO-friendly. Then they enable fast user interactions and UI updates by using React.js on the client side.

 

[1] http://facebook.github.io/react/downloads.html