DEV Community

Cover image for React From 33000ft
Pravesh Vyas
Pravesh Vyas

Posted on

React From 33000ft

Hi Folks, It's 2021, We all agree on the fact that React Came out as the most popular Library in JavaScript Scene for Good Enough Time. In my reasoning It came on top Because, It was meant for scale people at Facebook, Designed It in a way that really solves a critical problem, of all the models of time, Which is Re Rendering on the smallest of changes that occur some where deep inside the Tree. This use to cause Cascading Changes in DOM, Which would make code unreliable for Devs to Change on, Nobody would be interested to do changes in such a messy system, Which in turn causes Dev Processes so slow down.

Now that you have Heard the Story lets look, In to Tech that Enabled this, If you go to React's Home page you would see the Following things

Declarative

To understand this we need to Understand what's the Difference between a declarative and imperative way of doing Things.

In a Nutshell, We can say that, We are choosing to Loose control over Control Flow to make our code more Reusable and Performant , There's a Saying that you take better decisions by not Taking decisions at all.

For getting More detailed Perview Head on to

So yeah, They Unknowingly choose this way of doing Things.

Component Based System

FaceBook had Been Playing around with these sort of things for a long till they got to React, They had a php Extension called Xhp, Which got you out from the hassle of Opening and closing <?php> Tags all around the code

They introduced a New type of Syntax where they passed Html elements as functions. It worked out great for them. The Above extension also had a feature of Making Components, Which directly impacted the contributed to the creation of Component based System.

Virtual Dom

Alt Text
Before understanding Virtual Dom, Lets get hang of DOM. It stands for Document object model, It basically represents the UI of the whole App as a Tree Data Structure. It all works Fine and good until you add Complex Functionality to the App. To solve this What React Developers Did Was they introduced a Virtual Dom which Calculates and Process everything that Real Dom would do whenever a change happens. And choose a way in which Least manipulation will Happen in the DOM and Hence Cause a Better end User Experience

More About V-Dom

Server Side Rendering

Its is one of those Features That Comes out of the box in React, What happens here is the app Pre Renders the Whole HTML of the Page and Sends it to the Client, Reducing the Render Cost that comes on to the user, It also Is used Heavily when we are interacting with constantly changing data, These Days People are Using NexT.js and NuxT.js For Complex Apps. Which Work on the Above Principle

This Sums Up the Core Features of React, I think Nothing Can Go as Big as React, Without the contribution from community

Which Caused it become How Popular it is today, Of course It Wouldn't have been possible without the Opensource Community we have around it.

Top comments (3)

Collapse
 
vijayst profile image
Vijay Thirugnanam

We are in 2021, Still talking about React Virtual DOM?

Collapse
 
vp5h profile image
Pravesh Vyas

is it so bad? Plz Elaborate.

Collapse
 
vijayst profile image
Vijay Thirugnanam

No, just kidding :) I am also checking react-reconciler code, once in a while.