Jaipur Engineering College and Research

Centre, Shri Ram ki Nangal, via Sitapura Academic Year-

2024-2025
RIICO Jaipur- 302 022.

A
Industrial Training Report On
“ReactJS”
Submitted
In partial fulfillment of the requirement for the award of degree of Bachelor of
Technology
In
Computer Science & Engineering

(Session 2024-2025)

Submitted to: Submitted by:

Mrs. Kanika Bhutani Garvit Agrawal
Dept. of CSE, JECRC (21EJCCS079)
VII Semester

Department of Computer Science & Engineering

Jaipur Engineering College & Research Centre
Jaipur, Rajasthan
2024-2025

i
Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

CERTIFICATE

ii
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

VISION OF CSE DEPARTMENT

To become renowned Centre of excellence in computer science and engineering and make competent
engineers & professionals with high ethical values prepared for lifelong learning.

MISSION OF CSE DEPARTMENT

1. To impart outcome based education for emerging technologies in the field of computer
science and engineering.
2. To provide opportunities for interaction between academia and industry.
3. To provide platform for lifelong learning by accepting the change in technologies
4. To develop aptitude of fulfilling social responsibilities.

iii
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

PROGRAM OUTCOMES (POs)

1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural
sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experis, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources,and modern
engineering and IT tools including prediction and modeling to complex engineering activities
with an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant
to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional engineering

solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
for sustainable development.

8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.

iv
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

9. Individual and team work: Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.

10.Communication: Communicate effectively on complex engineering activities with the

engineering community and with society at large, such as, being able to comprehend and write

11.Project management and finance: Demonstrate knowledge and understanding of the

engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.

12.Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.

v
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

The PEOs of the B.Tech (CSE) program are:

1. To produce graduates who are able to apply computer engineering knowledge toprovide turn-key
IT solutions to national and international organizations.
2. To produce graduates with the necessary background and technical skills to work professionally
in one or more of the areas like – IT solution design development and implementation consisting
of system design, network design, software design and development, system implementation
and management etc.Graduates would be able to provide solutions through logical and analytical
thinking.
3. To able graduates to design embedded systems for industrial applications.

4. To inculcate in graduates effective communication skills and team work skills to enable them
to work in multidisciplinary environment.
5. To prepare graduates for personal and professional success with commitment totheir ethical and
social responsibilities.

vi
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

PROGRAM SPECIFIC OUTCOMES (PSOs)

● PSO1: Ability to interpret and analyze network specific and cyber security issuesin real world
environment.
● PSO2: Ability to design and develop mobile and web-based applications underrealistic
constraints.

vii
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

COURSE OUTCOMES (COs)

On completion of project Graduates will be able to-

● CO1: Generate the report based on the Projects carried out for demonstrating theability to apply
the knowledge of engineering field during training
● CO2: Demonstrate Competency in relevant engineering fields through problemidentification,
formulation and solution.

viii
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

MAPPING: CO’s & PO’s

Subject Code Cos Program Outcomes (POs)

PO PO PO PO PO PO PO PO PO PO PO
PO- - - - - - - - - - - -
1 2 3 4 5 6 7 8 9 10 11 12
3 3 2 2 2 1 1 2 2 3 3 3
5CS7-30 CO-
Industrial Training 1
3 3 3 3 3 1 1 2 2 3 3 3
CO-
2

ix
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

ACKNOWLEDGEMENT

It has been a great honour and privilege to undergo training at Celebal Technologies, Jaipur.I am very
grateful to my mentor giving his valuable time and constructive guidance inpreparing the report for
training. It would not have been possible to complete this report in short period of time without their
kind encouragement and valuable guidance.

I wish to express our deep sense of gratitude to our Seminar Guide Mrs Kanika Bhutani, Jaipur
Engineering College and Research Centre, Jaipur for guiding us from the inception till the completion
of the seminar. We sincerely acknowledge him for givinghis valuable guidance, support for literature
survey, critical reviews and comments forour seminar.

I would like to first of all express our thanks to Mr. Arpit Agrawal Director of JECRC,for providing
us such a great infrastructure and environment for our overall development.

I express sincere thanks to Dr. V. K. Chandna, Principal of JECRC, for his kind cooperation and
extendible support towards the completion of our seminar.

Words are inadequate in offering our thanks to Dr. Vijeta Kumawat, HOD of CSE department, for
consistent encouragement and support for shaping our seminar in the presentable form.

Also our warm thanks to Jaipur Engineering College and Research Centre, who provided us this
opportunity to carryout, this prestigious seminar and enhance our learning in various technical fields.

Garvit Agrawal
21EJCCS079

x
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

ABSTRACT

ReactJS is a popular JavaScript library for building user interfaces, particularly single-page applications
where user experiences are dynamic and highly responsive. Developed by Facebook, ReactJS allows
developers to create large web applications that can update and render efficiently with just the right data,
without reloading the page.

ReactJS relies on a component-based architecture, where each UI element is a reusable piece of code that
manages its own state. This modularity not only streamlines development but also enhances maintainability
and scalability. One of its standout features is the virtual DOM, which optimizes rendering by updating
only the parts of the user interface that have changed, leading to significant performance improvements.

ReactJS developers must be adept in JavaScript, HTML, and CSS, and often work with tools like Redux
for state management and Webpack for module bundling. They may be employed by tech firms, startups,
or as freelancers, contributing to projects ranging from simple websites to complex web applications.

The ReactJS ecosystem is vibrant and continuously evolving, with a multitude of libraries and extensions
that expand its capabilities. Staying current with the latest developments and best practices is crucial for
developers who wish to excel in this field, making the role both challenging and rewarding.

xi
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

TABLE OF CONTENTS

Certificate--------------------------------------------------------------------------------------- II
Vision and Mission---------------------------------------------------------------------------- III
Program Outcomes (POs)-------------------------------------------------------------------- IV
Program Education Objectives (PEOs) --------------------------------------------------- V
Program Specific Outcomes (PSOs)-------------------------------------------------------- VII
Course Outcomes (COs)---------------------------------------------------------------------- VIII
Mapping: COs and POs----------------------------------------------------------------------- IX
Acknowledgement------------------------------------------------------------------------------- X
Abstract-------------------------------------------------------------------------------------------- XI

1. INTRODUCTION---------------------------------------------------------------------------- 3
1.1 Key Features------------------------------------------------------------------------------- 4
1.2 Setup and Installation--------------------------------------------------------------------- 5
1.3 Core Concepts------------------------------------------------------------------------------ 6
1.4 Advanced Concepts----------------------------------------------------------------------- 10
1.5 React Hooks-------------------------------------------------------------------------------- 15
1.6 State Management-------------------------------------------------------------------------- 18
1.7 Performance Optimization---------------------------------------------------------------- 22
1.8 React Router--------------------------------------------------------------------------------- 25
1.9 Testing in React----------------------------------------------------------------------------- 28
1.10 Deploying React Applications------------------------------------------------------------- 32

1
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

2. PROJECT AND REQUIREMENT ANALYSIS----------------------------------- 35

2.1 Purpose---------------------------------------------------------------------------------- 35
2.2 Project Scope--------------------------------------------------------------------------- 35
2.3 Hardware Requirement---------------------------------------------------------------- 36
2.4 Software Requirement----------------------------------------------------------------- 36
2.5 Functional Requirement--------------------------------------------------------------- 37
2.6 Non Functional Requirement--------------------------------------------------------- 38

3. SCREENSHOTS-------------------------------------------------------------------------- 40

4. ADVANTAGES, DISADVANTAGES, FUTURE SCOPE---------------------- 43

4.1 Advantages of React Apps----------------------------------------------------------- 43
4.2 Disadvantages of React Apps-------------------------------------------------------- 43
4.3 Future Scope of React Apps--------------------------------------------------------- 44

5. Conclusion--------------------------------------------------------------------------------- 45

6. References--------------------------------------------------------------------------------- 46

2
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1) Introduction

ReactJs

Overview of ReactJS
ReactJS is a widely-used JavaScript library designed for building user interfaces, particularly single-page
applications where the user experience is dynamic and highly responsive. Developed by Facebook, ReactJS
enables developers to create large web applications that can change data, without reloading the page. The
core philosophy behind React is to make it easier to build interactive user interfaces by breaking them down
into reusable components.

History and Evolution

ReactJS was first deployed on Facebook's news feed in 2011 and later on Instagram in 2012. It was open-
sourced in 2013, and since then, it has rapidly grown in popularity due to its simplicity, flexibility, and
performance. The library's virtual DOM concept was revolutionary at the time, and it has inspired many
other frameworks and libraries. Over the years, React has evolved with the addition of hooks and concurrent
mode, making it even more powerful and efficient.

3
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.1 Key Feature

Component-Based Architecture
ReactJS relies on a component-based architecture, where each UI element is a reusable piece of code that
manages its own state. This modularity streamlines development, enhances maintainability, and improves
scalability. Developers can create isolated components that manage their own state and compose them to
build complex user interfaces. This approach allows for better code reuse and organization.

Virtual DOM
The virtual DOM is one of React’s standout features. Instead of updating the actual DOM directly, React
creates a virtual representation of the DOM in memory. When the state of a component changes, React
updates the virtual DOM first, then compares it with the previous version using a process called
reconciliation. It then updates only the parts of the actual DOM that have changed. This makes updates
more efficient and improves performance.

JSX Syntax
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like
code within JavaScript. It makes the code easier to read and write. JSX is transpiled into regular
JavaScript at runtime. This combination of JavaScript and HTML allows developers to build dynamic
interfaces efficiently.

One-Way Data Binding

React uses a one-way data binding approach, meaning the data flows in one direction, from parent to
child components. This makes it easier to understand how data changes flow through the application,
leading to more predictable and understandable code. It also helps in debugging and maintaining the
application state.

4
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.2 Setup and Installation

Prerequisites
Before you begin setting up ReactJS, ensure you have the following installed on your system:
• Node.js: React depends on Node.js for managing packages and running the development server.
You can download it from Node.js official website.

Installing ReactJS
To get started with a new React application, you can use the Create React App tool. It sets up a new
React project with a default directory structure and all necessary dependencies.
1. Install Create React App: Open your terminal or command prompt and run the following
command: npx create-react-app my-app
2. Navigate to Your App Directory: cd my-app
3. Start the Development Server: npm start
This command starts the development server and opens your new React application in your default web
browser.

Creating a New React App

When you run the npx create-react-app my-app command, it generates a new directory named my-app
with the following structure:
my-app
├── node_modules
├── public
│ ├── index.html
├── src
│ ├── App.js
│ ├── index.js
├── .gitignore
├── package.json
├── README.md

5
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.3 Core Concepts

Components and Props

In React, components are the building blocks of the user interface. A component is a self-contained
module that renders some output. You can use these components to build complex user interfaces by
composing them together. Components can be either class components or functional components.

Example of a Functional Component:

javascript
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Example of a Class Component:

javascript
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Props (short for properties) are read-only attributes that are passed from parent components to child
components. They allow data to flow in a unidirectional manner and make components reusable and
dynamic.

State and Lifecycle

State is a built-in React object that is used to contain data or information about the component. State can
change over time, and whenever it changes, the component re-renders to reflect those changes.

Example of a Component with State:

6
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

javascript
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}

componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date(),
});
}

render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
7
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

Lifecycle methods are special methods in React components that are called at different stages of a
component's life. Common lifecycle methods include componentDidMount, componentDidUpdate, and
componentWillUnmount.

Handling Events
Handling events in React is similar to handling events in DOM elements. However, there are some
syntactic differences. React events are named using camelCase, and you pass a function as the event
handler instead of a string.

Example of Handling Events:

javascript
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { isToggleOn: true };

// This binding is necessary to make `this` work in the callback

this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState((state) => ({
isToggleOn: !state.isToggleOn,
}));
}

render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
8
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

</button>
);
}
}

Conditional Rendering
Conditional rendering in React works the same way as conditions work in JavaScript. Use JavaScript
operators like if or the conditional operator ? to create elements representing the current state, and let
React update the UI to match them.

Example of Conditional Rendering:

javascript
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}

9
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.4 Advanced Concepts

Context API
The Context API is a feature in React that allows you to share state across the entire app (or part of it)
without passing props down manually at every level. It is useful for managing global state or passing data
deeply nested within the component tree.

Example:
javascript
const ThemeContext = React.createContext('light');

class App extends React.Component {

render() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

10
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

class ThemedButton extends React.Component {

// Define contextType to read the current theme context.

static contextType = ThemeContext;

render() {
return <Button theme={this.context} />;
}
}

Refs and the DOM

Refs provide a way to access DOM nodes or React elements created in the render method. They are used
for managing focus, text selection, media playback, or integrating with third-party libraries.

Example:
javascript
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}

focusTextInput = () => {
// Explicitly focus the text input using the raw DOM API
this.textInput.current.focus();
};

render() {
return (
<div>
<input type="text" ref={this.textInput} />
11
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

<button onClick={this.focusTextInput}>Focus the text input</button>

</div>
);
}
}

Fragments and Portals

Fragments allow you to group a list of children without adding extra nodes to the DOM.
Example:
javascript
function ListItem({ item }) {
return (
<>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</>
);
}
Portals provide a way to render children into a different part of the DOM tree.
Example:
javascript
const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {

constructor(props) {
super(props);
this.el = document.createElement('div');
}

componentDidMount() {
12
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

modalRoot.appendChild(this.el);
}

componentWillUnmount() {
modalRoot.removeChild(this.el);
}

render() {
return ReactDOM.createPortal(
this.props.children,
this.el
);
}
}

Error Boundaries
Error boundaries are React components that catch JavaScript errors anywhere in their child component
tree, log those errors, and display a fallback UI instead of crashing the entire app.
Example:
javascript
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
return { hasError: true };
}

13
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}

render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}

14
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.5 React Hooks

useState
The useState hook is a fundamental building block in React that allows you to add state to functional
components. This hook returns a stateful value and a function to update it.
Example:
javascript
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
In this example, useState is called with the initial state of 0. count holds the current state value, and
setCount is used to update the state.

useEffect
The useEffect hook lets you perform side effects in functional components. It serves the same purpose as
componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
Example:
Javascript

15
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

import React, { useState, useEffect } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds((seconds) => seconds + 1);
}, 1000);

return () => clearInterval(interval);

}, []);

return <h1>{seconds} seconds have elapsed.</h1>;

}
In this example, useEffect sets up an interval that updates the seconds state every second. The cleanup
function clearInterval is returned to clear the interval when the component unmounts.

Custom Hooks
Custom hooks let you extract component logic into reusable functions. They allow you to share logic
across multiple components without repeating code.
Example:
javascript
import { useState, useEffect } from 'react';

function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
16
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

const handleResize = () => setWidth(window.innerWidth);

window.addEventListener('resize', handleResize);

return () => window.removeEventListener('resize', handleResize);

}, []);

return width;
}

function WidthDisplay() {
const width = useWindowWidth();

return <h1>Window width: {width}</h1>;

}
In this example, useWindowWidth is a custom hook that tracks the window's width. The WidthDisplay
component uses this custom hook to display the current width.

17
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.6 State Management

Introduction to Redux
Redux is a popular state management library for JavaScript applications. It helps you manage the state of
your application in a predictable way by centralizing the state in a single store. Redux works well with
React and provides a robust solution for complex state management needs.
Redux operates on three core principles:
1. Single Source of Truth: The state of the entire application is stored in a single object called the
store.
2. State is Read-Only: The only way to change the state is to dispatch an action, which is an object
describing the change.
3. Changes are Made with Pure Functions: Reducers are pure functions that take the current state
and an action as arguments and return a new state.
State Management with Redux
To integrate Redux with a React application, you'll typically follow these steps:
1. Install Redux and React-Redux:
bash
npm install redux react-redux
2. Create Actions: Actions are plain JavaScript objects that describe a change in the state.
javascript
// actions.js
export const INCREMENT = 'INCREMENT';

export function increment() {

return { type: INCREMENT };
}
3. Create Reducers: Reducers specify how the state changes in response to an action.
javascript
// reducers.js

18
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

import { INCREMENT } from './actions';

function counter(state = 0, action) {

switch (action.type) {
case INCREMENT:
return state + 1;
default:
return state;
}
}

export default counter;

4. Create the Store: The store holds the state of the application.
javascript
// store.js
import { createStore } from 'redux';
import counter from './reducers';

const store = createStore(counter);

5. Connect React Components: Use the Provider component from react-redux to make the store
available to your React components.
javascript
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counter from './reducers';
import App from './App';

19
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

const store = createStore(counter);

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
6. Dispatch Actions: Use connect and mapDispatchToProps to dispatch actions from your React
components.
javascript
// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment } from './actions';

function App({ count, increment }) {

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

const mapStateToProps = (state) => ({

count: state,
});

const mapDispatchToProps = { increment };

20
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

export default connect(mapStateToProps, mapDispatchToProps)(App);

Using Redux can help you manage complex state logic more effectively, especially in large applications.

21
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.7 Performance Optimization

Code Splitting
Code splitting is a technique to optimize the performance of a React application by splitting the code into
smaller bundles that can be loaded on demand. This reduces the initial load time and improves the overall
performance of the application.
Example of Code Splitting with React.lazy:
javascript
import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
Lazy Loading
Lazy loading is a technique used to defer the loading of non-essential resources until they are needed.
This can significantly improve the performance of your application, especially when dealing with large
images or components.
Example of Lazy Loading Images:
javascript
function LazyImage({ src, alt }) {
const [isLoaded, setIsLoaded] = React.useState(false);

22
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

const handleLoad = () => {

setIsLoaded(true);
};

return (
<div>
<img src={src} alt={alt} onLoad={handleLoad} style={{ display: isLoaded ? 'block' : 'none' }} />
{!isLoaded && <div>Loading...</div>}
</div>
);
}
Memoization Techniques
Memoization is an optimization technique to improve performance by caching the result of expensive
function calls and returning the cached result when the same inputs occur again.
Using React.memo: React.memo is a higher-order component that memoizes the result of a functional
component, preventing unnecessary re-renders.
Example:
javascript
const MyComponent = React.memo(function MyComponent(props) {
// Render logic
});
Using useMemo: useMemo is a hook that memoizes the result of a calculation, recomputing it only when
its dependencies change.
Example:
javascript
import React, { useMemo } from 'react';

function ExpensiveComponent({ items }) {

const computedValue = useMemo(() => {
return expensiveComputation(items);
23
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

}, [items]);

return <div>{computedValue}</div>;
}

function expensiveComputation(items) {
// Some expensive computation
return items.length;
}
Using useCallback: useCallback is a hook that returns a memoized version of the callback function that
only changes if one of its dependencies changes.
Example:
javascript
import React, { useCallback } from 'react';

function Button({ handleClick }) {

return <button onClick={handleClick}>Click me</button>;
}

function ParentComponent() {
const [count, setCount] = React.useState(0);

const handleClick = useCallback(() => {

setCount(count + 1);
}, [count]);

return <Button handleClick={handleClick} />;

}

24
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.8 React Router

Introduction to React Router

React Router is a standard library for routing in React. It enables the navigation among different views of
various components in a React Application, allows changing the browser URL, and keeps the UI in sync
with the URL. React Router is particularly useful for Single Page Applications (SPAs) as it handles the
routing dynamically, without requiring a page reload.
Key Features of React Router:
• Declarative Routing: Routes are defined declaratively using JSX, which makes the routing logic
easy to understand and manage.
• Nested Routes: Allows defining routes within routes, making it easy to create complex
navigation structures.
• Dynamic Routing: Routes can be defined and modified based on application state or user actions.
• URL Parameters and Queries: Supports passing parameters and queries through URLs,
allowing for more interactive and dynamic applications.
Setting Up Routes
To set up React Router in your React application, follow these steps:
1. Install React Router: Use the following command to install React Router:
bash
npm install react-router-dom
2. Create Routes: Define the routes for your application in a component, usually called App.js or
Routes.js.
javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

25
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

function App() {
return (
<Router>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
</Router>
);
}

export default App;

3. Link Components: Use the Link component from react-router-dom to navigate between routes.
javascript
import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
26
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}

export default Navigation;

4. Access Route Parameters: Access route parameters in your components using the useParams
hook.
javascript
import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
let { userId } = useParams();
return <h2>User ID: {userId}</h2>;
}

export default UserProfile;

By following these steps, you can set up and use React Router in your React application to manage
navigation and routing effectively.

27
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.9 Testing in React

Unit Testing with Jest

Jest is a widely-used testing framework for JavaScript, commonly employed for testing React
applications. It provides a simple and efficient way to write tests, mock dependencies, and run tests with
a rich set of built-in matchers and utilities.
Setting Up Jest To get started with Jest, you need to install it along with the @testing-library/react
package, which provides utilities to test React components.
bash
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
Writing Unit Tests Unit tests focus on testing individual components and their functionality. Here is an
example of a simple unit test for a React component using Jest and @testing-library/react:
javascript
// Counter.js
import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

// Counter.test.js

28
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

import React from 'react';

import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

test('increments count', () => {

const { getByText } = render(<Counter />);
const button = getByText(/increment/i);
fireEvent.click(button);
expect(getByText(/count: 1/i)).toBeInTheDocument();
});
Integration Testing
Integration tests verify that different parts of the application work together as expected. They often
involve testing the interaction between multiple components, services, and APIs.
Example of Integration Testing with Jest: Let's consider a more complex example where we test an
application with multiple components and API calls.
App.js
javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
const [data, setData] = useState([]);

useEffect(() => {
axios.get('/api/data').then(response => setData(response.data));
}, []);

return (
<div>
29
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

<h1>Data List</h1>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}

export default App;

App.test.js
javascript
import React from 'react';
import { render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import axios from 'axios';
import App from './App';

jest.mock('axios');

test('fetches and displays data', async () => {

const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];
axios.get.mockResolvedValueOnce({ data });

const { getByText } = render(<App />);

await waitFor(() => expect(getByText('Data List')).toBeInTheDocument());

data.forEach(item => {
30
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

expect(getByText(item.name)).toBeInTheDocument();
});
});
In this example, we use Jest to mock the Axios library and simulate an API call. The waitFor function
ensures that the test waits for the asynchronous operations to complete before making assertions.

31
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

1.10 Deploying React Applications

Deployment Options
Deploying a React application involves hosting your app on a web server so that it can be accessed by
users over the internet. There are several popular deployment platforms you can use to deploy your React
application, each with its own set of features and benefits.
1. Netlify Netlify is a popular platform for deploying modern web projects. It provides continuous
deployment, serverless functions, and a powerful CLI.
Steps to Deploy on Netlify:
1. Create a production build of your React app: npm run build
2. Drag and drop the build folder into the Netlify dashboard.
3. Netlify will automatically detect and deploy your site.
2. Vercel Vercel is another popular platform for deploying front-end applications. It offers easy
integration with GitHub, GitLab, and Bitbucket, and supports serverless functions.
Steps to Deploy on Vercel:
1. Install the Vercel CLI: npm install -g vercel
2. Create a production build of your React app: npm run build
3. Deploy the app using the Vercel CLI: vercel
3. GitHub Pages GitHub Pages is a static site hosting service designed to host your personal,
organization, or project pages directly from a GitHub repository.
Steps to Deploy on GitHub Pages:

1. Install the gh-pages package: npm install gh-pages --save-dev

2. Add the following scripts to your package.json:
json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

32
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

3. Deploy your app: npm run deploy

Continuous Integration/Continuous Deployment (CI/CD)

CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of
app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery,
and continuous deployment.
Using GitHub Actions for CI/CD: GitHub Actions is a powerful CI/CD tool integrated into GitHub. It
allows you to automate workflows directly in your GitHub repository.
Example GitHub Actions Workflow:
1. Create a .github/workflows/deploy.yml file in your repository:
yaml
name: Deploy React App
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2

with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Build the app
33
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

run: npm run build

- name: Deploy to GitHub Pages
run: npm run deploy
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
In this example, the workflow is triggered whenever there is a push to the main branch. It checks out the
code, sets up Node.js, installs dependencies, builds the app, and deploys it to GitHub Pages.
By using CI/CD, you can automate the deployment process, ensuring that your application is always up
to date with the latest code changes.

34
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

2) Project And Requirement Analysis

2.1 Purpose

Tomato is a responsive and dynamic web application designed to enhance the online food ordering
experience. Developed using HTML, CSS, JavaScript, and React, this platform allows users to
effortlessly browse and order from a category-based menu. The detailed cart functionality provides
an intuitive user experience by enabling users to add and remove items seamlessly. This application
aims to offer a robust and efficient solution for restaurants and food delivery services, streamlining
the ordering process, reducing errors, and improving overall customer satisfaction. By leveraging
dynamic state management, it ensures that the user interactions are smooth and responsive, providing
a high-quality digital ordering system.

2.2 Project Scope

Incorporating a back-end system enhances the functionality of the Tomato food ordering platform
significantly. Once back-end integration is complete, administrators will be able to manage menu items
directly from an admin panel, ensuring real-time updates and efficient management. Additionally, user
authentication can be implemented to provide secure access and personalized user experiences. The
platform can also integrate a payment gateway, enabling seamless online transactions, and support for
promo codes and discounts to attract and retain customers. These features together will make the Tomato
platform robust, secure, and user-friendly, ultimately driving business growth and customer satisfactio

35
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

2.3Hardware Requirement

• Operating System: Windows 8 or later, Mac OS High Sierra 10.13 or later

• Processor: Intel Pentium 4 or later
• Memory: 2 GB minimum, 4 GB recommended
• Screen Resolution: 1280x1024 or larger
• Application Window Size: 1024x680 or larger
• Internet Connection: Required

2.4 Software Requirements

• Web Browsers: Latest versions of Google Chrome, Mozilla Firefox, Safari, or Microsoft Edge
• Code Editors: Visual Studio Code, Sublime Text, or any preferred code editor
• Version Control: Git, with a GitHub or GitLab account for repository management
• Node.js: Node.js (v12 or later) for running the development environment
• React: React library for building the user interface
• Package Manager: npm (Node Package Manager) or Yarn for managing dependencies
• Database: A relational or NoSQL database like MongoDB, MySQL, or PostgreSQL
• API: RESTful API or GraphQL for backend communication
• Payment Gateway: Integration with payment gateways like Stripe or PayPal
• Hosting Services: Platforms like Netlify, Vercel, or GitHub Pages for deployment
• Testing Tools: Jest, Mocha, or Cypress for testing

36
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

2.5 Functional Requirements

The functional requirements outline the primary capabilities and behaviors expected from the Tomato
food ordering platform:
• User Registration and Authentication: Users must be able to create accounts, log in, and
manage their profiles. This ensures secure access to the platform and personalized experiences.
• Menu Browsing and Category Filtering: The application should allow users to browse the menu
by categories (e.g., Appetizers, Main Course, Desserts) and apply filters to find specific items
quickly.
• Item Detail View: Each menu item should have a detailed view that includes a description, price,
ingredients, and images.
• Cart Management: Users should be able to add, remove, and update items in their shopping cart.
The cart should display the total cost and allow users to review their selections before checkout.
• Checkout and Payment Processing: The application should support a smooth checkout process,
including entering delivery information, applying promo codes, and processing payments through
secure gateways like Stripe or PayPal.
• Order Tracking: After placing an order, users should be able to track the status of their order in
real-time, from preparation to delivery.
• Admin Panel for Menu Management: Administrators should have access to an admin panel
where they can add, update, and delete menu items. This includes managing prices, descriptions,
and availability.
• Promotions and Discounts: The platform should support promotional codes and discounts,
allowing users to apply them during checkout for special offers.
• Responsive Design: The interface must be fully responsive, providing a seamless user experience
on desktops, tablets, and smartphones.
• Search Functionality: Users should be able to search for menu items using keywords to find
specific dishes quickly.
• User Roles and Permissions: Different functionalities should be available based on user roles,
such as regular users for ordering and administrators for managing the platform.
• Real-Time Updates: The platform must support real-time updates for order status, menu changes,
37
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

and inventory management to keep information up-to-date.

• Data Validation and Error Handling: The application should include data validation to ensure
correct information entry (e.g., preventing incorrect item quantities) and handle errors gracefully.
• Security: Ensure secure transactions and protect user data through encryption and secure
communication channels

2.6 Non-Functional Requirements

Non-functional requirements ensure the application's quality and performance standards:

• Accessibility: The platform must be accessible to all users, regardless of their technical
proficiency or the device they use. It should support a wide range of devices, including desktops,
tablets, and smartphones, to ensure broad usability.
• Performance and Efficiency: The application should be optimized for smooth, responsive
performance, minimizing load times for pages and data retrieval processes. It should handle high
traffic efficiently without significant performance degradation.
• Data Security and Privacy: Robust security measures must be in place to protect sensitive user
data, including personal information and payment details. The platform should comply with
relevant data protection regulations and standards.
• Maintainability and Upgradability: The application codebase should be well-structured and
documented, facilitating easy troubleshooting, updates, and the addition of new features. This
ensures that the platform can evolve over time to meet changing user needs and technological
advancements.
• Reliability and Availability: The platform must be highly reliable, with minimal downtime or
disruptions in service. It should be capable of handling peak loads without crashing and provide a
consistent user experience.

38
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

• Scalability: As the user base grows, the platform should be able to accommodate an increasing
number of users and transactions without performance degradation. The architecture should
support horizontal and vertical scaling to meet future demands.
• User Experience and Interface Design: The interface must be intuitive, aesthetically pleasing,
and easy to navigate, ensuring that all users, regardless of technical knowledge, can operate the
platform without extensive training. Consistent design elements, clear labels, and a logical layout
enhance usability.
• Compatibility with Third-Party Services: The platform should seamlessly integrate with third-
party services such as payment gateways, mapping services, and social media for sharing and
promotions.
• Portability: The application should work efficiently across various platforms, including desktops,
tablets, and mobile devices, with minimal modifications. It should offer a consistent user
experience regardless of the device.
• Real-Time Updates: The platform should support real-time updates for order status, menu
changes, and inventory management, ensuring that all information is current and accurate.
• Error Handling and Logging: The application should include comprehensive error handling and
logging mechanisms to capture and address any issues promptly, ensuring a stable and reliable
user experience.

39
Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

3) Screenshots

40
Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

41
Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

42
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

4) Advantages, Disadvantages and Future Scope

4.1 Advantages of React Apps

• Reusable Components: React allows developers to create reusable UI components, making
development faster and more efficient.

• Virtual DOM: React's virtual DOM improves performance by updating only the parts of the
DOM that have changed.

• Component-Based Architecture: This modular approach makes it easier to manage and maintain
code.

• One-Way Data Binding: Simplifies the flow of data and reduces the risk of unexpected side
effects.

• SEO-Friendly: React supports server-side rendering, which improves SEO performance.

• Large Community and Ecosystem: Extensive resources, libraries, and tools are available,
making development smoother.

• Flexibility: React can be used for both web and mobile applications (React Native).

4.2 Disadvantages of React Apps

• Steep Learning Curve: React can be challenging for beginners, especially those new to
JavaScript or component-based architecture.

• Complex State Management: Managing state in large applications can become complex without
proper tools like Redux.

• Frequent Updates: The fast pace of updates can make it difficult to keep up with the latest
features and best practices.

• JSX Syntax: JSX, the XML-like syntax used in React, can be a barrier for developers unfamiliar
with it.
43
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

• Limited Mobile Support: While React Native addresses this, native mobile development can still
be more complex.

4.3 Future of React Apps

• Embracing TypeScript: More developers are adopting TypeScript for type safety and
maintainability.

• Next.js Growth: Next.js, a React framework, is gaining popularity for server-side rendering and

• static site generation.

• Enhanced State Management: Newer state management solutions like React Query and Zustand
are becoming more popular.

• Performance Optimization: Continuous improvements in performance, including concurrent

rendering, are expected.

Server Components: React Server Components will help build more efficient applications by
rendering parts on the server.

• AI and Machine Learning Integration: React apps will increasingly integrate AI and machine
learning for smarter features.

• Micro-Frontends: The trend towards micro-frontends will see React being used in more modular
and scalable applications.

44
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

5) Conclusion

The purpose of this training was to learn ReactJS and its associated web development tools, including
HTML, CSS, JavaScript, and more, and then to apply this knowledge to create a comprehensive project.
This training provided me with an enriching and immersive learning experience, allowing me to add a
significant and valuable skill to my resume. I would like to extend my gratitude to my training mentors,
teachers, family, and friends for their continuous support and guidance throughout this project.
The workshop covered the essential algorithms and methodologies for building dynamic web applications
with ReactJS, emphasizing practical applications and real-world use cases. The outcomes of this
workshop are:
⮚ Understanding the fundamental components and concepts of ReactJS.

⮚ Applying ReactJS along with other web development tools to build responsive and functional
websites.
⮚ Learning how ReactJS can be utilized to create efficient and user-friendly web applications for
businesses.
⮚ Implementing themes and styles in ReactJS applications to ensure consistency and visual appeal.
⮚ Preparing and managing data, handling state and props effectively within ReactJS applications.

⮚ Utilizing HTML, CSS, JavaScript, and ReactJS together for comprehensive web development.

This experience has significantly enhanced my technical skills in ReactJS and prepared me for future
projects and challenges in the field of web development, specifically with ReactJS as the core technology.

45
 Jaipur Engineering College and Research
Centre, Shri Ram ki Nangal, via Sitapura Academic Year-
2024-2025
RIICO Jaipur- 302 022.

6) References

The following are the websites from where I took references from:

1. Geeksforgeeks.org

2. Bootstrap.com

3. google.com

4. tutorialsweb.com

5. youtube.com

6. Celebaltechnologies.com

46