International Journal of Trend in Scientific Research and Development (IJTSRD)

Volume 5 Issue 4, May-June 2021 Available Online: www.ijtsrd.com e-ISSN: 2456 – 6470

Review on React JS
Bhupati Venkat Sai Indla1, Yogeshchandra Puranik2
1PG Student, 2Professor,
1,2MCA, P.E.S. Modern College of Engineering, Pune, Maharashtra, India

ABSTRACT How to cite this paper: Bhupati Venkat

This is a review on react js. Its introduction, how to use it, why to use it. Its Sai Indla | Yogeshchandra Puranik
uses in the front-end development world and its effectiveness and advantages "Review on React JS"
as well. Published in
International Journal
KEYWORDS: React, React js, web development, frontend web dev of Trend in Scientific
Research and
Development (ijtsrd),
ISSN: 2456-6470, IJTSRD42490
Volume-5 | Issue-4,
June 2021, pp.1137-1139, URL:
www.ijtsrd.com/papers/ijtsrd42490.pdf

Copyright © 2021 by author (s) and

International Journal of Trend in Scientific
Research and Development Journal. This
is an Open Access article distributed
under the terms of
the Creative
Commons Attribution
License (CC BY 4.0)
(http: //creativecommons.org/licenses/by/4.0)

INTRODUCTION: Web before Reactjs

React (also known as React.js or ReactJS) is an open-source Let’s take a walk down to the technology space before 2015
front-end JavaScript library for building user interfaces or UI when web development was all about scripting and
components. It is maintained by Facebook and a community rendering. The time when languages like HTML, CSS ruled
of individual developers and companies. React can be used the frontend, and PHP ruled the backend.
as a base in the development of single-page or mobile
Web development was so easy back then. All we needed to
applications. However, React is only concerned with state
do was to put static HTML pages in some folders and render
management and rendering that state to the DOM, so
them using PHP. Although that’s not a unique and intuitive
creating React applications usually requires the use of
way to develop websites, you were still able to establish a
additional libraries for routing, as well as certain client-side
two-way connection between client and server. All the credit
functionality.
goes to Server-Side Rendering (SSR). We’ve been building
Declarative web applications this way for decades, but what we didn’t
React makes it painless to create interactive UIs. Design see coming is the revolution of websites after Javascript
simple views for each state in your application, and React libraries like Reactjs.
will efficiently update and render just the right components
The dawn of Single page apps (SPA), Javascript, and
when your data changes.
Reactjs
Declarative views make your code more predictable and Ever since the Javascript revolution took over, you can do a
easier to debug. lot more with Javascript than you could ten years ago.
Component-Based So what brings the change?
Build encapsulated components that manage their own state, The answer is: writing web apps with client-side Javascript.
then compose them to make complex UIs.
Yes, we are referring to the development of Single Page Apps
Since component logic is written in JavaScript instead of (SPA) using Javascript. While many Javascript frameworks
templates, you can easily pass rich data through your app let you write client-side javascript, Angular was the only one
and keep state out of the DOM. that promoted this approach.
Learn Once, Write Anywhere Imagine being able to fetch some data via Javascript, add
We don’t make assumptions about the rest of your some attributes to your markup, and voila!: you have built a
technology stack, so you can develop new features in React dynamic website without messing up with PHP and servers.
without rewriting existing code.
But, no matter how popularized this approach seemed to be,
React can also render on the server using Node and power DOM manipulations (a way to render several components)
mobile apps using React Native. remained not so fast.

@ IJTSRD | Unique Paper ID – IJTSRD42490 | Volume – 5 | Issue – 4 | May-June 2021 Page 1137
 International Journal of Trend in Scientific Research and Development (IJTSRD) @ www.ijtsrd.com eISSN: 2456-6470
Enter Reactjs! compatible with any browser platform you might be working
with.
The Isomorphic javascript library, introduced in 2015,
enabled developers to build dynamic web applications with This isn’t just a matter of convenience, though—using JSX to
blazing speed. update a DOM leads to significant site performance
improvements and development efficiency.
React was primarily used to render views in web or mobile
applications. It allowed developers to create reusable Virtual DOM
components that are independent of each other. So when any If you’re not using React JS (and JSX), your website will use
critical feature of a web application broke, they were still HTML to update its DOM (the process that makes things
better off with the remaining elements. Also, React brought “change” on screen without a user having to manually
this fantastic feature called Virtual DOM that enabled refresh a page). This works fine for simple, static websites,
developers to implement SSR without needing to update the but for dynamic websites that involve heavy user interaction
whole view each time during an update. it can become a problem (since the entire DOM needs to
reload every time the user clicks a feature calling for a page
What’s so revolutionary about this, you ask?
refresh).
For instance, while building a dynamic front-end or a SPA,
However, if a developer uses JSX to manipulate and update
you also want client-side routing to ensure a quick
its DOM, React JS creates something called a Virtual DOM.
navigational experience for the end-user. Now, navigation is
The Virtual DOM (like the name implies) is a copy of the
not something you would want to lose when you implement
site’s DOM, and React JS uses this copy to see what parts of
SSR. Thankfully, you can still use Reactjs on the client-side
the actual DOM need to change when an event happens (like
and implement navigation. What this means is that the initial
a user clicking a button).
render uses SSR, and the subsequent navigations behave like
a SPA. Also, with React, you are not moving away with SSR; Let’s say a user enters a comment in a blog post form and
you are just utilizing it whenever needed. pushes the “Comment” button. Without using React JS, the
entire DOM would have to update to reflect this change
To sum this up: Reactjs shines in building dynamic and
(using the time and processing power it takes to make this
engaging web interfaces and triumphs over other javascript
update). React, on the other hand, scans the Virtual DOM to
frameworks (such as Angular, Ember). The reason is: Virtual
see what changed after a user action (in this case, a comment
DOM facilitates updating components whenever a user does
being added) and selectively updates that section of the DOM
any interaction without affecting other parts of the interface.
only.
Why Do JavaScript Developers Use React JS?
This kind of selective updating takes less computing power
React is a JavaScript library that specializes in helping
and less loading time, which might not sound like much
developers build user interfaces, or UIs. In terms of websites
when you’re talking about a single blog comment, but—
and web applications, UIs are the collection of on-screen
when you start to think about all the dynamics and updates
menus, search bars, buttons, and anything else someone
associated with even a slightly complex website—you’ll
interacts with to USE a website or app.
realize it adds up to a lot.
Before React JS, developers were stuck building UIs by hand
Why use React? – React usage benefits
with “vanilla JavaScript” (developers speak for the raw
Now that you found out the origination of this ground-
JavaScript language on its own) or with less UI-focused React
breaking library, let’s find out the benefits of React and why
predecessors like jQuery. That meant longer development
should you use it for your web application projects:
times and plenty of opportunities for errors and bugs. So, in
2011, Facebook engineer Jordan Walke created React JS It’s Easier to Learn for Developers : One of the main
specifically to improve UI development. concerns developers have is choosing a framework (or
library) that is easier to learn and implement. React is easy
In addition to providing reusable React library code (saving
to grasp for developers who are familiar with Javascript. So if
development time and cutting down on the chance for
you have a team of developers that are very well-versed with
coding errors), React comes with two key features that add
Javascript, Reactjs should be your best bet. However, even if
to its appeal for JavaScript developers:
developers don’t know Javascript, React can be the right
JSX
place to start. Unlike Angular, React holds a smooth learning
Virtual DOM
curve.
JSX
React enables developers to reuse components: In React,
At the heart of any basic website are HTML documents. Web
your application comprises components. Ideally, you start
browsers read these documents and display them on your
with building small components like buttons, checkboxes,
computer, tablet, or phone as web pages. During this
dropdowns, menus, etc. and create wrapper components
process, browsers create something called a Document
around these smaller components. And as you go on writing
Object Model (DOM), a representational tree of how the web
the higher level wrapper components, you will have a single
page is arranged. Developers can then add dynamic content
root component and several hierarchical components. Now,
to their projects by modifying the DOM with languages like
here’s a no-brainer: each component in React has its own
JavaScript.
logic. So if you want to re-use the button component through
JSX (short for JavaScript eXtension) is a React extension that your app, you are good to go. I am pretty much confident
makes it easy for web developers to modify their DOM by everybody wants reusability in their project.
using simple, HTML-style code. And—since React JS browser
It provides a unique Abstraction Layer: Another lesser-
support extends to all modern web browsers—JSX is
known business-related benefit with React is that it allows
for a good abstraction layer, which means an end-user can’t

@ IJTSRD | Unique Paper ID – IJTSRD42490 | Volume – 5 | Issue – 4 | May-June 2021 Page 1138
 International Journal of Trend in Scientific Research and Development (IJTSRD) @ www.ijtsrd.com eISSN: 2456-6470
access the complex internals. Your developer only needs to Blogs (Gatsby)
be aware of some basics, and they'd be better off knowing Business websites
the internal functionalities. Moreover, it does not dictate any Portfolios
architectural patterns like MVC, MVP, and MVVM. Your
Forums
developer is free to design an app’s architecture in any way
he sees fit. Rating websites
Membership sites
It’s well established with a vibrant ecosystem of
eLearning modules
Developer tools: React consists of a rich and vibrant
ecosystem. Developers can find dozens of ready-made and Galleries
customizable charts, graphics, documentation tools, and Personal websites for self-promotion
other components that allow them to build a web app in less Job boards
time without reinventing the wheel. There’s this awesome Business directories
collection of Reactjs dev tools and tutorials that help Q&A websites like Quora
developers to build awesome stuff.
Non-profit websites for collecting donations
Single-page applications catering to multiple industries Wikis and knowledge bases
Reactjs can be used to build a Single page application Media-centric sites like YouTube
catering to any industry. A single-page app is different from
Auction and coupon sites
the traditional multi-page app that you see everywhere.
When a user navigates on a SPA, he will keep interacting Conclusion
with the same page without interacting with an entirely new Reactjs is an excellent addition to the projects that need
page. Instead, the web pages (also known as views in this component reusability, impressive user interactions, or
context) typically load inline within the same page itself. crazy animations. That said, it’s a robust UI library to build
projects that cater to small, medium, and even large-scale
An app like Trello is the best example of single page
organizations. That’s why so many companies rely heavily on
navigation. Technically, such a type of navigation can be
React for their long-term business goals. Considering React js
implemented by a technique called routing. The good news
pros and cons, it can be easily summed up in three words:
is: React offers a library called React-router, which provides
non-risky, responsive and advanced. The main idea behind
routing capabilities in SPAs.
this particular library is: “to build large-scale applications
Cross-platform Mobile Apps (React Native) with data that changes repeatedly over time” and it tackles
Using Reactjs in your project comes with a bonus: React the challenge well. It provides developers with the
Native. Yes, you can build cross-platform apps for Android capability of working with a virtual browser (DOM) that is
and iOS using React Native. much faster and user-friendly, than the real one. Apart from
that, it offers the easier creation of interactive UIs, JSX
For instance, suppose you have built a website for your
support, component-based structure and much more. The
bakery business. After some-time, you can also build a
combination of the above-mentioned factors makes it a
mobile app using React Native to support it. Of course, you or
reasonable choice for both startups and enterprises.
your developer will not be able to re-use the same code you
wrote for the web. Better still, you will be able to use the References:
same architecture and methodology for building the mobile [1] https://en.wikipedia.org/wiki/React_(JavaScript_libr
app. Sounds cool, doesn’t it? ary)
Where else should you use Reactjs? [2] https://reactjs.org/
The list is endless, but here’s a taste of some example web
[3] https://www.simform.com/why-use-react/
apps where you can use Reactjs:

@ IJTSRD | Unique Paper ID – IJTSRD42490 | Volume – 5 | Issue – 4 | May-June 2021 Page 1139