Why to use React Over CSS , JavaScript & HTML ?

Most of people who are using have this common question that If work is getting done by CSS & JavaScript than why to use React over CSS ,JavaScript & HTML . What is the main difference in output on Web page if we use React over CSS ,JavaScript & HTML .

Here are few reasons that makes React as a better Option over CSS & JavaScript .

Virtual DOM makes Web Page Fast –

DOM ( Document Object Model ) is the hierarchical representation of the Web page like –

Picture Credit – w3schools.com

Suppose if User enter a new Heading in “h1” tag , than whole DOM (UI) including head tag , a tag , href tag , title tag etc needs to be re-modify & re-render , in this case , response time increases which leads to unwanted delay.

Here the concept of virtual DOM comes into picture , Virtual DOM is a copy of the original DOM which store in memory and linked with the real DOM libraries like ReactDOM.

When something get updated in virtual DOM, react compares the virtual DOM with a snapshot of the virtual DOM taken right before the update of the virtual DOM.

Using this comparison React find out which components in the UI needs to be updated. This process is called diffing.

Once React knows which components needs to be updated, then it replaces the original DOM nodes with the updated DOM nodes , here only nodes of DOM is getting modify saving response time.

Reusable components makes coding easier

React, we describe User Interfaces using components , can reuse a single component in multiple User Interfaces.

Entire website is divided into these small components which when put together complete the UI of the website like –

Hypothetical example of HackerNoon website when divided into multiple components
Pic Credit – https://hackernoon.com/

Updates without reloading

As React is using concept of virtual DOM so , Unlike traditional websites, you don’t have to travel from one page to another , navigates the website from one path to another without reloading.

Allows native API

Facebook has open sourced , React Native project well.

React Native allows , to build mobile apps using React components and compile them into platform specific, native code.

This leads to performance benefits and allows to use native API’s. It’s probably the best way to build cross-platform apps.

React Native apps can access platform features like the phone camera, or the user’s location.