React.js Explained in a Simplified Way
React is a JavaScript library used to build User Interfaces. Its popularity amongst front-end developers increasing day by day. In this article, I’m going to describe my overview of React and also share some awesome resources.
First of all let’s began with a common question, why React is called a library not a framework ?
To answer this question we need to know what is a library and what is a framework?
A library is a set of JavaScript functions that specialize in doing specific tasks. A Framework is a collection of libraries that offers an almost complete solution to build applications.
With that answered let’s get to know why we need React, why can’t we just develop apps using just JS?
Well, before react or any frameworks developers used to build web applications using JavaScript only the problem was with vanilla JS for every event provoked developers had to render the whole dom tree. As JavaScript is single-threaded this leads to cause the application's super laggy. This happened because JS had to wait for every operation to end before starting another and It had to update the whole dom tree for every single event.
Let's see what React brings to the picture. Well, React has many cool features but the most impressive one would be the Virtual DOM. So what is a virtual dom?
Virtual DOM
Virtual Dom is the virtual copy of the real DOM which created on the memory and always keeps synced with the “real” DOM by a library such as ReactDOM.
What React does and does very well is that it never updates the “Real” Dom. For each event provoked it updates the Virtual DOM then The virtual dom compares itself with the real dom line by line. It only updates those lines which need to be updated and the rest of the DOM tree remains the same.
This way React minimizes too much load on the DOM API which ultimately results in a smooth user experience, Maximized Memory Usage, High Performance, more CPU intensive, etc.
JSX
JSX extends for JavaScript XML. It is a syntax extension to JavaScript. We can create React element using JSX
JSX is similar to HTML Syntax so you can easily create react element with it and to render that element simply do
const name = 'John';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);// This returns Hello, John heading on the UI
