What is React and how is it different from HTML?

Prerequisites: HTML, CSS, JS

React JS is JavaScript library which aims to develop fast user interfaces for websites and applications. It is developed by Facebook. The speciality of React is component reusability which helps developers to easily make modifications in code. Because of component creation it is not needed to load the entire app or website rather loads only the effected component - this makes it easier for code simplification and increases the code efficiency.

Let us now see Why is it called React?

Because it quickly reacts to the changes without reloading whole page, it just reloads the effected component. This is achieved because of Virtual Dom. Virtual DOM is a lightweight representation of actual DOM. Instead of manipulating the browser’s DOM directly, react creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React finds out what changes have been made, and changes only what needs to be changed. Here the Diffing algorithm comes into picture.

Let’s now see how diffing algorithm works. Diffing algorithm differentiates the updated virtual DOM and previous virtual Dom. The components are considered as tree in diffing algorithm and are stored in tree structure. When a new update is made it discards the old DOM from the respective tree and creates a new one and DOM to be discarded is decided through Reconciliation process.

Reconciliation is a process of updating Browser DOM (component), it finds the difference between previous state and new state and updates virtual DOM.

How is React.js different from HTML?

• State Management - HTML, as a markup language, lacks built-in mechanisms for managing application state. In contrast, React, a JavaScript library, provides a robust state management system, allowing efficiently handling and updating the internal state of the applications.
• Rendering - HTML typically requires a complete page refresh to update content, whereas React, being a dynamic JavaScript library, can selectively update only the specific elements that have changed, providing a more efficient and seamless user experience.
• Dynamic - HTML, which is static and defines the basic structure of a webpage, with React, which is dynamic and enables interactivity by efficiently updating specific parts of the content without requiring a full page reload.
• Reusable Component - HTML is document-based, focusing on structuring the entire web page. In contrast, react is component-based, emphasizing the creation of reusable and modular UI elements, making it more efficient for building interactive and dynamic user interfaces.
• Single Page Application - Both React and HTML can be used to develop Single Page Applications (SPAs), where content is dynamically loaded and updated on a single web page without the need for full-page reloads. This allows for a more seamless and responsive user experience.
• ID Constraint - In React, the ability to override content with the same ID refers to the dynamic updating of components. Unlike traditional HTML, react components can efficiently update and render content with the same ID, providing a more flexible and responsive user interface.