- ReactJS Tutorial
- ReactJS - Home
- ReactJS - Introduction
- ReactJS - Installation
- ReactJS - Features
- ReactJS - Advantages & Disadvantages
- ReactJS - Architecture
- ReactJS - Creating a React Application
- ReactJS - JSX
- ReactJS - Components
- ReactJS - Nested Components
- ReactJS - Using Newly Created Components
- ReactJS - Component Collection
- ReactJS - Styling
- ReactJS - Properties (props)
- ReactJS - Creating Components using Properties
- ReactJS - props Validation
- ReactJS - Constructor
- ReactJS - Component Life Cycle
- ReactJS - Event management
- ReactJS - Creating an Event−Aware Component
- ReactJS - Introduce Events in Expense Manager APP
- ReactJS - State Management
- ReactJS - State Management API
- ReactJS - Stateless Component
- ReactJS - State Management Using React Hooks
- ReactJS - Component Life Cycle Using React Hooks
- ReactJS - Layout Component
- ReactJS - Pagination
- ReactJS - Material UI
- ReactJS - Http client programming
- ReactJS - Form Programming
- ReactJS - Controlled Component
- ReactJS - Uncontrolled Component
- ReactJS - Formik
- ReactJS - Conditional Rendering
- ReactJS - Lists
- ReactJS - Keys
- ReactJS - Routing
- ReactJS - Redux
- ReactJS - Animation
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - Table
- ReactJS - Managing State Using Flux
- ReactJS - Testing
- ReactJS - CLI Commands
- ReactJS - Building and Deployment
- ReactJS - Example
- Hooks
- ReactJS - Introduction to Hooks
- ReactJS - Using useState
- ReactJS - Using useEffect
- ReactJS - Using useContext
- ReactJS - Using useRef
- ReactJS - Using useReducer
- ReactJS - Using useCallback
- ReactJS - Using useMemo
- ReactJS - Custom Hooks
- ReactJS Advanced
- ReactJS - Accessibility
- ReactJS - Code Splitting
- ReactJS - Context
- ReactJS - Error Boundaries
- ReactJS - Forwarding Refs
- ReactJS - Fragments
- ReactJS - Higher Order Components
- ReactJS - Integrating With Other Libraries
- ReactJS - Optimizing Performance
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - React Without ES6 ECMAScript
- ReactJS - React Without JSX
- ReactJS - Reconciliation
- ReactJS - Refs and the DOM
- ReactJS - Render Props
- ReactJS - Static Type Checking
- ReactJS - Strict Mode
- ReactJS - Web Components
- Additional Concepts
- ReactJS - Date Picker
- ReactJS - Helmet
- ReactJS - Inline Style
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - Carousel
- ReactJS - Icons
- ReactJS - Form Components
- ReactJS Useful Resources
- ReactJS - Quick Guide
- ReactJS - Useful Resources
- ReactJS - Discussion
ReactJS - Advantages & Disadvantages
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.