How does React.js work?

React.js is a JavaScript library developed by Facebook. What is it for us and how does it work?

React is a library written in JavaScript, developed by Facebook to facilitate the creation of interactive, reusable components for user interfaces. Put in use by Facebook for the production of components, and Instagram is written entirely in React. One of its highlights is that it is not only used on the client side, but can also be represented on the server, and work together.

How does React work?

React.js is built around doing functions, which take status updates from the page and translate them into a virtual representation of the resulting page. Whenever React is informed of a change of state, it reruns those functions to determine a new virtual representation of the page, then that result is automatically translated into the DOM changes needed to reflect the new presentation of the page.

At first glance, this sounds like it’s slower than the usual JavaScript approach to updating each item, as needed. Behind the scenes, however, React.js does just that: it has a very efficient algorithm to determine the differences between the virtual representation of the current page and the new one. From these differences, it makes the minimum set of changes needed in the DOM.

Well, it uses a concept called the virtual DOM that selectively makes sub-trees of the nodes based on changes of state, developing this, with the least amount of possible DOM manipulation, to keep the components updated, structuring their data.

[vc_single_image image=”23035″ img_size=”large”]

How does the virtual DOM work?

Imagine that you have an object that is modelled around a person. You have all the relevant properties of a person that you could have, and it reflects the current state of the person. That is what React does with the DOM.

Now think, if we take that object and make some changes. A moustache, biceps and other changes have been added. In React, when we apply these changes, two things happen:

• First, React runs a ” diffing ” algorithm, which identifies what has changed.
• The second step is reconciliation, where the DOM is updated with the results of diff.

The one that makes React, before these changes, instead of taking the real person and reconstructing it from scratch, would only change the face and the arms. This means that if you had the text in an entry and an update was carried out, as long as the parent node of the entry was not scheduled for the update, the text would remain unchanged.

That’s how React is taking a big boom, becoming more & more used in mainstream web and app development.

Wanna Learn react? Here are few good resources to start: learn react in 5 min, react js tutorials, Cheat sheet for react developers.

Are you are looking for a development company or want to hire a developer or a team to work and develop in React.js? – We are who you need to contact.