React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC.

React abstracts away the DOM from you, offering a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.

Advantages of ReactJS

Following are the main advantages of ReactJS −

• Performance

• Easy to learn

• Huge collection of third party components

• Large community

• SEO Friendliness

• Easy kick-starting of the React project

• Rich set of developer tools

• Handle large application

Performance

React uses Virtual DOM concept to check and update the HTML document. Virtual DOM is a special DOM created by React. Virtual DOM represents the real DOM of the current document. Whenever there is a change in the document, React checks the updated virtual DOM with the previous state of the Virtual DOM and update only the different in th actual / real DOM. This improves the performance of the rendering of the HTML document.

For example, if we create a React component to show the current time by periodically updating the time through setInterval() method, then React will update only the current time instead of updating the whole content of the component.

Easy to learn

The core concept of React can be learned in less than a day. React can be coded in either Plain Javascript (ES6) or Typescript. To start with React, the basic knowledge of the JavaScript is enough. For advanced developer, Typescript provides type safety and rich language feature. A react component can be created by a developer in few hours by learning JSX (similar to HTML) and properties (props). Learning React state management will enable the developer to create dynamic component, which updates the content whenever the state changes. React provides simple lifecycle for its component, which can be used to properly setup and destroy the component.

Huge collection of third party components

In addition to core react library (which is only a few KB in size), React community provides a large number of component for a wide range of application from simple UI component to full fledged PDF Viewer component. React provides multiple option in each category. For example, the advanced state management can be done using either Redux or MobX library. Redux and Mobx are just two popular library to do state management. React has more than 10 library to archive the same functionality. Similarly, React community provides lot of third party library in each category like routing, data grid, calendar, form programming, etc.,

Large community

React developer community is a huge community with lot of activities. React community is very active that you can get answer for any react related question / doubts in a few minutes through google, stackoverflow, etc.,

SEO friendliness

React is one of the few JavaScript library to support SEO features. Since React components and JSX are similar to HTML elements, SEO can be easily achieved without much code / setup.

Easy kickstart of React project

React provides a CLI application, create-react-app to create a new react application. create-react-app application not only create a new application, it also build and run the application in the local environment without any other dependencies. create-react-app allows the developer to choose a template, which allows the application to include more boilerplate code during initial setup itself. This allows the developer to kickstart small application to large application in few clicks.

In addition to create-react-app, React community additional tools such as nextjs, gatsby, etc., which allows developer to create advanced application in a short period of time.

Rich set of developer tools

React community provides essential developer tools to enhance the developer productivity. React developer tool for chrome, edge and firefox browser enables developer to select a react component and see the current state of the component. Also, it enables the developer to has clear picture of the view of the component hierarchy by show it as a tree of component in the Developer Tab of the browser.

Handle large application

React uses composition to merge multiple component into one bigger component, which in turn allows to create much more larger component. React component can be created in a single JavaScript file and can be set as exportable. This feature allows multiple component to be grouped under a common category as module and can be reused in other places.

Composable and modular features of the React library allows developer to create large application, which is relatively easy to maintain when compared to other front end framework.

Disadvantages of React

Even through React library has lot of positives, it has some of the drawbacks as well. Some of the drawbacks are as follows −

• Lack of quality documentation

• No standard / recommended way to develop application

• Fast development pace

• Advanced use of JavaScript

• JavaScript extension

• Just a UI library

Lack of quality documentation

React library has a decent documentation in its primary website. It covers the basic concept with few examples. Even though, it is a good start to understand the basic of React concept, it does not provides a deep and detailed explanation with multiple examples. React community steps in and provides lot of articles with varying level of complexity and quality. But, they are not organized under one place, where the developer can easily learn.

No or Less standard way to develop application

React is just a UI library with few concept and standard recommendation. Even through React can be use to create large / complex application, there is no standard or recommended way to create a application. As there is no standard way, React community uses multiple architecture to build their application. Developer are free to choose a methodology for their application. A wrong choice at the beginning of the application development complicates the application as well as delay the development of the application.

Fast development pace

React releases new version of the library few times in a year. Each release has few addition feature and few breaking changes. Developer need to learn fast and apply the new concept to stabilize the application.

Advanced use of JavaScript

Even through the core concept of the React library is quite simple and easy to learn, the advanced concept are quite complex as it exploits advanced features of JavaScript. Also, React has lot of advanced concept to address many of the complex scenarios of the HTML / Form programming. The shear number of advanced concept is really quite a challenge for the developer to learn and master it.

JavaScript Extension

JSX is an extension of JavaScript language. JSX is similar to HTML and simplifies the component development. JSX also has few differences with the HTML Programming and need to be careful to apply it correctly. Additionally, JSX needs to be complied to JavaScript before executed in the browser which is addition step / burden for the application.

Just a UI library

As we learned earlier, React is just a UI library and not a framework. Creating a React application with good architecture needs careful selection and application of additional third party react library. A bad design may affect the application in the later / final stage of the application development.