TIL40 - React.js - What is React?

React

• a JavaScript library used for UI development that greatly improves the efficiency of DOM manipulations
• developed and managed by developers at Facebook

Key Advantages of React

• uses JSX expressions, which are compiled to render HTML DOM elements
• uses a Virtual DOM to significantly improve time efficiency of DOM manipulation
  > The usage of Virtual DOM is the key of key advantages of React

How does it work?

1. A JSX element renders
2. The entire virtual DOM is updated
3. The virtual DOM is compared to a 'snapshot' that was taken before it was updated to look for the elements that have changed >> the comparison is done by React's diff algorithm
4. Following the comparison, ONLY the changed elements are updated on the real DOM
5. Changes on the real DOM cause the browser screen to change

Because only the changed elements are updated on the real DOM, the time efficiency of DOM manipulations are significanly improved by using the virtual DOM