React.js : more than “V” in the MVC

Let`s start from a bit of history. React.js is a JavaScript library for building UIs. It was created by Facebook development team to deal with large applications with data that changes over time: react.js hits the “refresh” button any time data changes, and knows to only update the changed parts. Firstly, react was used in-house at Facebook and then it was released as an open-source project and it has quickly gained popularity among developers.

Facebook is not the only one to use React:

Instagram is 100% built on React, both public site and internal tools ;

Yahoo`s mail client is made in React;

Netflix – the biggest paid video-streaming service;

Sberbank, bank #1 in Russia, is built with React;

Khan Academy uses React for most new JS development.

React in comparison to Angular.js isnt a complete framework. However we cant say that React.js is only “V” in the MVC. After a closer look, you can actually see that React.js is more than just “V”, it has quite some features of the C (controller) part as well. This is why React is so confusing to understand.

Let`s see why React.js stands out from the crowd:

Convenient architecture

Flux – is highly competitive to MVC. One-way data flow provides maintainability and efficient arrangement of data and DOM elements.

Virtual DOM

React developers suggested using “virtual DOM” in order to solve performance issue for websites with too dynamic DOM. All changes in a document are made there first, and then React looks for the shortest path to apply them in a real DOM tree. This approach makes the framework fast.

Components

React is fundamentally different than other front-end frameworks in that each asset is made up of many isolated components. Want a button changed across the whole platform? Change it once and voilà it`s changed everywhere.

By making the creation, distribution and consumption of isolated reusable components more straightforward, developers are better able to save time by using and creating common abstractions. This is true of both low level elements like buttons and high level elements such as accordions.

JSX

React.js uses a special syntax called JSX, which allows to mix HTML with Javascript. Markup and code are composed in the same file. This means code completion gives you a hand as you type references to your component’s functions and variables.

SEO  friendly

React is significantly more SEO friendly than most JavaScript MVC frameworks. As it is based on a virtual DOM you can use it on the server without needing a headless browser on the server such as Phantom.js to render pages to search engine bots.

React.js is a new interesting emerging Javascript library. It does have some drawbacks however it`s an excellent alternative for building large apps where data changes quickly. We are curious to hear about your experience in using React.jsJ Have you tried it?