React.js

React.js is a popular JavaScript library used for building user interfaces, particularly for single-page applications where you want a dynamic and responsive user experience. It was developed and is maintained by Facebook.

Important Features of React JS

Component-Based Architecture

Component-Based Architecture is a design pattern used in User Interface design framework. It divides smaller, reusable and independent piece called component which has its own logic, structure and behavior. Component based architecture is a core principle of React.js and one of main reasons of its popularity and effectiveness in building User Interface.

Advantages

• Improved Maintainability :- As each component has its own logic and function and changing the one component does not affect the other, making application more easier to maintain.

Enhanced Reusability :- Same component can be used in multiple place while developing a application, hence it reduce the time of development and create a constant look and feel.

• Encapsulation :- Each component has their own logic and structure which are hidden from the rest of the application. Each component handle specific piece of functionality and they are capable of performing their task.

Virtual DOM (Document Object Model)

Document Object Model is the important part of web as it divides into modules and executes the code. In JavaScript whole DOM is updated at once if certain change is made on the particular node which makes the web application slow. React use virtual DOM. Virtual DOM is the exact copy of real DOM.

In React JS,

• When a component is first rendered, a virtual DOM tree is created that represents the structure of the actual DOM.
• When the state of a component changes, a new virtual DOM tree is created and React then compares this new tree with the previous tree to determine what has changed.
• Only the parts of the DOM that have changed are updated, rather than re-rendering the entire DOM tree.

Declarative Programming

Declarative Programming is the programming pattern that express the logic of program execution rather than its control flow. It does not describe the step by step process of the executed program instead focus on the expected result. React JS is the JavaScript library that is uses for building user interface in declarative manner. Describe how UI should look based on the application state and React update the DOM automatically.

JavaScript XML (JSX)

JavaScript XML is a syntax extension for JavaScript that let you to write HTML-like markup inside a JavaScript file. It make easier to visualize and understand the structure of user interface. JSX uses the attribute similar to HTML to pass the properties to the React component.

example :-

const element = <img src={user.avatarUrl} alt={user.name} />;        

Single Page Application

A Single Page Application is a web app implementation that loads only a single web document, rather than updating the whole new pages from the server.

It allows users to use websites without loading whole new pages from the server, which increase the performance and more dynamic experience. By utilizing the component-based architecture of React, developers can easily break down their application into individual pieces without affecting other parts of the code base. This ensure that only relevant code is modified when changes or update are made.

Advantages

• Fast and responsive user experience
• Easier and quicker development
• Simplified code maintenance