When building a Frontend UI or User Interfaces for web applications, We have choices between Plain JavaScript or making use of libraries or frameworks such as React. Before delving into more details first, let's talk about What is JavaScript and What is React.
Table of Content
What is JavaScript?
JavaScript is a scripting language that is mainly used for web development. It allows to create dynamic and interactive web pages. It also allows us to manipulate DOM and handle user interactions. It was developed by Brenden Eich in 1995. The language, formerly known as Mocha, later modified to LiveScript, and is now known simply as JavaScript.
What is ReactJS?
ReactJS is a popular Open-Source JavaScript library for building user interfaces that define how user-friendly apps should be written. It is maintained by Facebook and a community of developers. React offers a powerful and efficient way to create dynamic and interactive web applications.
Why use React over JavaScript?
When it comes to creating web applications, we have so many approaches on the hand. We can either use plain JavaScript (i.e. scripting language that does not give in to any rules) or we can utilize libraries and frameworks like React.js.
With plain JavaScript, we write codes to manipulate the DOM directly. In plain JavaScript UI is created in HTML on the server side, which is then sent to the browser. Manipulating DOM with Plain JavaScript includes selecting HTML elements, updating their properties and handling user interactions manually using event listeners. With plain JavaScript we can fully control the DOM but it can easily become complex, unmanageable and time-consuming, mainly for large scale applications.
Whereas, React.js includes a components based architecture where user interfaces are divided into reusable and modular components. We writes components using JSX(JavaScript XML) - a syntax extension for JavaScript that allows us to write JavaScript with HTML without Script tag in a single file with a more declarative and natural way. React only updates the DOM by only re-rendering components that have changed, providing us a better performance and a smooth user experience.
Benefits of using React over JavaScript
React offers many other advantages over plain JavaScript for creating dynamic and interactive web applications.
- Component-Based Architecture: React's component-based architecture allows us to break down User Interface elements into chunks or smaller and reusable components.
- Better Code Organization and Maintance: With Component based architecture, where we break down UI elements to smaller and reusable components, managing our web application become more easy and it leads to a better code organization.
- JSX: React makes use of JSX(JavaScript XML), a syntax extension for JavaScript that allows us to write HTML within JavaScript files.
- DOM Manipulation: React uses Virtual DOM. In Virtuall DOM only the parts that are changed gets updated. This optimization improves performance and a smooth user experience.
- State Management: React offers robust state management system, that makes it easy to manage and update the state of UI components.
- SEO: Reacts server side rendering, makes it more SEO Friendly in comparision to applications built with plain JavaScript.
Creating web pages using JavaScript and React
Using Plaing JavaScript
The vanilla or plain JavaScript is run on the browser with the help of HTML. and It increases the length of code.
Example: The plain JavaScript is used to create a simple web page in the below code example.
<!DOCTYPE html>
<html>
<head>
<title>
Hello World
</title>
</head>
<body style="text-align: center;">
<h2>
Welcome To GFG
</h2>
<button id='btn'>
Click Me!
</button>
<script>
const btn = document.
getElementById('btn');
btn.addEventListener('click',
() => {
alert('Hello World!!');
});
</script>
</body>
</html>
Output:
Using React.js
The react make the code easier to read, also it helps to make the code short and consistent.
Example: The below code implements the React component to create a simple web page.
import React from 'react';
function App() {
const handleClick = () => {
alert("Hello World!!");
};
return (
<div>
<h2>
Welcome To GFG
</h2>
<button onClick={handleClick}>
Click Me!
</button>
</div>
);
}
export default App;
Output:
Features of ReactJS
- Component Based Architecture: Reusable components of code that represents different parts of user interface.
- JSX: JavaScript XML, a syntax extension for JavaScript, that allows us to write HTML in JavaScript Code.
- Virtual DOM: ReactJS uses Virtual DOM. With Virtual DOM, only the component or part that changes gets updated in Real DOM.
- State Management: State is managed within the component, and when it changes, the components re-renders.
- Server Side Rendering: React uses Server side rendering to render components on the web page.
- One Way Data Binding: Data is passed from parent to child components through props.
- React Hooks: Hooks like useState, useEffect and useContext.... make it easier to write more clean and readable code.