What is React?

Introduction

In the last article, we have learnt all the basic concepts of browser functionality, rendering engine, DOM etc.Although the traditional DOM is crucial for the web, it comes with considerable disadvantages related to performance, complexity, and maintainability, especially in dynamic and interactive web applications. To tackle these issues, modern frameworks and technologies like React have emerged that provide more efficient and scalable alternatives, including the Virtual DOM and component-based architectures.

In this article, we will start to learn about the React technology, Virtual DOM, components and many more. Also we will set up our environment and create a simple React web application.

What is React?

React is a project created and maintained by Facebook. React is an open source javascript library. Remember, It is not a framework. The main focus of React is to excel at one specific thing. That is creating user interfaces.

It utilises a virtual DOM (JavaScript object), which boosts the efficiency of the app. The JavaScript virtual DOM operates faster than the traditional DOM.

Virtual Document Object Model (DOM)

To overcome the drawback of traditional dom, the react uses Virtual DOM which serves as a more efficient version of the Real DOM. Manipulating the Real DOM tends to be significantly slower than working with the Virtual DOM.

How does Virtual DOM work?

When the component is rendered, it creates a copy of the real DOM.
If any change occurs in the component, it updates the VDOM instead of real DOM.
Then it compares the new VDOM with the copy of the real DOM. (Previous version).
By comparing, it identifies which objects have changed.
The Virtual DOM updates just that particular object in the Real DOM, instead of updating all of them.

How do Virtual DOM and Real DOM interact with each other?

When an object’s state changes in a React app, the Virtual DOM (VDOM) is refreshed. It compares the current state to the previous one and modifies only the affected elements in the actual DOM, rather than updating everything. This approach enhances performance, particularly when compared with other front-end technologies that must refresh every element even if just one single object has changed in the application.

Before understanding the component based architecture we must have to understand the SPA which single page application.

Single Page Application

Single Page Application is an application that loads a single HTML page which updates its content dynamically based on the user interactions. Rather than navigating between multiple pages, SPAs utilise JavaScript to retrieve and display content in a single page, resulting in a more responsive user experience.

What is the component?

Component is like a container which binds the HTML, CSS and javascript for a specific part of the UI. We can reuse the container where ever needed. This makes it easier to maintain and manage the code.

Component Based Architecture

The architecture of React is based on components, which means that the application is divided into small, self-contained parts that can be combined to create more complex user interfaces.

For example, a typical website can be divided into a header, sidebar, navigation, main content, and footer. Each part serves as a component that, when arranged correctly, forms the complete website.

Components also make it possible to write reusable code.

Why React?

Components serve as the fundamental elements of any React application, and a typical app comprises numerous components. Each of these components contains its own logic and controls, allowing for reuse across the application, which significantly cuts down the development time of the application.

React employs Virtual DOM, The Virtual DOM analyses the previous states of components and only modifies the elements in the Real DOM that have changed, rather than refreshing all components like traditional web applications do.

React operates on a unidirectional data flow principle. As a result, when creating a React application, developers typically place child components inside parent components. Since the data moves in one direction, it simplifies the debugging process and helps identify where an issue arises in the application at any given time.

Request more information

What is React?