What is React JS ?
React JS is an open source JavaScript library or framework developed by Facebook. React is used to realize View component of MVC architecture. React has this Virtual DOM and Diffing Algorithm, which minimizes the number of updates made to browser’s DOM, and thus increasing the performance in rendering a page.
React JS Tutorial
Virtual DOM in React JS
Traditional DOM
Document Object Model (DOM) is a W3C standard for accessing documents. DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. Each time some element gets changed or updated in the DOM, Reflow (one of the stage in page rendering process) has to happen to recursively compute the position and dimensions of the element and its children. Then Repaint has to happen to actually prepare the colored pixels you see on the screen.
Problem with traditional DOM
In practice, updating elements of DOM and then the browser engine dealing with the Reflow and Repaint cycles is proved to be sloppy.
What can Virtual DOM do ?
Virtual DOM of React JS provides a more efficient way to update elements of DOM and render them with better speeds. Virtual DOM actually tries to reduce the Reflow and Repaint stages. For a complex web application, Virtual DOM has proved to boost the performance.
Diffing Algorithm in React JS
In React Application, whenever elements of DOM has to be updated, first Virtual DOM is updated. Then the Diffing Algorithm comes into action. After all the changes are done to Virtual DOM, Diffing Algorithm compares the previous DOM and new Virtual DOM, finds the minimal changes that has to be done to DOM, and then pushes only those changes to DOM. Diffing Algorithm is the actual work horse in realizing the performance boost.
When to use React JS
Inclusion of React JS in your application could be appreciated when the number of DOM elements is substantial. Wherein you need component based model to deal with the UI components reusability.
React JS Production Ready
React JS is already being used in many applications like Facebook, WhatsApp, Instagram, Netflix, Yahoo!, etc. Hence, there is a good amount of healthy community around React and many resources are available online for learning React JS.
React JS with other libraries
React could be a small part or the only thing that is driving your application. It is upto you (developer) and your application requirements to what level you can use React JS.
React JS Learning Curve
If you are a JavaScript developer, you could easily grasp the basic concepts and get started with React in a short period of time (few days). Only requirement is, you have to think in a React way.
Conclusion
With all these points and discussions presented to you, if you would like to start including React JS into your existing application or create a new application with React JS, come, lets dive into the application development with React JS.