React for All

In today’s article, we will take a bird’s eye view on the popular Javascript library React.

Library of Framework

It’s a very common question whether React is a framework or library. At first let’s have a look at the definition of both of these. A framework is a large list of api(s) that accelerate our building of something. It’s usually rigid and it has a wide horizon. You have little scope to go beyond the boundary of the framework. On the other hand, a library is a little tool that help you accomplish certain things very easily and efficiently. It doesn’t bother what you want to do looking far beyond it’s area. In this context, React is a library which only deals with building user interfaces (UI) quite simply.

Why React

Here comes another question when we have Javascript, why we need a library like React based on JS itself? The answer can be given from a few view points. Let’s understand from code,

DOM manipulation

document.getElementById('first')
document.getElementById('second')
document.querySelector('.box')
....///

If we want to communicate with DOM via simple JS, we need to select all the nodes we want to talk to, which is really tiresome. In react, we no longer communicate with the browser DOM. We just define what we need on the UI and give declaration; React does the rest.

DOM reconciliation

While working with plain JS, if we want to update any portion of DOM, all the related nodes get re-rendered. For example,

function showTime() {
// plain javascript
document.getElementById('clock').innerHTML=`
<div>
<p>This is our clock</>
<p>The current time is: ${new Date()}</p>
</div>
`;
// react
ReactDOM.render(
React.createElement(
'div',null,
React.createElement('p',null, 'This is our clock'),
React.createElement('p',null, 'The current time is: ', new Date()),
document.getElementById('clock2')
)
)
}
setInterval(showTime, 1000);

In the example above, while coding plain JS, the whole div gets thrown every second. But in React, only the time showing element gets re-rendered. It’s far more efficient and easier to finish.
There are so many more reasons why should we choose React, but it’s enough for the time being.

JSX

function showName() {
return(
<p>My name is Abdullah</p>
      )
}

In the example above, the p tag in the return block is neither HTML nor any part of React. It’s what we call JSX, which is a special form of representation of HTML. React converts it into React element through Babel, Typescript or any other script converter.

Diff Algorithm

Whenever we want to change any portion of the UI, React doesn’t change it directly. Rather it creates a for of the DOM tree in its mind called virtual DOM. Then for any update, it compares the new picture with the older one in its memory and updates only the specific parts.

Component or component

When we want to define any React component, we must start it with capital letter. Because the converter Babel/Typescript treats capitals as variable and small letters as HTML- strings.

<Button></Button>
<button></button>

If we want to see the converted form in Babel, we see two are treated differently.

React.createElement(Button, null);
React.createElement("button", null);

Look carefully that the first one is treated as variable and the second one as string. So, always remember to start component names with block letters.