FRONTEND DEVELOPMENT WITH REACT.JS

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056
Volume: 09 Issue: 06 | June 2022 www.irjet.net p-ISSN: 2395-0072
© 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page 2339
FRONTEND DEVELOPMENT WITH REACT.JS
Anjali Rananavare1
Department of MCA, Vivekanand Education Society’s Institute of Technology, Mumbai, India.
---------------------------------------------------------------------***---------------------------------------------------------------------
Abstract - The most fundamental software or any app
development is to select which is the right frontend
framework or library to go with. The market has an
extensive variety due to the extensive range of problems
that developers face every day. For front-end development,
react.js is playing a vital role and creating new
opportunities for developers to build new applications. This
paper addresses how react.js is helping in the building user
interfaces and the advantages it is having in building the
front-end. According to a survey conducted by Web
Technology Surveys, React.js is used by 46.4% of all the
world's websites. If we say that React.JS is ubiquitous, it will
not be an overstatement. The new audiences have mixed
interests when it comes to websites. After all, companies like
Facebook, PayPal, Instagram utilize this JavaScript-based UI
library for a major part of their application’s front-end
development for web as well as mobile. In this paper, the key
features include its advantages over other frameworks, its
working and its architecture.
Key Words: JavaScript, React.JS, Node.JS, Angular, Virtual
DOM, Web development, Frontend development.
1. INTRODUCTION
When React came into the picture, Angular was the sole
and major challenger within the JS framework house.
Whereas Angular was a whole and correct framework, it
absolutely was terribly tough for developers as they had to
do a lot of coding. Even seasoned JavaScript developers,
found it tough to code and that they were trying to find
some various alternatives to resolve their answer.
Angular.JS was never the preferred way to build JS
applications. It has a lot of functionalities and those
weren't required by most developers.
React.js came, and it revolutionized the manner internet
applications are developed. However, React is not a MVC
framework as Angular is. It's solely a library. That is,
React.js doesn’t embody state managers, routers, and API
managers within the core library. It's going to seem like a
limitation except for React developers, however this is
often solely the most effective in creating websites as code
is extremely simple to grasp with all parts and alternative
things.
The aim of the paper is to demonstrate the suitableness of
the React.js frameworks offered for the event of internet
applications moreover as mobile.
2. APPLICATIONS OF REACT.JS
React.JS has numerous applications as a tool to create
interactive, rich, and robust UI’s.
● Creation of dynamic applications with ease- React JS
requires less coding and offers more functionality which
makes it easier to create dynamic web applications for
developers.
● Open-sourced library- React.JS is JavaScript’s open-
sourced library is one of the reasons as React JS is
emerging as the fastest emerging JS library among the
frontend developer’s community and organizations.
● Use of Reusable components- React.JS is all about
components. Components are the main aspect of any
React.JS application. Multiple components could be there
in the application which can be re-used and development
times could be reduced.
● Easy debugging tools- Chrome extension is issued by
Facebook to debug the react applications which eventually
results in faster debugging of react applications. React
Developer Tool is a Chrome extension developed for open-
source JavaScript libraries.
● Backed by a large development community-
Facebook who designed and released React JS uses React
JS in their application also Instagram, Reddit, Netflix are
one of the leading companies that uses React JS in their
web applications.

3. ARCHITECTURE
Above are the four main aspects of React.JS
3.1 React Virtual DOM
The virtual DOM (Virtual document object model) is one
among the best components of React JS. It is a very little
like the DOM generated by the browser; however, the only
distinction is that it's kept within the memory. At point
once changes are needs to be done in page content, they
are mirrored to the memory residing virtual DOM first;
then that a diff() algorithm appearance at the 2 DOM i.e.,
the virtual DOM and also the browser DOM then changes
done square measure mirrored to the program DOM itself,
instead of refreshing the complete DOM. This offers a
super boost to the appliance essentially once an oversized
data changes are to be made.
3.2 One-Way data flow
React JS is constructed in such a way that data flow i.e.,
downstream is allowed and supported. Unidirectional flow
ensures that data flows in a single direction throughout
the application which provides a lot of control between
the states and models in an application. Unidirectional
flow conjointly ensures that design of application is a
smaller amount complicated and comprehensible. It
doesn't create any cascading updates within the view part.
3.3 React Components
Components are tiny UI (User Interface) elements that
offer data to look at which might conjointly change over
the period of time. These reusable components are bound
along to create a whole UI for the application. Components
let developers split UI in multiple parts and to style and
build UI in only manner. They're like JavaScript functions;
they perform identical tasks but in numerous
environments and approaches. They take input referred to
as props and return React elements (what one can see on
the screen).
3.4 JSX Syntax
It stands for JavaScript XML. It's a syntax extension in
JavaScript. JSX is usually recommended to be used with
React JS to style and build programs. JSX is quicker, safer
and easier since, JSX ASCII text file is compiled to
JavaScript. It shows a really optimized result. Scrutiny to
the equivalent code written in JavaScript, the standard of
application is much higher once developed with JSX.
4. REACT ADVANTAGES AND DISADVANTAGES
Some explanations for selecting react as the frontend
development as follows-
• simple to find out as we are able to quickly build things.
• It helps us build an expensive interface as a poorly trying
interface wouldn’t look smart.
• Quicker development and may be accustomed to earn
cash quicker too. Productivity is a vital issue and React is
certainly breathing in this case moreover.
• It's sure by nice firms and everyone these firms uses
React to create their websites. One in every of the well-
known firms is Netflix itself.
• It's got sturdy community support and also the variety of
downloads exceeds Angular.
• It's one in every of the trending topics and everybody is
keen on the event too.
Some disadvantages together with all blessings' area
unit as follows-
• Need to import libraries for state and model as React
doesn’t implement MVC and is also not having a whole
structure
• React moves off from class-based modules and may be
an obstacle for Object Oriented Programming and
developers might not be relaxed thereupon.
5. HOW DOES REACT WORK?
Everything in React is associated with an “element” or a
“component”. Elements are created by victimization, one
thing referred to as “JSX” or syntactical JavaScript. It's
essentially like declaring HTML content as constants,
variables, functions, etc. JSX isn’t completely necessary
however but is usually most popular while coding a React
app. Components are the building blocks of any React app.

They will have many elements among them that are
programmed to interact and behave during a certain
manner.
Every React part incorporates a lifecycle that you simply
will track and alter throughout the course of its 3 phases:
1. Mounting
2. Updating
3. Unmounting
The term “mounting” refers to the method of inserting
elements into the Document Object Model (DOM). DOM
is largely a typical way data is diagrammatic and accessed
on a web page. You'll think about it as a tree of HTML/XML
objects that you'll somewhat visualize in your developer
tools for any website. Whenever a web page is loaded the
browser creates this DOM with all the content associated
with that page. Victimization JavaScript, you'll manipulate
and modify these contents. So, once a React app is loaded,
the primary step is mounting wherever the components
are placed into the DOM. React is ready to try and do all
this by making a virtual DOM that is then wont to update
and adjust with the important DOM.
When mounting a component, React calls the subsequent
four inbuilt functions in this order:
1. constructor()
The first step wherever initial state values are set.
2. getDerivedStateFromProps()
The getDerivedStateFromProps method is called right
before rendering the elements in the DOM.
3. render()
This methodology outputs the Hypertext mark-up
language to the DOM.
4. componentDidMount()
The componentDidMount() method is called after the
component is rendered.
The render() methodology is important and can be known
at least times; the others are elective and can be invoked
only if they are defined.
When a component is updated, the lifecycle moves on to
future step. Once the state or props (shorthand for
properties) of a component change, the component is
alleged to be updated. To do the equivalent, React calls the
subsequent 5 inherent ways during this order:
1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()
Each of those ways helps verify and update the state
changes within the component and re-render them. Within
the next part of the life cycle, the component gets off from
the DOM or unmounted as React likes to call it. Once a
component is unmounted, only one inbuilt method in
React is called:
1. componentWillUnmount()
The developers will write the logic in these methods to
change the behavior of the React app as and after they are
called.
6. COMPARISON
Making comparisons between Angular and React
nowadays is a popular topic in the tech community.
However, Angular.JS, React.JS, Vue.JS, Ember.JS,
Backbone.JS and several
As a matter of fact, React Native has become the selection
of forty percent of the developers worldwide. It's evident
from the graph below by Statista that React Native isn't
simply existing however thriving within the market.
Web technologies are the foremost well-liked web
technologies. Amongst them Angular and React are widely
adopted and advanced JavaScript technologies getting
used to make single-page applications (SPAs). Below table
shows a comparison between AngularJS framework and
React.JS library.

As shown in Table, there are some fundamental
differences between AngularJS and React in terms of data
binding, dependency handling, DOM manipulation and
languages they use. But the biggest difference is that
Angular JS is a framework whereas ReactJS is a library.
Though, both of them are used for front-end development.
Many businesses, news, travel, social networking
companies in the USA, the UK, Asia, France, Germany,
Canada and many other countries are using both React
and Angular. Angular is very popular among the
developers as it is a complete framework which comes
with MVC (Model-View-Controller) while React is a
library, not a framework.
7. CONCLUSION
React.Js framework can be used for building beautiful User
Interfaces by implementing some core JavaScript features.
It is easy to use and implement as it provides us with a
mark-up syntax that is closely related to HTML [8]. Virtual
DOM is the most important feature which prevents
reloading of a page and increases the overall efficiency of
our application. As our application is built over JavaScript,
it also provides us with a package manager called NPM,
which provides an easier way of installing external
dependencies. To alter the lifecycle of our class
components, React provides us with lifecycle methods.
React Hooks also provides us with the same functionalities
but is built for our functional components. React is one of
the most widely used frameworks that is being used by
many developers for building applications or interfaces.
Thus the demand for this framework and its
functionalities will definitely grow in the near future.
React is that library assisting companies to achieve their
goals, fortifying its relevance in the market for a longer
time to come.
REFERENCES
 “React JS: An Open-Source JavaScript Library for
Front-end Development” by Naimul Islam Naim.
 https://reactjs.org/tutorial/tutorial.html
 https://en.wikipedia.org/wiki/React_(JavaScript
_library)
 ReactJS.org,’ ReactJS official'. [Online].
 Krunal Shah, “Top 14 React Libraries you must
try in 2020”
 Wikipedia.org, 'React (JavaScript Library)'.
[Online]. Available:
https://en.wikipedia.org/wiki/React_(JavaScript
_library). [Accessed: Feb- 2018]
 COMPARATIVE ANALYSIS OF ANGULARJS AND
REACTJS Anurag Kumar and Ravi Kumar Singh
International Journal of Latest Trends in
Engineering and Technology Vol.(7)Issue(4),
pp.225-227 DOI:
http://dx.doi.org/10.21172/1.74.030 e-
ISSN:2278-621X
 https://www.simform.com/why-use-react/
 https://www.javatpoint.com/react- features
 Prof. B. A. Khivsara, Umesh Khivsara, “Design
and Implementation of Single Page Application
Based on AngularJS,” 6th International
Conference on Recent Trends in Engineering &
Technology (ICRTET - 2018).

FRONTEND DEVELOPMENT WITH REACT.JS

Recommended

More Related Content

Similar to FRONTEND DEVELOPMENT WITH REACT.JS (20)

More from IRJET Journal (20)

Recently uploaded (20)

FRONTEND DEVELOPMENT WITH REACT.JS