What is React ? Why it is so popular?

What is React?

React is a javascript library for building user interfaces. React is the most popular among developers and is the most recommended javascript frontend library to quickly build scalable web applications. React is loved by developers because it offers a range of benefits. The vast number of third-party libraries available for react makes react super powerful. With React development becomes quick and easy as compared to other UI libraries.

Why React is so popular?

React is Declarative.

React is declarative. In react, developers can do more with less coding. react itself handles so much by itself. developers can painlessly create interactive UIs. you can create separate UIs for each of your states and react will automatically render and updates the DOM (the corresponding UI) whenever state data changes in your component.

React is declarative not only w.r.t DOM manipulation but also concerning components rendering it is declarative. React uses a process called reconciliation to update the HTML DOM tree. If you want to read more about reconciliation in react, please refer to this link reconciliation in react.

React is Component-Based.

In react, the user interface is distributed into components along with their hierarchy. The UI can be divided into components based on responsibility. Ideally, one component should have only one responsibility. This principle is known as the single responsibility principle. Another way, we can say one component should do only one thing. If business requirement grows then the component can be decomposed into children components having separate concerns. This feature gives developers ease of development and debugging.

With this decomposition of responsibility, complex UIs can be built easily.

Reusable Components

Components in react library can be reused. yes, it is true. With the power of props, we can use reuse the same component to generate different user interfaces provided the component returns the same type of react element only the data and other attributes like styling may differ.

React apps can be easily optimized.

React gives us the feature of lazy loading. React gives us Suspense API. When the size of the app grows, developers prefer to chunk it into smaller size bundles. The components wrapped inside the Suspense API are bundled separately by the bundler. This reduces the size of the application bundle to be returned from the server. This leads to a reduction in application load time.

Client-side routing.

Routing is made easy with React Router DOM library. In single-page applications, the server returns the application in form of javascript bundles. These bundles have all components bundled together. Libraries like react-router-dom help react in mapping components with their routes. Whenever route change is detected, react automatically updates the UI with respective components on the client's machine without making a new request to the server.

Data binding is react is made easy with the help of context API and redux toolkit.

While building a client-side application or UI part of MVC architecture, binding the UI layer with the data layer is a crucial part. React provides context API to handle the synchronism of the UI layer with the data layer. Another way, you can use a third-party package called redux toolkit for the same purpose.

Both the context API and redux toolkit serve as centralized storage for your whole application. The centralized storage avoids prop drilling in react and data can be shared across components easily.

React has a vast number of third-party libraries.

React has vast third-party libraries which make react more powerful. react-router-dom, react-dom, redux, react-redux, redux-toolkit etc. make react a more powerful UI library. With the help of these libraries, we can save time in development and can add more advanced features to our app.

Another big advantage of using third-party libraries in react is that these libraries are maintained by the developers' community, and updates and bug fixes can be made easily without investing time and resources by yourself. This gives you more time to focus on business needs.

React app has a scope of testing.

In modern react apps, unit testing has been made easy with jest and react testing library. jest provides react application an environment-like browser (Not exactly like a browser ) to run while testing. The jest provides two environments, the first is jsdom and the second one is the node. The jsdom is similar to a browser-like environment to some extent but we may require to mock a few react features to work with jsdom while unit testing react app components. The node is a different testing environment and can be called a subset of jsdom.