React is one of the most used and popular javascript library among developers. In this article, we are going to know why there's so much buzz about React among developers around the world.

Advantages of React

Reusable Components

In react we can do component-based development using reusable UI components. This helps in building big projects with some ease as you can create reusable components. It also helps in reducing the development code & time as well and makes it efficient.

Virtual DOM

React has something which is called Virtual DOM which is the copy of the actual DOM. In the traditional way, if one of the element in the DOM tree changes, the complete DOM tree gets re-render, but this is not the case with the Virtual DOM in react. Virtual DOM only re-renders the element or the component that is changed, it doesn't re-render the whole DOM tree, which increases the rendering efficiency.

One-way data flow

React follows a one-way data flow which makes the code stable, predictable, and easy to debug because if the data changes in the child then it will not affect its parent, it will affect only its children below.

JSX

JSX allows us to write HTML, CSS, and Javascript together in one component, which is not possible in javascript. JSX may seem confusing to a beginner, but once you get familiar it makes developer life easy because you can form logic and UI in one place, which helps us in building complete components.

Declarative

React is declarative and in declarative basically, we just declare how we want our UI to look on the screen, and react takes care of the implementation. For eg - If we want to create a button and an onClick event on it, then in jsx we can directly create an HTML button tag and on that add an onClick event listener with its handler function, which we can't do in javascript as its an imperative language. In JS, for this we will have to create a button element, then add an event listener, and so on.

Debugging

Debugging is easier in React with the use of the React Developer Tool which reflects the changes in our code. We can see which components has which state and props, and also by whom it's rendered, we can also view the complete React component tree and data flow of the app, which becomes really useful if it's a massive app.