Volume 5, Issue 11, November – 2020 International Journal of Innovative Science and Research Technology

ISSN No:-2456-2165

ReactJS: A Modern Web Development Framework

Prateek Rawat1, Archana N. Mahajan 2
1
Student, Department of Computer Science and Engineering, Institute of Technology and Management Universe, Vadodara,
Gujarat
2
Assistant Professor, Department of Computer Science and Engineering, Institute of Technology and Management Universe,
Vadodara, Gujarat

Abstract:- ReactJS is an open-source library that is engineers, yet this is simply the best in making a site as code
utilized for building up the UIs explicitly for single-page is straightforward with all parts and different things. What
applications. ReactJS empower software engineers to makes react so beneficial for building UIs is that data is either
make immense web-application that can use data and can gotten from a section's parent component, or it's contained in
change after some time without reloading the page. Along the portion itself.
these lines React has a savvy diffing calculation that it
uses to just recover in its DOM hub what should be The purpose of the paper is to carry out in-depth
recovered while it keeps all that else with no guarantees. research of the ReactJS library based on JavaScript. The
The utilization of reusable parts gives a simple method of fundamental concepts, characteristics, features, development
building our application. The brilliant thought of React processes, architecture, and some dependencies will be
moreover makes arranging UI reliable and takes a huge covered in this research paper. The aim is to supply a solid
weight off from programmers so they could focus on more understanding of the ReactJS library.
huge limits and business reasoning. Respond likewise
doesn't force a particular method to play out a specific II. CREATING A REACT APPLICATION
undertaking. It gives a rich arrangement of libraries from
which clients can choose to play out a specific React can be installed [1] on various platforms like
undertaking. Lifecycle strategies and React Hooks are MAC OS, MS WINDOW, or UNIX. Before installing React,
other significant highlights that handle the arrangement you need to have NODE and NPM preinstalled on your
of occasions that gets called during the lifecycle of a computer. The two ways using which you can include react in
segment. This paper presents different highlights of the your application are mentioned below –
ReactJS system alongside how these highlights are utilized
in building applications. It additionally covers some most A. Automatic installation of ReactJS:
generally utilized conditions, their utilization, and how The programmed process should be utilized when we
they can be introduced in our application. need to make another application in React.
Instructions -
Keywords:- Components, JSX, Lifecycle methods, ReactJS, npm install -g create-react-app
React Hooks, Routers, Virtual DOM. create-react-app my-app
cd my-app
I. INTRODUCTION npm start

React [11] is a well-known open-source front-end B. Manual installation of ReactJS:

JavaScript library created by Facebook. React is wide in style The manual establishment cycle should be utilized when
among developer communities attributable to its simplicity we need to utilize react in our current application.
and straightforward however effective developing process. It Requirements: Webpack-- It is a bundler, with the assistance
is urging the formation of reusable User Interface parts, of this we can compose measured code and it makes a heap of
which exhibit information that progresses after some time. It the apparent multitude of modules, which expands the
expeditiously updates through rendering the precious parts to exhibition of our application. Babel-- It is a compiler that
the read of every state and makes the information changes assists with running present-day JavaScript (Like ES6) code in
within the application. the more seasoned program. In the wake of introducing
Webpack and Babel, we need to install the react and react-
ReactJS came and it altered the way web applications dom module.
are created. In ReactJS, each component deals with its state
and makes them to the UIs. With this idea of components Instructions -
rather than layouts in JavaScript [9], a lot of information can npm install react react-dom –save
without much of a stretch be passed to the application and After these installations, we can make components and render
along these lines helps in keeping the state out of the DOM. them also.
In any case, React isn't an MVC structure as Angular seems
to be. It is served as a chief library. That is, ReactJS does
exclude state administrators, switches, and API directors in
the central library. It might resemble an impediment for React

IJISRT20NOV485 www.ijisrt.com 698

Volume 5, Issue 11, November – 2020 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
III. FEATURES its productivity to make DOM hubs, refreshing existing DOM,
or pulverizing the past one and making the upgraded one. This
C. Declarative gives a tremendous lift to the show of use, fundamentally
React makes an intelligent and dynamic UI for sites and when countless data changes are to be made.
portable applications. Make basic perspectives for each state
in your application, and React will effectively refresh and H. Performance
deliver the perfect parts when your information changes. ReactJS is known to be an incredible performer [2]. This
Definitive perspectives make your code more discernible and component improves it much than different structures out
simpler to debug. there today. The purpose of this is that it deals with a virtual
DOM. The DOM [10] is a cross-stage and programming API
D. Short and Easy Learning Curve that manages HTML, XML, or XHTML. The DOM exists all
The straightforward and non-complex nature of ReactJS together in memory. Because of this, when we make a
enables one to quickly get settled with the structure. React is component, we didn't compose it straightforwardly to the
involved in numerous solid highlights. Comprehensibility is DOM. All things being equal, we are composing virtual parts
probably the best quality of React. It is effectively that will transform into the DOM prompting smoother and
comprehensible even to the individuals who are new to it. quicker execution.
While different systems require learning numerous ideas about
the structure itself, disregarding the language basics, React IV. NPM PACKAGES FOR REACT
does unquestionably the inverse. So starting levels of ability in
the structure can without a doubt be refined without any NPM (Node Package Manager) [17] is a package
deterrents or complexities. manager for node. It assists with introducing different
packages and settling their different conditions. Utilizing npm
E. One-way Data Binding packages in your venture can diminish the measure of time
ReactJS is featured with one-way unidirectional data expected to accomplish the errand. The absolute most broadly
flow between the states and layers in an application [2]. This utilized npm bundles are referenced beneath –
means data can flow in a single direction between the
application states and layers. On the other hand, in two-way I. React Router
data binding like Angular [6], if a model is changed, the view It is a tool that permits you to deal with routes in a web
will also change and vice versa. The advantages of single application, utilizing dynamic directing [16]. Dynamic
direction information restricting give you better control all routing happens as the application is rendering on your
through the application. In the event that the information machine, dissimilar to the old directing design where the
stream is toward another path, at that point, it requires extra directing is taken care of in an arrangement outside of a
highlights. It is on the grounds that components should be running application. It gives diverse steering components as
unchanging and the information inside them can't be changed. indicated by the requirements of the application and stage.
Comparable style of information restricting is given by Flux in
ReactJS, which is an option in contrast to the normal model Installation – npm install –save react-router-dom
view controller (MVC).
J. Create React App
F. JSX It is a CLI (Command Line Interface) tool that doesn’t
JSX can best be considered as an increased language require any building configuration [15]. So it gives ReactJS
structure that eagerly takes after HTML [8]. It is basically engineers an extraordinary head start when dealing with
similar to a blend of JavaScript and XML. JSX makes making React ventures as it empowers the designers to produce their
React sections, the structure squares of React UIs. It lets you own standards. The instrument collects the parts and records
determine the DOM components before the components expected to construct, test, and dispatch an application.
directly within JavaScript records. This implies the rationale Thusly, it radically lessens the time and exertion put
behind the parts and the visuals are across the board place. resources into the advancement cycle. One can start the
This is such a good thought when different structures are application building measure by essentially running a solitary
assuming lines to position them. JSX is without a doubt order and no more complexities are involved.
extraordinary compared to other ReactJS highlights.
Installation – npm install create-react-app –g
G. Virtual DOM
The special way of composing code in React has been K. React Redux
made conceivable as a result of Virtual DOM(Virtual Redux [15] is a free library that is utilized with any UI
Document Object Model) [10]. Prior to the appearance of layer or system, including the most striking React, Angular,
Virtual DOM in JavaScript structures, it was wasteful to Vue, Ember, and vanilla JS structures. Notwithstanding the
perform DOM activities, for the presentation as well as for the way that Redux and React are consistently used together, they
designers. The working of virtual DOM is fundamental. At the are independent of each other from different perspectives.
point when a component is delivered once more, React Being the power Redux UI limiting library for React, if you
replaces it with its past portrayal and updates the genuine hubs are using Redux and React together, you should similarly use
of the DOM which have changed. This cycle of supplanting is React-Redux to tie these two libraries. React Redux executes
called compromise. Accordingly, in this cycle, React chooses numerous presentation enhancements inside so your

IJISRT20NOV485 www.ijisrt.com 699

Volume 5, Issue 11, November – 2020 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
component just re-renders when it needs to. The React-Redux V. LITERATURE SURVEY
interface work produces a "container" that functions as a
wrapper component and is capable to deal with the way ReactJS is a popular open-source JavaScript library and
toward cooperating with the store for you. That way, your is used as a base in the development of single-page or mobile
components can deal with different undertakings, regardless of applications. However, React is simply involved with
whether it be gathering other information, or simply showing a rendering knowledge to the DOM, so making React
piece of the UI. Additionally, interface abstracts away the applications sometimes need the employment of extra
subject of which store is being utilized, making your libraries for state management and routing. Flux [5] is
components more reusable. another sort of engineering that Facebook utilizes when it
works with React. React just works with the View layer,
Installation – npm install –save react-redux which implies you have just the V in the MVC (Model-View-
Controller) design [2]. Flux is the design answerable for
L. Material UI making information layers in JavaScript applications and
Material Design [7] is a language of plan that was building customer side web applications. Flux supplements
presented by Google in 2014 for making complex, responsive, Reacts Composable view components through its
and portable applications. To invoke material design in a unidirectional information stream. React gives you the layout
React web-application, we have to install the Material UI language and a couple of function hooks to deliver HTML
library in the application. This will provide us with a bunch of [9]. You can likewise say that Flux is all the more an example
parts that we can use in building our application. We can than a framework and it has four fundamental components:
likewise customize the subject and components of the Material Dispatcher, Stores, Views (React parts), and Action. Flux
UI library. The elements of Material UI are autonomous in follows the idea of a unidirectional information stream
nature and solely implement the design they have to display. making it a lot simpler to focus in on where the mistake lies.
This leads to performance enhancements in the applications. The data experiences a severe pipeline through your
In addition to that, it has very strong community support. application. React and Flux are the most well-known systems
that follow the idea of the unidirectional data stream.
Installation – npm install –save @material-ui/core
Lifecycle Methods [4] - Each part in React encounters a
M. React Bootstrap lifecycle of occasions. Along these lines, React Lifecycle
React Bootstrap [16] is a Bootstrap library-based UI systems are the plan of exercises, which happen between the
toolbox. It gives React Developers more power over reusing start and end of a React component. Each component in react
and coordinating UI segments. The library is natural to utilize experiences a lifecycle of actions—mounting, update, and
in light of the Bootstrap topics and template. Subsequently, unmount. The render() technique helps with giving fragments
designers can code rapidly and all the more profitably with the to the UI, during the reviving and mounting of your part. In
assistance of reusable coding strategies. With the assistance of case there is nothing to convey for the section, a render() will
the Bootstrap template, react-bootstrap works consummately reestablish an invalid. The componentDidMount() is another
with the entirety of the bootstrap subjects which we like to lifecycle method that is viewed as when a section is mounted
utilize. The plan and the capacity of each component are and arranged. If you need data from a far endpoint, by then,
constrained by the React part. Remembering accommodations, componentDidMount() is used to start API Calls. Reviving of
every component is executed. DOM in light of prop or state changes is the fundamental
circumstance where the componentDidUpdate() lifecycle
Installation – npm install –save react-bootstrap bootstrap method is utilized. Before the component is unmounted and
hurt, componentWillUnmount() strategy must be called, to
N. Axios dispose of any exercises. Changing the state of the
Axios [3] [13] is a library that causes us to make HTTP component is unthinkable in this technique. Disposing of
requests to outside assets. In our React applications, we timers, stores, and stopping API calls are the activities drawn
regularly need to recover information from outside APIs so it in with this technique. Right when you would favor not to
tends to be shown on our website pages. Axios is intended to React to convey your prop or state changes,
deal with HTTP requests and responses. It's used more often shouldComponentUpdate() lifecycle method can be used. In
than fetch because it has a larger set of features and it this technique, the component of course delivers once more.
supports older browsers. Axios manages react utilizing This strategy is utilized uncommon and uniquely for explicit
Promises, so it's smoothed out and simple to use in our code. execution changes. The getSnapshotBeforeUpdate() is
Axios utilizes techniques like get() and post() that perform another lifecycle technique introduced starting late, that can
http GET and POST demands for recovering or making be used instead of componentWillUpdate().This procedure is
assets. called preceding invigorating the DOM. The restored, a
motivator from getSnapshotBeforeUpdate() is utilized to
Installation – npm install ---save axios componentDidUpdate(). This system is rarely used or not
used.

React Hooks [12] – React Hooks came out as a part of

the newly introduced version of React 16.8. Before then, the
only way to add states to the component was by using classes.

IJISRT20NOV485 www.ijisrt.com 700

Volume 5, Issue 11, November – 2020 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
But with the transition from the class to functional sharing non-visual logic and from that limitation came other
components, hooks allowed us to use state and other features patterns like HOCs (Higher Order Components) or Render
within the functional components. Some of the foremost props to solve a problem. The ability to create custom hooks
normally used hooks are useState, useEffect, useContext, allows us to extract stateful logic to a simple JavaScript
useReducer, useCallback, useRef, and useMemo. Before function.
hooks, React did not have a basic way of extracting and

Table I: Literature Summary

Author Title Purpose
Siddegowda C J ,Gitu mani React framework (creating a web Information about the installation of react and the
Borah, Chandru K. [1] application with react native) [1] future of React as a framework is discussed in this
paper.
Archana Bhalla, Shivangi Garg, Present day web-development using Provided information about how the React
Priyangi Singh. [2] ReactJS [2] framework can be used in building modern web
applications.
Ritwik C and Anitha Sandee. [3] React.js and front end development The usage of the React framework as a front end
[3] technology is briefly introduced and explained in this
paper.
Minati Biswal. [4] React Lifecycle Methods [4] This article provides us with information about every
lifecycle methods that can be used in our React
application.
Naimul Islam Naim. [5] Metropolia University of Applied This thesis is written to give detailed information
Sciences [5] about ReactJS architecture and its working.
Prof. B.A.Khivsara, Umesh Design and Implementation of Single In this paper, Healthy information includes a large
Khivsara. [6] Page Application Based on amount of continuity data, which will cause code
AngularJS [6] redundancy, a long development cycle, etc.
Prakash Patel [7] A Guide to Material Design, a It briefly describes the principle concepts in using a
Modern Software Design Language Material Design language.
[7]
Ch Rajesh, K S V Krishna Research on HTML5 in Web This paper discusses the new features and
Srikanth. [8] Development [8] functionalities of HTML5.
Dave Carlsson, David Ko. [9] System and methods for JavaScript The disclosure describes exemplary methods and
based HTML website layouts [9] systems for building search-friendly websites from
templates on a browser-based
Giuseppe Psaila [10] Virtual DOM: An Efficient Virtual This conference paper discusses the importance of
Memory Representation for Large Virtual DOM and how it reduces the consumption of
XML Documents [10] memory for large documents.
Ohans Emmanuel. [17] React Hooks Documentation (visual This documentation will give you deep information
& easy-to-read design) [17] about all types of hooks that can be encountered
while working in a React application.

VI. CONCLUSION their goals, fortifying its relevance in the market for a longer
time to come.
Reactjs framework can be used for building beautiful
User Interfaces by implementing some core JavaScript REFERENCES
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 [1]. Siddegowda C J, Gitu mani Borah, Chandru KA, “React
DOM is the most important features which prevents reloading framework (creating a web application with react
of a page and increases the overall efficiency of our native),” International Journal of Recent Trends in
application. As our application is built over JavaScript, it also Engineering & Research (IJRTER) vol. 04, Issue 03,
provides us with a package manager called NPM, which March 2018.
provides an easier way of installing external dependencies. To [2]. Archana Bhalla, Shivangi Garg, Priyangi Singh,
alter the lifecycle of our class components, React provides us “Present day web-development using reactjs,” Volume:
with lifecycle methods. React Hooks also provides us with the 07 Issue: 05, May 2020
same functionalities but is build for our functional [3]. Ritwik C and Anitha Sandeep, “React.js and front end
components. React is one of the most widely used frameworks development,” IRJET Volume: 07 Issue: 04, Apr 2020.
that is being used by many developers for building [4]. Minati Biswal, “React lifecycle methods,” Researchgate
applications or interfaces. Thus the demand for this framework Article, December 2019.
and its functionalities will definitely grow in the near future. [5]. Naimul Islam Naim, “ReactJS: An Open Source
React is that library assisting companies achieve to achieve JavaScript Library for Front-end Development,”.

IJISRT20NOV485 www.ijisrt.com 701

Volume 5, Issue 11, November – 2020 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
[6]. 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).
[7]. Prakash Patel, “A Guide to Material Design, a Modern
Software Design Language,”, Research Gate.
[8]. Ch Rajesh, K S V Krishna Srikanth, “Research on
HTML5 in Web Development”, International Journal of
Computer Science and Information Technologies, Vol.
5 (2), 2014, 2408-2412.
[9]. Dave Carlsson, David Ko, “System and methods for
JavaScript based HTML website layouts,” US
8,959.427 B1.
[10]. Giuseppe Psaila, “Virtual DOM: An Efficient Virtual
Memory Representation for Large XML Documents”.
[11]. Wikipedia.org,'React (JavaScript Library)'.Accessible:
https://en.wikipedia.org/wiki/React_(JavaScript_lib
rary).
[12]. ReactJS.org,’ ReactJS official'. [Online].
[13]. How to use axios with React(2018).
[14]. React-redux.js.org, “React Redux – Official React
binding for React”.
[15]. Krunal Shah, “Top 14 React Libraries you must try in
2020”.
[16]. https://www.npmjs.com/, “NPM official site”.
[17]. Ohans Emmanauel, “React documentation (visual &
easy-to-read design.

IJISRT20NOV485 www.ijisrt.com 702