Overview Of ReactJS and Virtual
                     Overview Of ReactJS and Virtual-DOM
What is ReactJS?
 
ReactJS is basically an open source JavaScript library that is 
used to build user interfaces specifically for single page 
applications. It is used to manage the display layer for web and 
mobile applications. React also allows us to create reusable 
user interface components. React was created for the first time 
by Jordan Walke, a software engineer who works for Facebook. 
ReactJS implemented for the first time in the Facebook news 
feed in 2011 and Instagram.com in 2012. 
React allows developers to create large web applications that 
can change data without reloading the page. The main 
objective of React is to be fast, scalable and simple. It works 
only in the user interfaces of the application. This corresponds 
to the visualization in the MVC model. It can be used with a 
combination of other libraries or JavaScript structures, such as 
the AngularJS in the MVC.
Who’s using React?
 Facebook
 Netflix
 Instagram
 Dropbox
 WhatsApp
 The New York Times
How does ReactJS work
Facebook recently launched ReactJS, an open source Javascript 
library, which benefited them in the development of some of its
platforms, for example, Instagram. This library, despite having 
some controversial details, offers great benefits in 
performance, modularity and promotes a very clear flow of data
and events, facilitating the planning and development of 
complex applications. 
The secret of ReactJS to have a very high performance, is that it
implements something called Virtual DOM and instead of doing 
the whole DOM in each change, which is what is normally done,
it makes the changes in a copy in memory and then uses an 
algorithm to compare the properties of the copy in memory 
with those of the DOM version and apply the changes only in 
the variable parts. 
This may sound like a lot of work, but in practice it is much 
more efficient than the traditional method, we have a list of two
thousand elements in the interface and ten changes occur, it is 
more efficient to apply ten changes, locate the components 
that had a change in their properties and processed those ten 
elements, applied ten changes and processed two thousand 
elements.
How Does Virtual DOM Work in ReactJS?
Like the real DOM, the virtual DOM is a node tree that lists 
elements and their attributes and content as objects and 
properties. The render () method of React creates a tree of 
nodes from the React components and updates this tree in 
response to mutations in the data model, caused by actions. 
Since the underlying data is changed in a React application, the
Virtual DOM representation of the user interface is created 
where things start to be interesting. Updating the browser DOM
is a three-step process in React.
 Whenever something may have changed, the entire user 
interface will be rendered again in a Virtual DOM representation
 The difference between the previous and the new virtual 
DOM representation will be calculated 
 The actual DOM will be updated with what actually 
changed. This is very similar to applying a patch.
The Virtual DOM is a deliberation of the HTML DOM. It is 
lightweight and confined from the program explicit usage 
subtleties. It isn't designed by React yet it utilizes it and gives it
to free. Respond Elements lives in the virtual DOM. 
They make the fundamental hubs here. When we characterized 
the components, React Elements can be render into the 
"genuine" DOM. Whenever a React Component is changing the 
state, diff calculation in React runs and distinguishes what has 
changed. And afterward it refreshes the DOM with the after 
effects of diff. The fact of the matter is - it's done quicker than it
would be in the normal DOM.
Challenges or Limitation of reactJS
 ReactJS does not allow methods to be passed as additions 
so we can call a method that can change the state. We can not 
use the "State" value in the component function or function 
components written as a function
 Integration with some of the MVC structures would require 
a person to be aware of which configuration changes to pass
 Please remember that Each new CSS file created must be 
imported into reactJS. The extension of the files can be issued 
only for JavaScript files, all other files must be explicitly 
mentioned
 In the normal HTML attribute names are case insensitive, 
we have to be careful when using case insensitive names
For More info Visit - ReactJS Online Training