Why I choose React? The Best Answer is Here

By MUHAMMAD YOUSUF

Posted on March 12, 2019

Share

Tweet

Share

Share

Email

Comments

Do you know about React? If not let me introduce You. Itis a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

History of React

React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook’s newsfeed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.

React Native, which enables native Android, iOS, and UWP development with React, was announced at Facebook’s React.js Conf in February 2015 and open-sourced in March 2015.

SPA vs MPA

There are two ways to develop web applications: single-page applications (SPA) and multi-page applications (MPA). Let’s look at the difference between them and what advantages each type of web application has.

Single Page Application (SPA)

Single-page applications allow you to simulate the work of desktop apps. The architecture is arranged in such a way that when you go to a new page, only a portion of the content is updated. Thus, there is no need to re-download the same elements. This is very convenient for developers and users. 

Multi Page Application (MPA)

Multi-page applications have a more classical architecture. Each page sends a request to the server and completely updates all the data. Even if these data are small. Thus, the performance is spent for displaying the same elements. Accordingly, this affects the speed and performance. A good example, updating the products without reloading the page, when using filters in the online store. It is much more convenient and most importantly faster.

Library vs Framework

Library:

A library is just a collection of class definitions. The reason behind is simply code reuse, i.e. get the code that has already been written by other developers. The classes and methods normally define specific operations in a domain specific area. For example, there are some libraries of mathematics which can let developer just call the function without redo the implementation of how an algorithm works.

Framework:

In framework, all the control flow is already there, and there’s a bunch of predefined white spots that you should fill out with your code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework when appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.

React vs Angular

If you are comparing ReactJS vs Angular 2+ you are thinking about the future. That’s great! Let’s clear up a few things first. React is a library and Angular is a framework.

Angular is a JavaScript framework written in TypeScript. It was developed and is maintained by Google while React is a JavaScript library developed and maintained by Facebook.

Both frameworks have component-based architecture. That means that an app consists of modular, cohesive, and reusable components that are combined to build user interfaces. Component-based architecture is considered to be more maintainable than other architectures used in web development. It speeds up development by creating individual components that let developers adjust and scale applications with little time to market.

Virtual DOM vs DOM

A virtual DOM object is a representation of a DOMobject, like a lightweight copy. A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

DOM

Just to get things straight – DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.

The HTML DOM provides an interface (API) to traverse and modify the nodes. It contains methods like getElementById or removeChild. We usually use JavaScript language to work with the DOM

Virtual DOM

The Virtual DOM was not invented by React, but React uses it and provides it for free.

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

In summary, here’s what happens when you try to update the DOM in React:

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

Why I choose React? The Best Answer is Here