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!

In React, you just tell React how you want things to be displayed and React reacts to your command accordingly.

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!

Once you learn some basic syntax and concepts of React, it’s just plain old JavaScript. You JavaScript skills are what make you better React developer. This is an advantage over libraries with bigger APIs.

It’s reusable

Once you create a react component (a function that returns React elements like <div>, <p> etc) you can use it anywhere in your application, even across multiple applications without re-writing it again.

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

You can decide whether you keep your elements, logic and styles separate or you want them together.

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

Don’t worry if you don’t understand this now, just keep reading and follow the example below.

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

The React team at Facebook tests all improvements and new features that get introduced to React right there on facebook.com, which increases the trust in the library among the community. It’s rare to see big and serious bugs in React releases because they only get released after thorough production testing at Facebook. React also powers other heavily used web applications like Netflix, Twitter, Airbnb, and many more.

You can switch platforms too!

Learning React pays off big-time for iOS and Android mobile applications as well. React Native allows you to use your React skills to build native mobile applications. You can even share some logic between your web, iOS, and Android applications.

It’s a library, not a framework

Frameworks are great. Many smart design decisions are already made for you in a framework, which gives you a clear path to focus on writing good application-level logic. But frameworks are not flexible. A framework usually wants you to code everything a certain way. If you try to deviate from that way, most of the time you can’t! But React is very flexible. Its only focus is to build UI for you. For everything else, you can take your own decision.

Things you need to keep in mind:

1. Components can return expressions. So you can map an array and return any expression but you can’t use if-else as it is not an expression.

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

Peace!