Why React JS

• Handling view

  While Angular is a complete MVC (Model View Controller) framework with rigid architecture, the React library solely corresponds to the View layer. This isn’t actually a shortcoming since this offers front-end developers the flexibility to customize their application with the use of libraries of their choice for other processes like Model and Controller. This also relates to the well-known facts that React’s interactable API is smaller than that of Angular, and thus the learning curve of React is quite smooth.

• Unidirectional data binding

  Unlike Angular, React only permits one-way data binding to the view layer. This strictly downward flow of data from parent to child ensures stability such that child components do not inflict changes to their parent component.

• Virtual DOM

  Another advantage of React, co-shared by Vue is the way in which the Document Object Model is treated. The React application doesn’t modify the browser’s DOM directly, but maintains a copy of it in its environment, traces changes to them and simultaneously updates just the respective DOM objects. This makes React applications fast and high-performing. Development is also a streamlined process as HTML elements in the form of React components do not require to be explicitly bound to functionality, as they innately are.

• Tools and libraries

  React application development as well as testing is simplified with the use of easily available inbuilt and external tools and libraries. Flux and Redux are two of the most commonly integrated tools which manage application architecture and application state respectively. React also supports Isomorphic apps, which give an added SEO advantage!

• HTML in JS

  React uses the concept of ‘Components’ which relates to the HTML elements in the DOM. To create these components, React introduced an unconventional methodology: JSX, short for JavaScript XML, which is an XML-like markup syntax which is preprocessed to form regular JavaScript functions behind the scenes. The functions subsequently create corresponding HTML elements in the DOM. Of course, developers can write regular JavaScript functions to create DOM objects, but using HTML tags to create them seems much effort-saving.

• CSS in JS

  Using libraries like styled-components, we can create React components and alongside declare their styling in the same JS file as a string, which is preprocessed to form regular CSS declarations! Again, we don’t have to mandatorily use this feature, as we can code the regular styling as external CSS.