React JS: An Evolved form of Vanilla JS.

Hello readers and welcome to another JS topic that we dissect today.

So, as we know that the majority of the industry now makes use of React. From Outlook to Xbox apps, React is everywhere. Is React that flexible!?? If yes, How!?!!

What is React?

React is a JS Library, that is all! Then how this much power, you ask!?

Well, React is "built different", I'd say. React is one flexible and assembled lad just like one of those androids. Flexible, we know.. "Assembled"!? Hmmm... Remember those Lego blocks we used to play with when we were kids!? Consider each of that block as a "Component" of your UI. Pick a red color block for the roof of that house. Similarly, we customize one piece of the body first and then put it together in a body.

React is a house which has people (Components) which have different properties and interact with other people.

Why React?

So we had our old man Vanilla, then why React? To understand, let us go into how Vanilla and React work parallelly.

1.How the User Interface is created?

To start off, let us talk about how the User Interface is created in case of Vanilla JS. In Vanilla JS, User interface is basically created in HTML.

<html>
<head>
<title></title>
</head>
<body>
<div>Content</div>
</body>

</html>

No JS needed here!!

Whereas in case of React,

<div id="root"></div>

Where is my page, the HTML , header, body?? In React, the code is not loaded to the server instead it is deployed onto the browser in a dynamic scenario. So basically, for show we have this (div) root component which is the house to all my people which cannot be yet seen through the house walls. In React, we do not need predefined HTML to be deployed on to the server. Instead, we use JSX which looks like HTML but actually is JavaScript. Amazing!! I know right!

2.How does the Functionality differ??

In Vanilla JS, HTML does not contain any functionality in the index.html main file.

<div>
    <h1>Shopping List</h1>
    <ul id="shop-list">
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
    </ul>
</div>

All the functionality is transferred to a separate JavaScript file.

function addItem(item) {

  // Add item

}

So this has a history. Back in the days when web development was being thought of and how to, people thought that handling logic should be a separate task but as the complexities of JS applications increased this ideology started failing. People had to "hold in the head" the thousands of these interactions and keep those files open at the same time to use.

Now enter the protagonist, "React" enforces you to do all of this in one component based structure single file. It says that the UI is not one body but separate bodies working together inside a single container. So, first we design the separate components and then we put in them together to work in a melody.

function ShopList(props) {
    function addItem(item) {
        // Add Item
    }

    return (
        <div>
            <h1>Shopping List</h1>
            <ul>
                <li>Milk</li>
                <li>Bread</li>
                <li>Eggs</li>
            </ul>
        </div>
    )
};

This made lives easier. This format kept the functionality and display closer and easier to monitor. Also generic components could be reused across the whole application. Wow React, you made it so easy!

3. How is data stored on the browser?

Once the UI loads up on the browser, the user can interact with your application but what about functionality? When user enters a username and password, that need to be stored somewhere on the browser to reuse later, maybe submit to the backend.

In Vanilla JS, this data is stored in the DOM (Document Object Model). DOM is created by the browser itself and stores and monitors the nodes defined and our data such as username and password(don't worry, its encrypted).

For example,

<input type="text" placeholder="Username" id="username" />

So as the user types in anything, it gets stored in the DOM. In technical terms, we call this "Data Abstraction". Then, we need to create a separate variable to store the value of the corresponding component. We create a search for the element in DOM then we access the user-stored value.

const input = document.getElementById("iisername"); 
console.log(input.value);

This becomes so tedious incase of numbers of elements we need. "React" enables us to use "state" feature to set/unset the value of these elements without giving a DOM search and a tedious code.

const [username, setUsername] = useState("");

And then we implement this to our element value.

<input type="text" placeholder="Enter Username" value={itemInput} onChange={(e)=> setItemInput(e.target.value)}

It becomes so easy to read, set & update user-given values with elements having so many unique IDs.

4. How are the values updated?

In Vanilla JS, we need to set a button beside the input field to update a Data Structure inside of the app.

<input type="text" placeholder="Enter an item" id="item-input" /> <button id="add-button">Add</button>

Then we need to get the element button using DOM search and then add an eventListener to the button to update the value when the button is clicked.

const addButton = document.getElementById("add-button");

addButton.addEventListener("click", function() {
  const input = document.getElementById("item-input");
  console.log(input.value);

  const list = document.getElementById("grocery-list");
  const listNode = document.createElement("li");
  const textNode = document.createTextNode(input.value);

  listNode.appendChild(textNode);
  list.appendChild(listNode);
});

So much just to append a single Item in the list? That is devastating!

So, Lets see what React has for us!

React can store the entire state of the list in a single JS variable.

const [items, setItems] = useState(["Milk", "Bread", "Eggs"]);

We can render this directly without hard-coding the list using JSX mapping over each listItem and returning each element as list item.

<ul>
    {items.map(item => (
        <li key={item}>{item}</li>
    ))}
</ul>

No eventListener right? Over that if you want to use an eventListener to update the List, the button comes with onClick() without having to do DOM search and setting the list.

function addItem() { console.log(itemInput); setItems([...items, itemInput]); }

This updation feature of React makes it more useful and us , developers happier transforming huge blocks of functions into a single line function.

Is React worth it?

So now comes the final statement, is React worth it? Well, React was created to make it more accessible and less mind-boggling, our code. The component based design enables us to incorporate the complexities and deal them with ease. The 'setState' functionality using 'React Hooks' makes it so easy to access the user Input. The updation features simply converts the blocks of Vanilla JS function into a one-liner React functions with more functionalities.

So for designing complex applications and dealing with loads of features and accessibilities, I think React is definitely worth investing the time and effort. Writing and learning React itself is an undeniable experience in itself.

So that was my take on React JS against Vanilla JS and the revolution that journey has brought into our industry!

Hope you guys liked it. Happy Coding! :)

React and Vanilla: a peep through the evolution of JavaScript!

A short read to give the basic idea about the differences and if React is worth the shift.

What is React?

Why React?

Is React worth it?