React Js

A
Seminar
submitted
in partial fulfillment
for the award of the Degree of
Bachelor of Technology
in Department of Computer Science & Engineering
(with specialization in Computer Science & Engineering)

Supervisor: Submitted By:

Dr. Aakriti Sharma Vishnu Banjara
Associate Professor, CSE Department 20ESKCS876

Department of Computer Science & Engineering

Swami Keshvanand Institute of Technology, Management & Gramothan,
Rajasthan Technical University,Kota
November, 2023
 CERTIFICATE

This is to certify that Mr. Vishnu Banjara, a student of B.Tech (Computer Science &
Engineering) 7th semester has been submitted his Seminar Training report entitled “React
Js” under my guidance.

i
 ACKNOWLEDGEMENT

I feel immense pleasure in expressing my regards to the chairman Mr. Suraj Ram Meel,
DirectorMr. Jaipal Meel, Registrar Mrs. Rachana Meel, Director (Academics) Prof. (Dr.)
S.L. Surana,Principle Prof. (Dr) Ramesh Kumar Pachar, Swami Keshvanand Institute of
Technology, Management & Gramothan, Jaipur for providing me necessary facilities during
the various stagesof this work.

I would like to thank Dr Mukesh Kumar Gupta, Professor & Head, Department of
Computer Science & Engineering and Dr Anil Chaudhary, Professor & Head, Department
of Information Technology for providing me opportunity to work in a consistent direction
and providing their valuable suggestions to improve Seminar Report.

I would like to thank my esteemed guide Dr Aakriti Sharma, Department of Computer

Science & Engineering, Swami Keshvanand Institute of Technology, Management &
Gramothan, Jaipur for her valuable guidance, keen interest, constant encouragement,
incessant inspiration and continuous help throughout this work. Specially, I acknowledge his
support when I was stuck and she is suggestingme new ideas to solve the problems. Her vast
experience and realistic approach have been of greathelp to me. I am honoured to have you
as my seminar report supervisor. Her excellent guidance has been instrumental in making
this working this work a success.

I would like to express my thanks to my parents for their support and blessings. In addition,
a veryspecial thanks to all my colleagues and friends for their support in the completion of
this report.

ii
 ABSTRACT

ReactJS is a part based library which is conveyed for the advancement of

intelligent UIs. Presently it is the most famous front-end JS library. It
consolidates the view (V) layer in M-V-C (Model View Controller) design. It is
bolstered by Facebook, Instagram and a network of individual designers and
associations. Respond fundamentally empowers advancement of enormous and
complex online applications which can change its information without ensuing
page revives. It focusesto furnish better client encounters and with blasting
quick and powerful web applications advancement. ReactJS can likewise
coordinated with other JavaScript libraries or structures in MVC, for example,
AngularJS.
The BMI Calculator App is a software application which avoids more manual
hours that need to spend in personally calculate and find the BMI for a particular
person at a single click. This application keeps both the standard in it ie
American standard and Indian standard too.This app gives us all the information
in both the standards which is not given in existing app.The main scope is to
maintain the health. The BMI App gives us all the information ie it gives
suggestion for our health and tells us what should we eat and what to avoid.
When we enter the height and weight we get all the information ie are we
overweight or underweight etc.
KEYWORDS: Android, Calculator, Application, Smartphones.
Start to design your webpage by feeding HTML components. To make the
webpage more attractive to add the CSS (Cascading Style Sheet).Your form will
be displayed with a feeded features and design.Make the webpage dynamic by
adding JavaScript (Link HTML with JS). Add REACT components to get a
input from the user and perform the require BMI Operation.The final result is
your BMI value.

i
 LIST OF CONTENT

CHAPTER NO TITLE PAGE NO

ABSTRACT i

LIST OF FIGURES ii

LIST OF ABBREVATION iii

1 INTRODUCTION 1

1.1 REACTJS features 2

1.2 Key benefits of reactjs 4

2 REACTJS INSTALLATION 5

2.1 Way to install reactjs 5

2.2 REACT Create – React - App 6

2.3 Installation 6
3 BMI CALCULATOR APPLICATION USING 9
REACTJS

3.1 Objective 9

3.2 Limitations of BMI 10

3.3 BMI Running Operation 10

4 RESULT AND CONCLUSION 12

4.1 Result 12

4.2 Source code 12

4.3 Calculation Snapshots 16

4.4 Conclusion 17

4.5 Reference 18
 LIST OF FIGURES

FIGURE.NO TITLE PAGE.NO

1.1 Features of reactjs 2

1.2 React url page 7

1.3 Explorer of reactjs 8

ii
 LIST OF ABBREVATIONS

ABBREVATIONS EXPANSIONS

HTML HyperText Markup Language

CSS Cascading Style Sheet

JS JavaScript

BMI Body Mass Index

NPM Node Package Manager

iii
 CHAPTER 1

INTRODUCTION

ReactJS is a declarative, efficient, and flexible JavaScript library for building

reusable UI components. It is an open-source, component-based front end
library responsible only for the view layer of the application. It was created
by Jordan Walke, who was a software engineer at Facebook. It was initially
developed and maintained by Facebook and was later used in its products
like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its
newsfeed section, but it was released to the public in the month of May 2013.

A ReactJS application is made up of multiple components, each component

responsible for outputting a small, reusable piece of HTML code. The
components are the heart of all React applications. These Components can be
nested with other components to allow complex applications to be built of
simple building blocks. ReactJS uses virtual DOM based mechanism to fill data
in HTML DOM. The virtual DOM works fast as it only changes individual
DOM elements instead of reloading complete DOM every time.

To create React app, we write React components that correspond to various

elements. We organize these components inside higher level components which
define the application structure. For example, we take a form that consists of
many elements like input fields, labels, or buttons. We can write each element of
the form as React components, and then we combine it into a higher-level
component, i.e., the form component itself. The form components would specify
the structure of the form along with elements inside of it.

1
1.1 REACTJS FEATURES

Fig.,1.1 Features of Reactjs

Currently, ReactJS gaining quick popularity as the best JavaScript framework

among web developers. It is playing an essential role in the front-end ecosystem.
The important features of ReactJS are as following.

o JSX
o Components
o One-way Data Binding
o Virtual DOM
o Simplicity
o Performance

2
JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML
or HTML like syntax used by ReactJS. This syntax is processed into JavaScript
calls of React Framework. It extends the ES6 so that HTML like text can co-exist
with JavaScript react code. It is not necessary to use JSX, but it is recommended
to use in ReactJS.

Components
ReactJS is all about components. ReactJS application is made up of multiple
components, and each component has its own logic and controls. These
components can be reusable which help you to maintain the code when working
on larger scale projects.

One-way Data Binding

ReactJS is designed in such a manner that follows unidirectional data flow or one-
way data binding. The benefits of one-way data binding give you better control
throughout the application. If the data flow is in another direction, then it requires
additional features. It is because components are supposed to be immutable and
the data within them cannot be changed. Flux is a pattern that helps to keep your
data unidirectional. This makes the application more flexible that leads to increase
efficiency.

Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works
like a one-way data binding. Whenever any modifications happen in the web
application, the entire UI is re-rendered in virtual DOM representation. Then it
checks the difference between the previous DOM representation and new DOM.
Once it has done, the real DOM will update only the things that have actually
changed. This makes the application faster, and there is no wastage of memory.

Simplicity
ReactJS uses JSX file which makes the application simple and to code as well as
understand. We know that ReactJS is a component-based approach which makes
the code reusable as your need. This makes it simple to use and learn.

3
Performance
ReactJS is known to be a great performer. This feature makes it much better than
other frameworks out there today. The reason behind this is that it manages a
virtual DOM. The DOM is a cross-platform and programming API which deals
with HTML, XML or XHTML. The DOM exists entirely in memory. Due to this,
when we create a component, we did not write directly to the DOM. Instead, we
are writing virtual components that will turn into the DOM leading to smoother
and faster performance.

1.2 KEY BENEFITS OF REACTJS

• Speed. ...
• Flexibility. ...
• Performance. ...
• Usability. ...
• Reusable Components. ...
• It's easy to learn. ...
• It helps to build rich user interfaces. ...
• It allows writing custom components.

4
 CHAPTER – 2

REACTJS INSTALLATION

1. NodeJS and NPM

2. React and React DOM
3. Webpack
4. Babel

2.1 WAY TO INSTALL REACTJS

There are two ways to set up an environment for successful ReactJS application.
They are given below.

1. Using the npm command

2. Using the create-react-app command

Install NodeJS and NPM

NodeJS and NPM package manager by the link given below NodeJS and NPM
are the platforms need to develop any ReactJS application. You can install.

To verify NodeJS and NPM, use the command

▪ Node -v
▪ Npm -v

Install React and React DOM

Create a root folder with the name reactApp on the desktop or where you want.
Here, we create it on the desktop. You can create the folder directly or using the
command given below.

Now, you need to create a package.json file. To create any module, it is required
to generate a package.json file in the project folder. To do this, you need to run
the following command.

➢ npm init -y

After creating a package.json file, you need to install react and its
DOM packages using the following npm command.

➢ npm install react react-dom --save

5
2.2 REACT CREATE – REACT – APP

The create-react-app is an excellent tool for beginners, which allows you to

create and run React project very quickly. It does not take any configuration
manually. This tool is wrapping all of the required dependencies like
Webpack, Babel for React project itself and then you need to focus on writing
React code only. This tool sets up the development environment, provides an
excellent developer experience, and optimizes the app for production.

REQUIRMENTS

The Create React App is maintained by Facebook and can works on any
platform, for example, macOS, Windows, Linux, etc. To create a React Project
using create-react-app, you need to have installed the following things in your
system.

1. Node version >= 8.10

2. NPM version >= 5.6

Let us check the current version of Node and NPM in the system.

2.3 INSTALLATION

Install REACT

We can install React using npm package manager by using the following
command. There is no need to worry about the complexity of React installation.
The create-react-app npm package manager will manage everything, which
needed for React project.

C:\Users\saranya> npm install -g create-react-app

Create a new React project

Once the React installation is successful, we can create a new React project using
create-react-app command. Here, I choose "reactproject" name for my project.

C:\Users\saranya> create-react-app bmi-calculator-react

C:\Users\saranya> npx create-react-bmi-calculator-react
The above command will take some time to install the React and create a new
project with the name "reactproject."

6
The React project is created successfully on our system. Now, we need to start the
server so that we can access the application on the browser. Type the following
command in the terminal window.

1. $ cd Desktop
2. $ npm start

NPM is a package manager which starts the server and access the application at
default server http://localhost:3000.

Fig.,1.2 React url page

Next, open the project on Code editor. Here, I am using Visual Studio Code. Our
project's default structure looks like as below image.

Requirements of Application:

a) Create a workspace with VS Code

b) Design the general layout with HTML & CSS

c) Create the required components with React JS.

7
 Fig., 1.3 Explorer of react.

In React application, there are several files and folders in the root directory. Some
of them are as follows:

1. node_modules: It contains the React library and any other third party
libraries needed.
2. public: It holds the public assets of the application. It contains the
index.html where React will mount the application by default on the <div
id="root"></div> element.
3. src: It contains the App.css, App.js, App.test.js, index.css, index.js, and
serviceWorker.js files. Here, the App.js file always responsible for
displaying the output screen in React.
4. package-lock.json: It is generated automatically for any operations where
npm package modifies either the node_modules tree or package.json. It
cannot be published. It will be ignored if it finds any other place rather than
the top-level package.
5. package.json: It holds various metadata required for the project. It gives
information to npm, which allows to identify the project as well as handle
the project?s dependencies.
6. README.md: It provides the documentation to read about React topics.

8
 CHAPTER – 3

BMI CALCULATOR APPLICATION USING REACTJS

To Create an application for calculating BMI using React JS

▪ Body Mass Index (BMI) is a person’s weight in kilograms divided by the

square of height in meters
▪ It is a measure to classify people under the following categories:
underweight, normal weight, overweight and obese. It is the ratio of your
weight in kilograms to the square of your height in meters. People with high
BMI have too much body weight or body fat for their height.
▪ BMI gives you a rough estimate of your overall fitness and possibility of
developing chronic diseases like heart disease, high blood pressure,
osteoarthritis, type 2 diabetes, gallstones etc.
▪ A highly muscular person may have a high BMI without any health risk.
BMI was introduced in the 1830s by Lambert Adolphe Jacques Quetelet, a
Belgian mathematician. It is also known as Quetelet index.

3.1 OBJECTIVE
▪ BMI is a screening tool that can indicate whether a person is underweight
or if they have a healthy weight, excess weight, or obesity.
▪ Scope of the project is to find the variation of health between people.

BMI Categories

o BMI =< 18.5 indicates Underweight

o BMI = 18.5-24.9 indicates Normal weight
o BMI = 25-29.9 indicates Overweight
o BMI = 30-34.9 indicates Obesity
o BMI= 35-39.9 indicates severely obese
o BMI > 40 indicates morbid obesity

9
How to calculate BMI
To calculate BMI, you are required to have two values: a person's height in meters
and his weight in kilograms. If the height is in inches, weight should be in pounds.
The formula to calculate BMI is as follows:

BMI = weight in kilograms / (height in meters) 2

3.2 Limitations of BMI

Although BMI is a widely used and useful indicator of healthy body weight, it
does have its limitations. Due to a wide variety of body types as well as
distribution of muscle, bone mass, and fat, BMI should be considered along with
other measurements rather than being used as the sole method for determining a
person's healthy body weight.
In adults:
BMI cannot be fully accurate because it is a measure of excess body weight, rather
than excess body fat. BMI is further influenced by factors such as age, sex,
ethnicity, muscle mass, and body fat, and activity level, among others. For
example, an older person who is considered a healthy weight, but is completely
inactive in their daily life may have significant amounts of excess body fat even
though they are not heavy.
In children and adolescents:
The same factors that limit the efficacy of BMI for adults can also apply to
children and adolescents. Additionally, height and level of sexual maturation can
influence BMI and body fat among children. BMI is a better indicator of excess
body fat for obese children than it is for overweight children, whose BMI could
be a result of increased levels of either fat or fat-free mass (all body components
except for fat, which includes water, organs, muscle, etc.).

3.3 BMI RUNNING OPERATION

Add REACT components to get a input from the user and perform the require
BMI Operation.The final result is your BMI value.

10
STEPS TO FOLLOW

• Open VS code, from scratch we have to write the code.

• Create a folder named Bmi-calculator-react
• Open the folder in VS Code and start creating files inside the folder.
• First we create app.js file to design our layout.
• Next we write our code in index.css file to design colors and fonts.
• Then we have to write a code for index.js to make our page static to
dynamic.
• Finally write a code to app.js to design the page.
• Create a folder named assets and put the output pictures inside the folder.

Based on your given inputs, It will calculate your BMI and displays it on the
screen.

BMI formula

Weight in kg
BMI =

Height in meters squared

11
 CHAPTER - 4

RESULT AND CONCLUSION

4.1 RESULT

The package was created in such a way that future changes are simple to
implement. The following conclusions can be drawn from the project's progress.
The efficiency of the entire system is improved by automating it. It has a user-
friendly graphical user interface that outperforms the current system. It grants
authorised users appropriate access based on their permissions. It effectively
solves the problem of time complexity. It has never been easier to keep
information up to date. The most notable features are system security, data
security, and dependability. If necessary, the System has enough flexibility to be
modified in the future.

4.2 SOURCE CODE

Index.js

12
App.js

13
Index.css

14
15
4.3 CALCULATION SNAPSHOTS

Normal weight

The BMI of the given value is Normal.

Under weight

The BMI of the given value is under the normal value.

16
 Over weight

The BMI of the given value is Over the normal value.

4.4 CONCLUSION

BMI is a useful measure of overweight and obesity. It is calculated from your

height and weight. BMI is an estimate of body fat and a good gauge of your risk
for diseases that can occur with more body fat. The higher your BMI, the higher
your risk for certain diseases such as heart disease, high blood pressure, type 2
diabetes, gallstones, breathing problems, and certain cancers.
Although BMI can be used for most men and women, it does have some limits:

➢ It may overestimate body fat in athletes and others who have a muscular
build
➢ It may underestimate body fat in older persons and others who have lost
muscle.

17
4.5 REFERENCE

[1] Willett WC, Manson JE, Stampfer MJ, et al. Weight, weight change, and
coronary heart disease in women. Risk within the ‘normal’ weight range. JAMA.
1995; 273:461-5.
[2] Daniel Bugl, “Learn React Hooks: Build and Refactor Modern React.js
Applications Using Hooks”, (October 2019).
[3] AnithaGunasekaran, “react-bmi-calculator”, A simple BMI calculator built
using React JS (April 2017).

18