ReactJS Introduction

ReactJS is a free and open-source front-end JavaScript library which is used to develop various
interactive user-interfaces. It is a simple, feature rich and component based UI library. When we
say component based, we mean that React develops applications by creating various reusable and
independent codes. This UI library is, thus, widely used in web development.

ReactJS can be used to develop small applications as well as big, complex applications. ReactJS
provides minimal and solid feature set to kick-start a web application. React community
compliments React library by providing large set of ready-made components to develop web
application in a record time. React community also provides advanced concept like state
management, routing, etc., on top of the React library.

React versions

Reactjs library was founded by Jordan Walke, a software engineer at Facebook in 2011. Then the
initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released
on October, 2020. The major version introduces breaking changes and the minor version
introduces new feature without breaking the existing functionality. Bug fixes are released as and
when necessary. React follows the Semantic Versioning (semver) principle.

What is the need for ReactJS?

Even though there are various libraries that provide a medium to develop user-interfaces,
ReactJS still stands tall in terms of popularity. Here's why −

 Component Based − ReactJS makes use of multiple components to build an application.

These components are independent and have their own logic which makes them reusable
throughout the development process. This will drastically reduce the application's
development time.

 Better and Faster Performance − ReactJS uses Virtual DOM. Virtual DOM compares
the previous states of components of an application with the current states and only
updates the changes in Real DOM. Whereas, conventional web applications update all
components again. This helps ReactJS in creating web applications faster.

 Extremely Flexible − React allows developers and teams to set their own conventions
that they deem are best suited and implement it however they see fit, as there are no strict
rules for code conventions in React.

 Creates dynamic applications easily − Dynamic web applications require less coding
while offering more functionality. Thus, ReactJS can create them easily.

 Develops Mobile Applications as well − Not only web applications, React can also
develop mobile applications using React Native. React Native is an open-source UI
 software framework that is derived from React itself. It uses React Framework to develop
applications for Android, macOS, Web, Windows etc.

 Debugging is Easy − The data flow in React is unidirectional, i.e., while designing an
app using React, child components are nested within parent components. As the data
flows is in a single direction, it gets easier to debug errors and spot the bugs.

Applications

Few popular websites powered by React library are listed below −

 Facebook, popular social media application − React was originally developed at

Facebook (or Meta), so its only natural that they use it to run their application. As for
their mobile application, it uses React Native to display Android and iOS components,
instead of DOM. Facebook's codebase now includes over 20,000 components and uses
the React version that is public.

 Instagram, popular photo sharing application − Instagram is also completely based on

React, as it is powered by Meta as well. The main features to show its usage include Geo-
locations, Hashtags, Google Maps APIs etc.

 Netflix, popular media streaming application − Netflix switched to React in 2015. The
factors that mainly influenced this decision are the 1) startup speed to reduce the
processing time to render the homepage and enabling dynamic elements in the UI, 2)
modularity to allow various features that must coexist with the control experience and 3)
runtime performance for efficient UI rendering.

 Code Academy, popular online training application − Code Academy uses React as the
"script is battle-tested, easy to think about, makes SEO easy and is compatible with
legacy code and flexible enough for the future".

 Reddit, popular content sharing application − Reddit is also developed using React from
the scratch.

As you see, most popular application in every field is being developed by React Library.

ReactJS - Features

ReactJS slowly becoming one of the best JavaScript framework among web developers. It is
playing an essential role in the front-end ecosystem. Following are the important features of
ReactJS

 Virtual DOM

 Components
  JSX

 One way data binding

 Scalable

 Flexible

 Modular

Virtual DOM

Virtual DOM is a special DOM created by React. Virtual DOM represents the real DOM of the
current HTML document. Whenever there is a change in the HTML 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.

Components

React is build upon the concept of components. All modern front end framework relies on the
component architecture. Component architecture enables the developer to break down the large
application into smaller components, which can be further break down into even smaller
component. Breaking down the application into smaller component simplifies the application and
make it more understandable and manageable.

JSX

JSX is a JavaScript extension to create arbitrary HTML element using syntax similar to HTML.
This will simplify the HTML document creation as well as easy to understand the document.
React will convert the JSX into JavaScript object consisting of React's createElement() function
call before executing it. It improves the performance of the application. Also, React allows the
HTML document creation using pure createElement() function without JSX as well. This
enables the developer to directly create HTML document in a situation where JSX does not fit
well.

One way data binding

One way data binding prevents the data in a component to flow backward. A component can
pass the data to its child component only. The data cannot be passed by a component to its parent
component in any situation. This will simplify the data handling and reduce the complexity. Two
way data binding may seems mandatory at first but a closer look suggests that the application can
be done with one way data binding only and this simplifies the application concept as well.

Scalable

React can be used to create application of any size. React component architecture, Virtual DOM
and one way data binding properly handle large application in a reasonable time frame required
for a front end application. These features make React a scalable solution.

Flexible

React only provides only few basic concept to create truly scalable application. React does not
restrict the developer in any way to follow a rigid process. This enables the developer to apply
their own architecture on top the basic concept and makes it flexible.

Modular

React component can be created in a separate JavaScript file and can be made exportable. This
enables the developer to categories and group certain components into a module so that it can be
imported and used wherever needed.

React JS advantages and 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.

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.
ReactJS - Architecture

React library is built on a solid foundation. It is simple, flexible and extensible. As we learned
earlier, React is a library to create user interface in a web application. React's primary purpose is
to enable the developer to create user interface using pure JavaScript. Normally, every user
interface library introduces a new template language (which we need to learn) to design the user
interface and provides an option to write logic, either inside the template or separately.

Instead of introducing new template language, React introduces three simple concepts as given
below −

React elements

JavaScript representation of HTML DOM. React provides an

API, [Link] to create React Element.

JSX

A JavaScript extension to design user interface. JSX is an XML based, extensible language
supporting HTML syntax with little modification. JSX can be compiled to React Elements and
used to create user interface.

React component

React component is the primary building block of the React application. It uses React elements
and JSX to design its user interface. React component is basically a JavaScript class (extends
the [Link] class) or pure JavaScript function. React component has properties, state
management, life cycle and event handler. React component can be able to do simple as well as
advanced logic.

Architecture of the React Application

React library is just UI library and it does not enforce any particular pattern to write a complex
application. Developers are free to choose the design pattern of their choice. React community
advocates certain design pattern. One of the patterns is Flux pattern. React library also provides
lot of concepts like Higher Order component, Context, Render props, Refs etc., to write better
code. React Hooks is evolving concept to do state management in big projects. Let us try to
understand the high level architecture of a React application.
 React app starts with a single root component.

 Root component is build using one or more component.

 Each component can be nested with other component to any level.

 Composition is one of the core concepts of React library. So, each component is build by
composing smaller components instead of inheriting one component from another
component.

 Most of the components are user interface components.

 React app can include third party component for specific purpose such as routing,
animation, state management, etc.
ReactJS Lifecycle

Every React Component has a lifecycle of its own, the lifecycle of a component can be defined
as the series of methods that are invoked in different stages of the component’s existence. React
automatically calls these methods at different points in a component’s life cycle. Understanding
these phases helps manage the state, perform side effects, and optimize components effectively.

1. Initialization

This is the stage where the component is constructed with the given Props and default state. This
is done in the constructor of a Component Class.

2. Mounting Phase

 Constructor: The constructor method initializes the component. It’s where you set up the
initial state and bind event handlers.

 render(): This method returns the JSX representation of the component. It’s called
during initial rendering and subsequent updates.

 componentDidMount(): After the component is inserted into the DOM, this method is
invoked. Use it for side effects like data fetching or setting timers.

3. Updating Phase

 componentDidUpdate(prevProps, prevState): Called after the component updates due

to new props or state changes. Handle side effects here.
  shouldComponentUpdate(nextProps, nextState): Determines if the component should
re-render. Optimize performance by customizing this method.

 render(): Again, the render() method reflects changes in state or props during updates.

4. Unmounting Phase

 componentWillUnmount(): Invoked just before the component is removed from the

DOM. Clean up resources (e.g., event listeners, timers).