React for All

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

Library of Framework

Why React

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

function showTime() {// plain javascriptdocument.getElementById('clock').innerHTML=`<div><p>This is our clock</><p>The current time is: ${new Date()}</p></div>`;// reactReactDOM.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

Component or component

<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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdullah Alamin

Full Stack Web Developer | Javascript, React and Node Expert.