International Journal of Scientific Research in Engineering and Management (IJSREM)

Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

ReactJS: A Comprehensive Analysis of its features, Performance, and

Suitability for Modern Web Development
Devanshi Bhatt1, Kunal Parekh2, Mehul Minat3, Bansari Patel4
1
Devanshi Bhatt, Computer Science & Engineering, Charotar University of Science & Technology
2
Kunal Parekh, Computer Science & Engineering, Charotar University of Science & Technology
3
Mehul Minat, Computer Science & Engineering, Charotar University of Science & Technology
4
Bansari Patel, Computer Science & Engineering, Charotar University of Science & Technology

Abstract - ReactJS is an open-source technology used to until May 2013. Giving users the best rendering performance is
create UIs specifically for single-page apps. Software React JS's main goal. The emphasis on distinct elements is what
gives it its power. Developers find it simple to create sophisticated
developers may create large-scale web applications with
user interfaces when they use reusable components. Model-View-
ReactJS that can consume data and alter over time without Controller (M-V-C) model's View component is integrated with
refreshing the page. React utilizes a clever diffing computation React JS. In order to make data binding simpler than before,
in this manner to only recover in its DOM hub the data that React JS introduces a one-way data flow. React employs a virtual
needs to be retrieved while keeping the rest with no DOM and provides simpler programming with quicker execution.
assurances. Our application may be built easily thanks to the To assist in the development of website user interfaces, the
use of reusable components. Reacts amazing design also React JS JavaScript library was developed. React JS JavaScript
makes UI arrangements predictable and relieves programmers framework was developed by Facebook software developer
Jordan Walke in 2011, but it wasn't made publicly available until
of a significant burden, allowing them to concentrate on bigger May 2013. The fundamental purpose of React JS is to provide
goals and business thinking. Respond doesn't compel the use users with the highest rendering performance. What gives it its
of a specific way to carry out a given task, either. Customers potency is the concentration on distinctive components. When
may pick from a wide range of libraries to play out a certain using reusable components, developers find it easy to build
task thanks to this service. The ordering of events that are complex user interfaces. React JS is connected with the Model-
View-Controller (M-V-C) model's View component. React JS
called during a segment's lifespan is handled by lifecycle adds a one-way data flow to make data binding easier than it was
strategies and react hooks, two additional important features. previously. React makes use of a virtual DOM and offers easier
The ReactJS system's many strengths are discussed in this programming with faster execution.
article, along with how these strengths are applied when
creating applications. It also goes through a few of the terms
that are used the most frequently, how to use them, and how to FEATURES
incorporate them into our program.
A. Lightweight DOM for Better Performance
Keywords - ReactJS, Components, Architecture, Lightweight DOM, One may rapidly become accustomed to the structure thanks
Virtual DOM, JSX, Performance, One Way Data Flow, Pro’s and to ReactJS's simple and uncomplicated nature. Numerous strong
Con’s highlights include React. The finest aspect of React is certainly its
readability. Even those who are unfamiliar with it may understand
1. INTRODUCTION it efficiently React accomplishes definitely the opposite of other
systems, which obviates the need to understand the fundamentals
Angular was the lone and leading challenger in the JS of the language while requiring extensive knowledge of the
framework market before React entered the scene. Although structure itself. Therefore, basic levels of skill inside the system
Angular was a comprehensive and proper framework, may unquestionably be improved without any obstacles or
developers found it to be incredibly challenging because it complications.
required a lot of writing. Even seasoned JavaScript
programmers struggled with the coding process and looked for B. JSX
alternatives to their problems. It was never the best practice HTML and JavaScript are combined to create JSX. HTML
to create JS applications with AngularJS. It has additional elements allow for the insertion of JavaScript objects. Because
features that the majority of developers did not need. browsers do not support JSX, the code is trans-compiled by the
React JS is a JavaScript library that is free to use and Babel translator into JavaScript code. Codes become clear and
was created to help create user interfaces for websites. simple thanks to JSX. Knowing HTML and JavaScript makes
Jordan Walke, a software engineer at Facebook, created learning it simple.
the open-source React JS JavaScript framework in 2011,
although it wasn't made available to the general public

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 1

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

C. Performance library has a Chrome addon called React Developer Tool.

As we previously explained, react updates just the E. Backed by a large development community.
updated portions of the DOM using virtual DOM. This
thereby speeds up the DOM. Because DOM runs in memory, One of the top firms using React JS in their online apps
we can design distinct components, which speeds up DOM is Facebook, which created and published the framework.
execution. Other notable users of the framework include Instagram,
Reddit, and Netflix.
D. One-Way Data Flow
As the name suggests, one-way data binding is a one-
direction flow. In the react programming language, the data 2. RESULTS / LITERATURE REVIEW
is transferred from top to bottom, or from parent components
to child components. The child component's properties
(props) cannot return data to its parent component, but they A. Direct 2 Whatsapp
can communicate with the parent components to change the
states in accordance with the inputs given. This is how one-
way data binding operates. This keeps things quick and
modular.
E. Virtual DOM
The document object model is commonly referred to as
DOM. Due to the fact that it separates into modules and runs
the code, it is the most crucial component of the web.
JavaScript Frameworks typically update the entire DOM all Fig 1: Direct 2 WhatsApp
at once, which slows down the online application. However,
react employs virtual DOM, a perfect replica of actual DOM. About the Project: Using our own React and CSS
The entire virtual DOM is updated initially whenever there is components, we completely rebuilt this app from the ground
a change to the web application in order to determine the up. This program was created in response to a real-world
difference between the real DOM and virtual DOM. When it issue, which is that users must first store contacts before they
does, DOM updates only the portion that has recently can send messages over WhatsApp. Therefore, the user of
changed, leaving the rest unchanged. this app may immediately input the number, and transmit
app will jump to WhatsApp to that contact accordingly. It
also has a dark mode that the user can toggle on or off and
APPLICATION OF REACTJS even store to local storage, all of which enable the user to use
this program away from home.
A. Creation of dynamic application with ease
Repository Link: https://parekhkunal.github.io/d2Wp
Developers may more easily construct dynamic web apps with
React JS since it requires less coding and has greater B. Notes
capabilities.
B. Open-sourced library
React JS is the fastest-emerging JS library among the
communities and organizations of front-end developers, and
one of the reasons for this is that it is a JavaScript open-
sourced library.
C. Use of reusable components
Components are the core of React JS. Any React JS Fig 2: Notes
application relies heavily on its components. Application
development times might be sped up by the presence of About the Project: This app is built from scratch
several reusable components. writing our own CSS and react components. We have
added cool features like adding a character count when the
user types, we also added a search bar that lets the user
D. Easy Debugging tool search for a note we will add dark mode they can toggle on
Facebook published a Chrome addon to help with or off and even save to local storage so that user can use
react application debugging, which makes the this app in real life.
process quicker overall. The open-source JavaScript Repository Link: https:/parekhkunal.github.io/Notes

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 2

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

C. Cheat Chat (Web Chat App) applications - the client application which runs on the user's
mobile and the server application which runs on any pc on the
network. To start chatting our clients should get connected to a
server where they can do Group and private chatting. Client
Server Architecture has been implemented in this project.
Tools Used: Postman, MongoDB Cloud DB, Heroku, VM
on Azure, Nginx Server
Technology: MERN (MongoDB, Express, React, NodeJS),
Bootstrap, ChakraUI
Live URL: https://mern-cheat-chat.herokuapp.com/
Fig 3: Cheat Chat App

About Project: The project is an example of a web chat app. The

main purpose of this project is to provide multi-user chatting
functionality through the network/cloud. It is made up of

Year Author Title Paper Overview

2022 Iida Kainu Optimization in ReactJs This study explores the strategies,
approaches, and resources available in the
React.js ecosystem for enhancing online
application performance.
2021 Anal Roy React Js for web The objective of this paper was to create and
developer study various technologies created by various
open-source groups.
2021 Vijaykumar Pawara, Travel booking system The aim behind our system is to provide a
Poonam Potrajeb, Sunny using react.js perfect travel framework in which clients may
Paththarwalac, Himanshu book their rooms according to their budget
Vermad, Akshay Yadave utilizing a system created using the React
framework.
2021 Kowalczyk, Joanna Analysis of React.js library The article provides a description of the
and its popularity React.js library, along with an analysis of its
key ideas, syntax, and assets. The history of
web development is considered,
demonstrating the areas where React.js is
most useful.
2020 Archana Bhalla, Shivangi Present Day Web Application The fundamental introduction, DOM, JSX,
Garg, Priyangi Singh with ReactJs one-way date flow, etc. are provided in this
work.

2020 Mohit Thakkar Introducing React.js But there is a much more effective method to
begin a React project. To get started, we'll
utilize the react node module "create- react-
app."

2019 Stuart Boaler ReactJS a Viable Career The conclusion is that ReactJS will continue
Option? to play a significant role in the market for the
foreseeable future due to its cross-platform
development capabilities and ease of use.

2019 Hung Thanh Lay Developing a Web Because React is open-source, there are no
Application with ReactJS restrictions on its uses. As stated on Reacts
home page, react makes it simple to

Table I: Literature Summary

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 3

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

3. METHODS

A. Installation

On a variety of operating systems, including Macintosh, Manager, Business Hirer don’t have tough time to find
Windows, Unix, etc., React JS may be installed. Any React JS
application must be developed on a platform like Node JS & developer to get their work done. As mentioned, react is an
NPM. open-source library, improvements are made consistently by
the community it is backed by, so developers need to stay up-
Installing Node JS and the NPM package manager is possible to-date on the latest improvements.
using the following link: https://nodejs.org/en/download/.
B. Virtual Dom
The following are a few steps to install and develop a React Real or standard DOM (Document Object Model)
application, taking into account the most recent version of React constructs have the downside of rewriting the entire DOM tree
JS, 17.0.2, which was published on March 22, 2021: when they process modifications. DOM trees on trendy,
a. Launch the command prompt to install React. npm install interactive websites and applications are dense and
create-react-app is the command we use. complicated. Standard DOM must rewrite the entire page
whenever inputs or queries are made, which in turn slow
b. To build a ReactJS project, use the npx create-react-app down performance, use up memory and also count to new
command (application name here) work bandwidth cycle for resources.
c. Lastly, we use the npm start command to start the project. The virtual DOM operates much more quickly, is
The program is executed at the default server, substantially more productive, and eventually results in a
http://localhost:3000, by the package manager NPM. superior User Interface. A virtual DOM just updates the
element or component that is being changed, as opposed to
rewriting the complete DOM tree each time a user makes a
4. RELATED WORK modification. Let's say, for reference, that your checklist
contains ten items. Once one item on the list is checked, a
Analyzing all the Framework real DOM will rewrite and re-render the entire ten-item list.
Instead of rewriting the entire list, a virtual DOM simply
Analyzed framework changes the one item that was checked and update the state
of that component only.
80.00%
You can see how a virtual DOM construct would be far
60.00% more effective at producing a high-performing User
Interface than standard DOM given that interactive websites
are significantly more sophisticated than basic lists.
40.00%
Angular/Ang…

ReactJS's virtual DOM is primarily responsible for this

Laravel
Django
Flask
React.js

jQuery
Drupal
Vue.js

ASP.NET

Ruby on Rails
Express

JavaScript framework's ability to build fast and responsive

Spring

user interfaces.
C. Reusable Component
Writing and maintain large scale projects is time -
Fig 3: Analyzed framework consuming as well as tedious task. Because modifications to
one code component would affect all copies of that
Keep your text and graphic files separate until after the text has component, developers have historically been unable to
been formatted and styled. Do not use hard tabs, and limit use of reuse code components effectively.
hard returns to only one return at the end of a paragraph. Do not
The advantages of design reuse are not always relevant
add any kind of pagination anywhere in the paper. Do not number
to programming and web development projects. A
text heads-the template will do that for you.
component's copy elsewhere may be impacted by minor
Pro’s & Con’s modifications made to one instance. To overcome this
ReactJS isolates all components. This in turn updates or
A. Easy to Learn modifies to one instance of a component and don’t affect all
ReactJS is a JavaScript library backed by Facebook. It is other instances of that component. React enables developers
released as an open source library, and being open source, any to efficiently reuse design components, saving them time
developer can create training, tutorials for it which are helpful to and improving the accuracy of their code and hence making
other new developer who ever making their learning curve easier. them more productive.
Developer who are well versed with JavaScript and have used
any of their frame work / library they usually get grip over React
in few days as compared to a complete beginner Since it is open
source, more community is engaged with it, supply of developers
is sufficient enough. Hence HR
D. One Way Data Flow

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 4

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

JavaScript frameworks have multi-directional data The key to developing a seamless yet adaptable workflow
flows, which means that changes in one element can that can change as you upgrade, extend, and modify your
affect the data of another. This issue can lead to unstable code is to combine the appropriate testing framework (like
code. One of the main reasons why this issue is Jest, etc.) with the appropriate assertion/manipulation
considered a threat is that it can affect the larger parent libraries (like Enzyme, etc.). Additionally, by essentially
element. isolating components from their projects, you raise the bar
for modularity and TDD.
ReactJS makes this issue simpler by associating all data with
downward motion. Changes to the child elements cannot impact H. Ability creating cross-platform products
the parent data in this structural architecture. As a result, This is an important consideration when talking to
developers have better control over complicated and large-scale clients, especially small businesses, who wish to develop
projects and the resulting code is more stable and durable. cross- platform solutions. We can easily build web apps with
E. SEO Friendly React, but we also have React-Native, which allows us to
write code in React with the same syntax as for web. The
For business owners, search ranking is a vital component of changes are to made for mobile specific components only
site creation. In order t attract users and drive business goals the
that too in syntax used in react web app. Because the client
websites need to perform well in organic search results on all only requires React engineers, he saves a lot of money by
major search engines and must have low latency while fetching not having to recruit several different types of developers,
and serving content. Projects that use JavaScript extensively, i.e. Android and iOS.
they face issue of not getting index as search engines face
difficulty in crawling them. And this is major issue brought to Complete SSR/SSG Framework
front by ReactJS helps to solve the issue of heavy JavaScript
website and make them enough readable by Google and other SSR - Server-Side Rendering
search engines. Still for those who have concern about reach and
everything. They Use Google search console to check how google SSG - Server-Side Generator
crawls their website. Light house audits can also give some rough
idea about it. Many technologies in the programming industry are based
While making your web app more discoverable for users on React. Among all of these things, there are frameworks that
around the world requires that you rank your React apps on enable us to create React applications that are either rendered
search consoles like Google. JavaScript pages are not as easily by a server or just produce HTML files using React. Among
indexed by Google and other crawlers as static HTML pages are. all of these things, there are frameworks that enable us to
React supports server-side rendering, which helps crawlers create React applications that are either rendered by a server
because they can easily crawl content and don’t have to wait for all or just produce HTML files using React. Gatsby is an SSG
other JavaScript file dependencies to load. This hence leads to example that makes creating quick and SEO-friendly websites
faster crawling and indexing. with React. Next.js another JS framework using which in
addition to SSG provides facility to generate pages rendered
F. Scope of Testing Code in React by the server, which helps to create dynamic and
The key to utilizing the TDD (Test Driven Development) with SEO-friendly web apps.
React is choosing the appropriate toolset and framework for Con’s
testing, whether you're performing unit testing, integration
testing, or end-to-end testing. Testing React applications is quite A. JSX
simple. al scope It provides a environmental scope where While some developers view the JSX syntax extension to be a
programmers can test and debug their codes using native tools benefit to React, yet there exist developers in who believe it
offered. to be a drawback. The JSX code is too complex and
G. Tools that can be used are challenging for new developers and web designers to
understand.
a) Jest
JSX is a challenge for many beginning developers in learning
b) Enzyme ReactJS. Although some developers may find this to be a
c) Chai-enzyme drawback, it is vital to remember that JSX also has advantages
and helps shield the code from other injections intoit.
d) React-testing-library
The main issue with JSX is how challenging it is. ReactJS's
e) React-hooks-testing-library performance and user interface capabilities are unaffected by
f) Majestic JSX. This drawback is resembling to more of a personal
taste.
g) React-unit
h) Ui-harness
Actually, using Babel for trans-compiling improves code
i) Carte-blanche readability.
j) Unexpected-react Redux-test-recorder B. Learning curve

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 5

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

Although opinions among developers on this matter are Developers can generate their own support papers for
mixed, it is reasonable to conclude that React.js is a ReactJS because it is an open-source framework, however
challenging language to master for React.js beginners. since anybody can produce these resources, you might find
Before employing React in their projects, aspirants who subpar ones that provide little assistance.
wish to learn how to code will need to develop other
coding abilities. As React uses JSX, which requires a Once again, your situation and your perspective on
strong foundational knowledge in HTML and JavaScript. creativity and development will determine this drawback of
In addition to it having good about CSS is also required. React. Does appropriate documentation sometimes fall
behind React's rapid development? Yes. But I tend to think
C. Verbose Code. that progress is good, particularly when it comes to
With React, developers have complete freedom in selecting developing dynamic online and UI experiences. For many of
their method and approach. Despite being primarily viewed as a the queries or problems you could encounter while using
benefit, it can sometimes be a serious restriction. There is no React, you can find user-created support resources.
explicit development roadmap for web apps in React. Due to the
lack of restrictions or rigid guidelines on how to carry out a
specific task, the proficiency of developers will directly affect the 5. ARCHITECTURE
outcome of your React project. It can be challenging to transfer a A. React Virtual DOM
project from one firm to another or switch the development team
if the teams have different perspectives on the same issue. One of React JS's key components is the virtual DOM
(Virtual document object model). It is quite comparable to
D. Based on 3rd party libraries the DOM created by the browser; the only distinction is that
It has both a benefit and a drawback. o official libraries are the latter is kept in memory. When changes to the page's
available to handle typical aspects in frontend applications, such content are required, they are first reflected to the virtual
as routing, http requests, etc., and React is "simply a JS Library." DOM that is stored in memory. A diff () algorithm then
Being free to choose the finest tools for your purposes and being compares the two DOMs, the virtual DOM and the browser
a knowledgeable JS developer give you an advantage. DOM, and any changes are then reflected to the program's
Additionally, the fact that React doesn't come with many basic own DOM rather than having to refresh the entire DOM.
tools is a drawback. You could encounter React versions This simply offers the programmer a huge boost when
conflicts between the latest library version and your React app significant data updates need to be done.
version even if you only utilize the most widely used and popular B. One Way Data flow
libraries (it is mostly about legacy apps).
Data flow, or downstream, is permitted and facilitated by
The third-party libraries that are maintained by single the design of React JS. In an application, unidirectional flow
contributing organization may also need to be updated if you makes sure that data only travels in one way at a time, giving
want to keep your app up to date with the React version. While states and models more control over one another. A less
React has excellent backwards compatibility, some libraries— complicated and more comprehensible application
even those that are extremely well-liked—might undergo architecture is another benefit of unidirectional flow. There
breaking changes. are no cascade modifications or updates made in the view
E. Development Pace section.
ReactJS is always developing and evolving. Depending on who C. React components
you are, you can consider Reacts development velocity as a Small UI (User Interface) pieces known as components
benefit or a drawback. React is continually being enhanced, give the view data that can vary over time. Together, these
according to developers who regard this surge in development as reusable parts form the application's whole user interface
a benefit. This makes their work easier. The developers who (UI). Developers may divide UI into different elements and
view the rapid rate of development as a drawback contend that it create UI in the most efficient way by using components.
is challenging to keep up with because they continually have to Similar to JavaScript functions, they carry out the same
learn how to deal with ReactJS. purpose using several environments and methodologies.
One notable drawback of ReactJS is its rapid development, but it They receive input known as props and then output.
should be emphasized that Reacts core API has become much
more reliable in recent years. Today, most upgrades concern the
library and fresh features. Some developers are uncomfortable D. JSX Syntax
attempting to keep up with new innovations and are not pleased JavaScript XML is what it stands for. In JavaScript, it is
with the rate of change. Even if it's typical to say that React an a- syntax extension. For the creation of user interfaces,
evolves too quickly, it's crucial to remember that new innovations React JS and JSX are suggested pairings. Since the source
enhance the framework and help it function at a higher level. code for JSX is converted to JavaScript, it produces an
extremely efficient output, making JSX quicker, safer, and
F. Documentation simpler. The quality of an application produced with JSX is
The criticisms regarding Reacts development pace are related significantly greater than an equal piece of code written in
to this drawback. Due to the quick development, there may not be JavaScript.
enough instructional resources and documentation to cover the
most recent revisions.

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 6

 International Journal of Scientific Research in Engineering and Management (IJSREM)
Volume: 07 Issue: 09 | September - 2023 SJIF Rating: 8.176 ISSN: 2582-3930

6. CONCLUSION 7. REFERENCES
All three frameworks—Angular, React, and Vue—
[1] Wikipedia.org, 'React (JavaScript Library)'. [Online]. Available:
are actively being developed. They maintain the current https://en.wikipedia.org/wiki/React_(JavaScript_library).
versions while releasing new ones frequently. You can [2] MongoDB.com, MEAN and MERN stacks. [Online]. Available:
utilize any of these frameworks with confidence because https://www.mongodb.com/blog/post/the-modern-application-
of the high level of support that each one currently stackpart-1-introducing-the-mean-stack
enjoys. While Vue is a newer development, it already [3] Quora.com, ‘MEAN VS. MERN'. [Online].
looks to be spreading considerably, in contrast to Available: https://www.quora.com/How-is-MERN-stack-
Angular, which is not growing as swiftly as it formerly compared-to-MEAN- stack
did. Since each project is supported by a fantastic [4] ReactJS.org,’ ReactJS official'. [Online].
community and is continually changing, it is impossible Available: http://www.ReactJs.org.
for us to anticipate which frameworks will be useful in [5] NodeJS.org, ‘NodeJs official'. [Online]. Available: http://nodejs.org.
the long run. It was my intention to clarify the [6] Github.com, ‘React Documentation'. [Online].
Available: https://github.com/facebook/react.
architectural distinctions, analyses the advantages and
[7] Tutorial Point, ‘React Architecture’ [Online].
disadvantages of each framework, and, where Available:
appropriate, compare them in this essay. There are a few https://www.tutorialspoint.com/reactjs/reactjs_architecture.htm
things to take into account before beginning a new [8] Angular.io, Angular Documentation'. [Online].
framework. The first thing to consider when selecting a Available: https://angular.io.
new technology is the experience of your employees. The [9] MongoDB.com, 'MongoDB official'. [Online].
talent in your area must also be taken into account if you Available: https://www.mongodb.com/
want to hire developers for your project. Finally, the [10] ExpressJS.com, ‘Express official'. [Online].
project's complexity and scale can have an impact on the Available: http://expressjs.com.
framework you choose. [11] React: Up and Running: Building Web Applications, Book by
Stoyan Stefanov
[12] Moder web-development using reacts
Available: http://ijrra.net/Vol5issue1/IJRRA-05-01-27.pdf

Fig 4: Architecture

© 2023, IJSREM | www.ijsrem.com DOI: 10.55041/IJSREM25667 | Page 7