What is React
React is JavaScript Library which helps to build User Interface using components. Components are isolated, reusable pieces of code which works similar to JavaScript functions. Each component renders and appears on front end as a visible element. The whole application in React is rendered into a SPA.
What is SPA and how it differs from MPA
SPA stands for single page application, These days the web development crowd is getting more and more into the Single-Page Application. SPA enables you to work inside a browser while eliminating the need to reload a page when the user is using it. Since SPA eliminates the need to reload a page, maintains minimum possible code, improves user experience and app performance, these feature of SPA makes it stand out from MPA. Facebook, Twitter, as well as Gmail, Google Maps, and Google Drive all of them are examples of Single Page Application which we encounter daily in our lives.
On the other hand MPA, a Multiple page application is the conventional way of app development. MPA reloads each time the user opens a new page in the browser. The major con of MPA is Performance speed — every time a user refreshes a page, the browser has to display all the data from scratch. Apart from SPA, Multiple page application has its own importance and it is used in building complex websites. The major example of MPA is Amazon — whenever you request new content, the page has to reload all over again. This is considered conventional architecture, but it’s still highly valuable and is used with great results.
The key concept of React
We have talked about what React is, now prior to dive deeper into how it actually works. you must be aware of what is DOM - Document Object Model it is the structural representation of all nodes in an HTML document. The DOM represents the web page often called a document with a logical tree and each branch of the tree ends in a node and each node contains object programmers can modify the content of the document. Now you need to know about Virtual DOM and how it plays an important role in React Application
Virtual DOM
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
As a result of this approach, React implements its declarative API by ensuring the DOM matches the state you specify in the UI. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
The term "virtual DOM" is often used differently since it refers to a pattern rather than a specific technology. React, however, also uses internal objects called “fibers” to hold additional information about the component tree. They may also be considered a part of “virtual DOM” implementation in React.
Top comments (0)