Intro to React

Intro to React

Introduction to ReactJs:

In recent past, JavaScript has been a pretty hot topic. It has a valid reason to be on Hot Seat. Recent technologies like AngularJs, Angular, ReactJs, ExtJs and many more framework or libraries  based on JavaScript has been introduced to design and code the UI of an web application.

ReactJs

ReactJs is JavaScript library designed to help build User Interface of an web application. React has been build by Facebook by keeping component structure in mind.

Let me put it this way- a page will be divided in smaller chunks based upon their functionality, these small chunks which will implement UI along with complete functionality are called Components. All the components are then embedded together and are put on a single HTML page to form complete page. You must be wondering why do we need to divide when I’d to put all together on single page. Your question is obvious. Before I go on to explain why this is necessary, let us put it in representation form.

Component Structure

Home page is my complete page having different sections divided into six components. Division of page into smaller components helps improve the re-usability of our code and easy to maintain.

Virtual DOM:

React is based on the concept of virtual DOM. It is virtually present behind actual DOM being rendered on browser.

A component is implemented using JavaScript which is basically used to create our HTML DOM.¬† If you’ve to include DIV in your page, you need to create in this fashion

This code will then rendered on the browser.

Why Virtual DOM?

In legacy application where entire page was coded in HTML or corresponding language and upon any change in the page, entire page was required to be re-rendered. This required huge performance impact and not so user friendly.

ReactJs has entirely changed this narrative. It says reload only what you change and leave rest as it is. Isn’t this fantastic?

In very beginning we saw an illustration of segregating page in smaller components, let’s refer to it and say for instance, you made some changes which require DOM on component2 to be reloaded. Here at this moment, virtual DOM kicks in. Based on Diff algorithm the difference is calculated at Virtual DOM level and change is first reflected at Virtual DOM and then it reflects at actual DOM.

Leave a Reply

Your email address will not be published. Required fields are marked *