Back to: ReactJS Tutorials
Why ReactJS Instead of JavaScript?
In this article, I am going to discuss Why ReactJS Instead of JavaScript? Please read our previous article where we discussed what is ReactJS. At the end of this article, you will understand why we need ReactJS. Why do we want React in addition to JavaScript?
Why ReactJS Instead of JavaScript?
React is a popular Front-End JavaScript library for building web applications and this JavaScript Library becomes one of the most popular libraries for developing web applications in recent years. React is built on top of JavaScript, but it offers several powerful features that make it one of the best choices for building complex user interfaces.
In this article, we will discuss some of the key reasons why developers might choose to use React instead of just sticking with JavaScript while developing the user interface. We will also discuss the benefits that React provides for modern web development. Whether you are an experienced developer or just getting started with front-end development, understanding the advantages of React can help you make decisions about your technology stack and build better, and more scalable web applications.
Example to Understand why to React Instead of JavaScript:
Let us understand, why need to use React instead of JavaScript in Front End Development. Please have a look at the following image. This is a very basic web page. We have some content on this web page.
As you can see on the above page, we have a Delete button. When we click on the Delete button as shown in the below image, we get a dialogue box that is asking Are you sure? and there are two buttons Cancel and Confirm. Both buttons do not do anything but close the dialogue box. All of that is controlled with JavaScript.
Let us implement the above example using HTML, CSS, and JavaScript. Below is the HTML, CSS, and JavaScript code of the above webpage
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>
<body>
<h1>A Basic Page</h1>
<div class="card">
<h2>Learn React</h2>
<div class="actions">
<button class="btn">Delete</button>
</div>
</div>
</body>
</html>
styles.css:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 3rem;
background-color: #dfdfdf;
}
h1, h2 {
color: #333333;
}
.btn {
font: inherit;
padding: 0.5rem 1.5rem;
cursor: pointer;
border-radius: 4px;
background-color: #800040;
color: white;
border: 1px solid #800040;
margin: 0 1rem;
}
.btn:hover{
background-color: #9c1458;
border-color: #9c1458;
}
.btn--alt{
background-color: transparent;
color: #800040;
}
.btn--alt:hover{
background-color: #f8dae9;
}
.card {
background-color: white;
border-radius: 4px;
box-shadow: 0 1px 4pc rgba(0, 0, 0, 0.2);
padding: 1rem;
width: 20rem;
}
.actions {
text-align: right;
}
.modal {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 6px;
background-color: white;
padding: 1rem;
text-align: center;
width: 30rem;
z-index: 10;
}
app.js:
const button = document.querySelector('button');
let modal;
let backdrop;
button.addEventListener('click', showModalHandler);
function showModalHandler() {
if (modal) {
return;
}
modal = document.createElement('div');
modal.className = 'modal';
const modalText = document.createElement('p');
modalText.textContent = 'Are you sure?';
const modalCancelAction = document.createElement('button');
modalCancelAction.textContent = 'Cancel';
modalCancelAction.className = 'btn btn--alt';
modalCancelAction.addEventListener('click', closeModalHandler);
const modalConfirmAction = document.createElement('button');
modalConfirmAction.textContent = 'Confirm';
modalConfirmAction.className = 'btn';
modalConfirmAction.addEventListener('click', closeModalHandler);
modal.append(modalText);
modal.append(modalCancelAction);
modal.append(modalConfirmAction);
document.body.append(modal);
backdrop = document.createElement('div');
backdrop.className = 'backdrop';
backdrop.addEventListener('click', claoseModalHandler);
document.body.append(backdrop);
}
function closeModalHandler() {
modal.remove();
modal = null;
backdrop.remove();
backdrop = null;
}
In app.js which is our JavaScript file, we have added an event listener to the main button (‘Delete’) which we got on the screen. When the button is clicked, the ‘showModalHandler’ function will be run that contains the bunch of JavaScript code to create various elements i.e. divs, and paragraphs, and then cancel and confirm buttons and configure and add text or CSS classes to these elements. In the ‘showModalHandler’ function, we have written JavaScript code that will add the listener to those elements i.e. ‘closeModalHandler’.
So, this is the JavaScript code responsible for opening the ‘Are you sure?’ dialogue. In this webpage, we have a single content i.e. ‘Learn React’. If we would add multiple contents, we would repeat the HTML code multiple times to render more content on this webpage or to even render those dynamically, the above JavaScript code will become more difficult, and far more complex.
For example, we could not just select a button on the page with the querySelector. Because we would have multiple delete buttons for multiple operations. And we would have to make sure that, for different operations, different windows will be opened. And when we confirm the deletion, the correct operation is deleted. We are not even doing the deletion in this tutorial, but that will be more complex.
And therefore, JavaScript works and hence sometimes be a good choice, but it can also reach its limit. And one of the reasons is that with JavaScript, you have to write every single step that should be taken care of. For example, to create an element, then set its content, add classes, add click listener, and add function to that listener. All single steps need to be described.
This way of programming and bringing something onto the screen is called an imperative approach. We simply describe action after action or step after step. And that can reach its limits. And in addition, even if we do not reach any limits, we as a developer have to take care of all the basic details.
Same Example with React
Now here is the same example with React.
This works in the same way but the code looks very different. Don’t go with code and how we created it, we will discuss these things in detail in our upcoming articles.
This is the screenshot of React project. As a side note, you find both code repositories, and both code snapshots attached. Here in ReactJS, this might look a bit more complex, we got more files involved here. But that is something we are going to learn throughout this course. But in the end, this is the main code that is responsible for bringing this TODO onto the screen. And what is very interesting here is that we have like a custom HTML component here. And indeed, React is all about those components. React is all about splitting your application into small building blocks, and small components.
Where every building block, every component has a clear task and therefore your code stays maintainable and manageable. And React, the JavaScript library, will do the heavy lifting of rendering something on the screen and combining all your code. And even though it is certainly strange that we have HTML code in JavaScript files. We will see this in our upcoming articles.
Here we do not have a bunch of step-by-step instructions here. Instead, we define what we want to have as an end result. And then we have some placeholders, some flexible elements there. And then we have very simple instructions here, which in the end will be processed by React to change what is visible on the screen.
And all these low-level instructions for creating elements and setting text contents, those instructions are not written by us when using React, instead they will be written or defined by the React library. We, as a React developers, work on a higher level, which makes working with React and which makes building complex user interfaces easier. And that is why we want to use ReactJS. It makes building modern, rich, complex user interfaces easier.
And it does so, by giving us a higher-level syntax, where we write code in a declarative component-focused way. We define what we want to have on the screen. We create these custom HTML elements and React will do the rest.
ReactJS Features:
- Use JSX: JSX is faster than normal JavaScript as it performs optimizations while translating code to regular JavaScript code. JSX makes it easier for us to create templates while developing the application.
- Virtual DOM: Virtual DOM (Document Object Model) exists in React which is nothing but the lightweight version of the actual DOM (Document Object Model). So, for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast.
- Component: Components are the basic building blocks of any React application. In other words, we can also say that every application we will develop in React will be made up of pieces called components. These components have their own logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
- Performance: ReactJS use JSX, which is faster compared to normal JavaScript and HTML. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all components again, as conventional web applications do, and as a result, we will get better performance.
ReactJS Advantages:
- Component: We can divide the application into different custom components. Then we can utilize those components and we can also integrate them into one place.
- Declarative: In react the DOM is declarative. We can make interactive UIs by changing the state of the component and ReactJS will take care of updating the DOM according to it.
- Community: React has a huge community because of its demand each company wants to work with React. Companies like Meta, Netflix, etc built on React.
- Easy to learn: The syntax of React is very much similar to HTML-like syntax which makes you comfortable with the codes of React, it only requires to need a basic knowledge of HTML, CSS, and JavaScript fundamentals to start working with it.
- Open-Source: ReactJS is an open-source JavaScript library, so it is easy to start with.
ReactJS Disadvantages
- Employs inline scripting and JSX, which some programmers might find uncomfortable. Most of the code is written in JSX, i.e., Html and CSS are part of JavaScript, it can be quite confusing as most other frameworks prefer keeping Html separate from the JavaScript code.
- The file size of ReactJS is large.
In the next article, I am going to discuss How to Build Single Page Application using React. In this article, I try to explain why we need React. Why do we want React in addition to JavaScript? I hope you enjoy this why do we need React or Why Do we want to use React in addition to JavaScript article.
