Why should you learn React?

React is a JavaScript library for building user interfaces(UIs). Today I am going to discuss why you can prefer React over traditional HTML, CSS and JS.

React Reacts!

For example, if you want 10 paragraphs to be displayed, in HTML you have to manually type all of them like this:

<p>this is the displayed paragraph</p>

<p>this is the displayed paragraph</p>

<p>this is the displayed paragraph</p>

Or in the script file, you have to manually select or create a paragraph tag, set its textNode and append it in the container tag and loop it 10 times.

But in React you can just use a loop to iterate 10 times and each time return a paragraph.

for( let i = 0; i < 10; i++){
<p>this is the displayed paragraph</p>
}

Though we don’t use for loops, it is just for clarifying the concept.

Note that,here you didn’t manually create 10 paragraphs or appended them in the body. You just told React to make 10 paragraphs and React did the rest works for you.

It’s just JavaScript!

It’s reusable

Consider this:

Function SendMessage(){  Return (
<div>
<h1> Hello there! </h1>
<input placeholder=”write your message” />
<button>Send</button>
</div>
);
}

Once you create this SendMessage component you can now use it anywhere like this:

<SendMessage></SendMessage> 
or,
<SendMessage />

It’s your choice

If can do whatever you want. But sometime you want your styles to be applied conditionally. Like

{ backgroundColor: theme === "dark" ? "black" : "white" }

Which you can do with React very efficiently.

It’s optimized and efficient

Without React, when you work with a browser directly, if you change a single element (e.g. click a button to change something like reacting to a fb post) in the tree (generated in the browser from your HTML document), it would re-render the whole tree (the HTML page). Which means a slow and boring experience for the user.

Whereas, when we tell React to change an element, it generates a new virtual tree (a new copy of that page, you can think). To render the updated tree in the browser, React does not re-render what has already been rendered. Instead, it will compare the two virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated (the post’s reaction only, not the whole page), and only updates those sub-trees in the browser. In this way, it creates a smooth user experience.

To further understand the concept, follow this example: https://jscomplete.com/playground/react-dom2

Here, you can’t type in the first input box because to update the clock in the traditional way the whole div is re-rendering every second. Whereas in you can easily type in the second input box as React is only updating the clock not the input box!

It’s production tested

You can switch platforms too!

It’s a library, not a framework

Things you need to keep in mind:

2. React Hooks are functions that help to do something while rendering and before and after rendering.

Peace!

--

--

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