Some Important Things before starting REACT
Why we should Learn REACT
React is on growing powerful, fast, scalable, flexible and has a robust dev community that's rapidly growing. React is a great solutions for solving many modern issues in Front End Development. So, it is high time to learn REACT.
It’s not a Framework
Basically React is not a framework like Angular or Ember. Generally in framework some decisions have already made their and you can’t add or download something with a framework. But with React you have to download some other libraries for solving the problems. That's why it is not a framework , it is a library (a JavaScript library, developed by Facebook).
React Virtual Dom
Virtual DOM is the virtual presentation of real DOM. When a state is updated or changed instead of updating full real-DOM, in REACT the virtual-DOM gets updated. For this react is significantly fast than other frameworks or libraries.
May be it sounds like that virtual DOM doing the same thing what real DOM does. But it is not. Virtual DOM actually update just the changed value of UI.
Why Virtual DOM is fast?
When something added to UI, a virtual DOM created like the tree. Each element is a node on this tree. When something change to UI, a new virtual-DOM is created. The new created tree is compared Each element is a node on this tree “Diffed” with the previous created virtual DOM
Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. React doesn't updated the full real DOM, for that reason is significantly FAST.
React JSX
JSX is more probably a HTML template language, but it is come with power of JavaScript. For example:
const introduceJSX = <div>Hello, World!</div>It seems funny, as it is neither a string nor HTML. It is used in React to describe the UI. React is using logics (JS) in Markup language in same file, called “Components”. It helps to use logics directly and easily with HTML tags.
Optimizing Performance In REACT APP
Since React was introduced, it has transformed the way front-end developers build web applications, and its virtual DOM is famous for effectively rendering components.
During the initial rendering process, React builds a DOM tree of components. So, when data changes in the DOM tree, we want to React to re-render only those components that were affected by the change, skipping the other components in the tree that were not affected.
However, React could end up re-rendering all components in the DOM tree, even though not all are affected. This will result in longer loading time, wasted time, and even wasted CPU resources. We need to prevent this from happening. So, this is where we will focus our optimization effort.
Moving out of Index.html
….
