Please read this disclaimer before proceeding:

This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document
through email in error, please notify the system manager. This document
contains proprietary information and is intended only to the respective group /
learning community as intended. If you are not the addressee you should not
disseminate, distribute or copy through e-mail. Please notify the sender
immediately by e-mail if you have received this document by mistake and delete
this document from your system. If you are not the intended recipient you are
notified that disclosing, copying, distributing or taking any action in reliance on
the contents of this information is strictly prohibited.
 22IT407
WEB DEVELOPMENT FRAMEWORKS
(Lab Integrated)
Batch / Year / Semester: 2023-2027 / II / 4

Name of the Faculty Members

RMKEC
1.Dr. S.D. Lalitha, ASP, CSE, RMKEC
2.Ms. V. Haritha, AP, CSE, RMKEC
3.Ms. J. Latha, AP, CSE,RMKEC
4.Dr. G. Manikandan, Professor, ADS, RMKEC
5.Dr. Gladiss Merlin N R, ASP, ADS, RMKEC
6.Dr. A. Ponmalar, ASP, ADS,RMKEC
7.Dr. P. Umaeswari, ASP, CSBS, RMKEC
8.Dr. M.S. Girija ,ASP,CSD,RMKEC
9.Ms. M. Kanniga Parameshwari, AP ,IT, RMKEC
RMDEC
1.Dr. G. Amudha , Professor & Head, CSBS, RMDEC
2.Dr. P.M. Joe Prathap , Professor, CSE, RMDEC
3.Mrs. D. Vishnu Sakthi , AP, CSE, RMDEC
4.Dr. K. Roslin Dayana, ASP, CSE, RMDEC
5.Dr. R .Jothilakshmi , ASP, IT, RMDEC
6.Dr. B. Kalpana, ASP, IT, RMDEC
7.Dr. K. Sudharson, ASP, AIML, RMDEC
8.Dr. K. Sudha, ASP, CSBS, RMDEC
RMKCET
1.Dr. Sivasubramanian R , ASP, CSE, RMKCET
2.Dr. Prasath R, ASP, CSE, RMKCET
3.Ms. Saranya R, ASP, CSE, RMKCET
4.Dr. L. Maria Michael Visuwasam, ASP, ADS, RMKCET

4
 1. CONTENTS
S.NO. CONTENTS PAGE NO

1 Contents 5
2 Course Objectives 6
3 Pre Requisites 7
4 Syllabus 8
5 Course Outcomes 13
6 CO- PO/PSO Mapping 14
7 Lecture Plan 15
8 Activity Based Learning 16
9 Lecture Notes 18-51
10 Assignment – 1 to 5 52-55
11 Part A Questions & Answers 56-59
12 Part B Questions 60
Supportive Online Certification 62
13
Courses
14 Real time Applications 63
15 Contents Beyond the Syllabus 65
16 Assessment Schedule 67
Prescribed Text Books & Reference 68
17
Books
18 Mini Project – 1 to 5 69-70

5
 2. COURSE OBJECTIVES
OBJECTIVES:

The Course will enable learners:

● To understand web semantics and related tools and

framework

● Able to get hands on latest JS based web frameworks

● To develop a scalable and responsive web application

● To develop an industry ready application web enterprise

feature

6
 3. PRE REQUISITES
• Pre-requisite Chart

22IT407

WEB DEVELOPMENT FRAMEWORKS

22CS102
-
SOFTWARE DEVELOPMENT PRACTICES

7
 4. Syllabus
22IT407 – WEB DEVELOPMENT FRAMEWORKS (Lab Integrated) – L T P C - 3 0 2 4

UNIT I - ADVANCED JAVASCRIPT – 9+6

Introduction to HTML5 and CSS3, Media Queries, JS, DOM, BootStrap, Variables, Loops,
Operators, Scope, Hoisting, Arrays, Spread, REST, DeStructuring.
List of Exercise/Experiments
1) Create a JS Object for Bank Account (w attributes like à customer name,
account type, balance, data of creation, bank name, branch name, pan card
number). Using JS Object keyword, try to perform following activities
➢ List down all the entries of the bank object
➢ Check the existence of a key
➢ If key found, get the value for the key
2) Spread Operator
➢ Merge Customer and Account Arrays
➢ Update the Customer Object with the new values
➢ Develop a function that takes a Spread Argument and calculates total balance.
UNIT II - INTRODUCTION TO REACTJS - 9+6
Class-Inheritance, Methods, Extended Class-Map, filter and Reduce Functions, Functions -
Arrow Functions, Lambda Expressions, REST - Introduction, Why JSX, Hello World Apps,
Project Structure
List of Exercise/Experiments
1) Create a list of Bank Objects (same kind of object you used in above
lab, but in an array format)
➢ Display the banks where balance is greater than 200
➢ deduct 10% of the Bank account balance, as part of monthly service
fees
➢ Display the banks where balance is greater than 200 and branch
code is “Chennai”
➢ Add a new Bank to the given array
➢ Delete a bank from the array (use splice operator)
➢ Calculate the total balance of all bank accounts

6
 4. Syllabus
2) Develop a Scientific calculator that does following operations
➢ Rounded Value
➢ Area of Circle
➢ Calculating of Sin, Cos and Tan functions
➢ Permiter of a Rectangle
➢ Employ Arrow functions
➢ Employ HOC
UNIT III - REACT COMPONENTS – 9+6
Class vs Functional Components, Lifecycle methods - React Class Based Components
– component DidMount, WillUpdate, shouldupate, didcatchetc - State - UseState,
UseRef, USeEffect, UseHistory Usage and Props(difference, when to use what,
mutable or immutabilty,direction of flow), PropTypes, Auxillary Components,
Controlled and Uncontrolled Components, Component Interaction (Parent to Child and
Child to Parent), Iteration & Conditional Response
List of Exercise/Experiments
1) Create a collection of Customer by using
➢ Weak Map and Map Collection in JS
➢ Show Case the different feature set of the same.
2) Add Login Page, Dash Board Page, Admin Page
➢ Enable React Routing
➢ Add React Protected Route, for authorization
UNIT IV - REACT LIBRARY – I – 9+6
Event Bubbleup - Component Wrapper - Integration of CSS Modules - Forms
Validations(YUP, Formik, Standard), Events Handling, Data Binding - Redux
List of Exercise/Experiments
1) Develop a React application that has User Registration Form w field
level validations, data submission to a rest api end point, boot strap for
responsive.
➢ Use YUP or Formik to implement the same.
 4. Syllabus
2) Build a Redux Counter Application
Requirements:
➢ React application with Redux integrated.
➢ A counter with:
➢ Increment button
➢ Decrement button
➢ Reset button
➢ Display the current counter value.
UNIT V - REACT LIBRARY – II – 9+6
Custom Hooks, HTTP - Fetch, Axios, and Context API, Services, Behaviour Subjects -
StateLess, StateFulll and Container Components, Error Handling - Build, Env, CORS, Unit
Testing w React Testing Library - Introduction to react-native - Introduction to StoryBook
List of Exercise/Experiments
1) Employ backend API for Login Page functionality (authentication). Post login,
store the user context (received from the back end server) in browser’s session
storage as objects. And use the same as creds during protected route verification.
➢ On the dashboard page, have a grid of Students. The data has to be bought
from backend api
➢ Employ useref, useeffect & usestate, and useHistory
2) Enable Exception Handling
3) Enable HOC and Aux Components
4) Implement React-Testing Library
5) Basic Context Setup
Objective: Set up a React Context to manage theme (light or dark).
➢ Create a ThemeContext using React.createContext.
➢ Create a provider component ThemeProvider with state to toggle
between "light" and "dark" themes.
➢ Use the context in a functional component to display the current theme.
➢ Add a button to toggle the theme.
 4. SYLLABUS
Business Use Case Implementations

1) Student Management System

2) Retail Bank System

3) E-Commerce System
4) Student LMS Management System
TOTAL:45+30=75 PERIODS
TEXTBOOK:
1. David Flanagan, Javascript The Definitive Guide, Paperback, 7th Edition, 2020.
2. David Choi ,Full-Stack React, TypeScript, and Node: Build cloud-ready web
applications using React 17 with Hooks and GraphQL Paperback – Import, 18
December 2020.
3. Mehul Mohan, Advanced Web Development with React Paperback – 1 January
2020.
E-RESOURCES:
1.Parental Website - https://reactjs.org/
2.The Road to Learn React: Your journey to master plain yet pragmatic React.js by
Robin Wieruch
3.Learning React: Functional Web Development with React and Redux by Alex Banks
and Eve Porcello
4. Learning React by KirupaChinnathambi
5. "React Up & Running" by StoyanStefanov
6. https://www.edureka.co/reactjs-redux-certification-training
7. CodePen
8. CodeSandbox (Preferred)
9. Stackblitz

11
 4. SYLLABUS
LIST OF EQUIPMENTS:
• NodeJS (v9.11.2)
• Github as code repository
• Visual studio code as IDE
• RTL as unit testing framework
• Responsive design w bootstrap
• ReactJS installation (v17)
• Chrome / FIreFox Browsers (latest)
• Responsive using Media Queries & Bootstrap Material & Antdesign
• Design based Apps.

12
 5. Course Outcomes
Course Outcomes with Knowledge Levels:
CO1: Personalize web pages using text formatting, graphics, audio,
and video. - K3
CO2: Hands on knowledge on Rest API , propTypes. - K3
CO3: Able to develop a web application using latest React
Framework – K3
CO4: Apply various React features including functions,
components, and services. – K3
CO5: Able to develop application using ReactJshooks. – K3
CO6: Design and integrate complex web components to enhance
user interface and user experience in React applications. – K5

11
 6. CO-PO/PSO Mapping

PROGRAM OUTCOMES PSO

CO
PO PO PO PO PO PO PO PO PO PO PO PO P P P
S S S
1 2 3 4 5 6 7 8 9 10 11 12 O O O
1 2 3
CO1 3 3 3 1 1 - - - 2 1 - 1 3 3 1

CO2 3 2 3 1 2 - - - 2 1 - 1 3 3 1

CO3 3 3 3 1 2 - - 1 2 1 - 1 3 3 1

CO4 3 3 3 1 2 - - - 2 1 - 1 3 3 1

CO5 3 3 3 1 2 - - 1 2 1 - 1 3 3 1

CO6 2 3 3 - 3 - - 1 2 2 - 3 3 3 1

CO 2.83 2.83 3.00 1.00 2.00 - - 1.00 2.00 1.17 - 1.33 3.00 3.00 1.00

Correlation Level
1. Slight (Low)
2. Moderate (Medium)
3. Substantial (High) ,
If there is no correlation, put “-“.

12
 7. LECTURE PLAN
Sl. Taxono
No. of. Proposed Actual Pertaining Mode of
No Topics my
Periods Date Date CO Delivery
. Level

As per As per
CO3, MD 1,
1 Event Bubbleup 1 academic academic K3
CO4,CO5 MD 4
calendar calendar

As per As per
Component CO3, MD 1,
2 1 academic academic K3
Wrapper CO4,CO5 MD 4
calendar calendar
As per As per
coIntegration of CO3, MD 1,
3 1 academic academic K3
CSS Modules CO4,CO5 MD 4
calendar calendar

As per As per
State - UseState, CO3, MD 1,
4 1 academic academic K3
UseRef, CO4,CO5 MD 4
calendar calendar

Forms As per As per

CO3, MD 1,
5 Validations(YUP, 1 academic academic K3
CO4,CO5 MD 4
Formik, Standard) calendar calendar

Forms As per As per

CO3, MD 1,
6 Validations(YUP, 1 academic academic K3
CO4,CO5 MD 4
Formik, Standard) calendar calendar
As per As per
CO3, MD 1,
7 Events Handling 1 academic academic K3
CO4,CO5 MD 4
calendar calendar
As per As per
Data Binding - CO3, MD 1,
8 1 academic academic K3
Redux CO4,CO5 MD 4
calendar calendar
As per As per
Data Binding - CO3, MD 1,
9 1 academic academic K3
Redux CO4,CO5 MD 4
calendar calendar

10 As per As per
CO3,
- Lab Exercises 6 academic academic K3 iamneo
CO4,CO5
15 calendar calendar

* MD1 – Oral Presentation

* MD 4 – Hands on using any IDE
 8. Activity Based Learning

Common Activities

Learning Methods Activities

Class Exercises, Challenge Yourself,

Learn by Solving Problems Practice At Home exercises posted in
iamneo Portal

Knowledge Check / MCQ Using

Learn by Questioning
iamneo portal and RMK Nextgen App

Learn by Hands on Practice available in iamneo Portal

 8. Activity Based Learning
Unit IV Activity - "Click Chain Reaction – Exploring Event Bubbling in
React"
Activity Description:
Students will create a simple "Click Chain Reaction" application, where clicking a
button inside nested elements will trigger multiple event listeners due to event
bubbling. They will experiment with stopPropagation() to control event
propagation.
Step 1: Setup the React App
Create a new React app
npx create-react-app event-bubbling-demo
cd event-bubbling-demo
npm start

Inside the src folder, create a component EventBubble.js and add the following
code:
Step 2: Implement Event Bubbling in a Nested Component
import React from "react";
import "./EventBubble.css"; // Add CSS for better visualization
const EventBubble = () => {
const handleGrandParentClick = () => {
alert("Grandparent Clicked!");
};
const handleParentClick = (event) => {
alert("Parent Clicked!");
};
 8. Activity Based Learning
const handleChildClick = (event) => {
alert("Child Clicked!");
};
return (
<div className="grandparent" onClick={handleGrandParentClick}>
<div className="parent" onClick={handleParentClick}>
<button className="child" onClick={handleChildClick}>
Click Me
</button>
</div>
</div>
);
};
export default EventBubble;
Step 3: Prevent Event BubblingModify the handleChildClick function to stop event
propagation:
const handleChildClick = (event) => {
event.stopPropagation(); // Prevents bubbling
alert("Child Clicked - Event Bubbling Stopped!");
};
Step 4: Style the Components (EventBubble.css)
.grandparent {
padding: 50px;
background-color: lightblue;
text-align: center;
}
 8. Activity Based Learning
.parent {
padding: 30px;
background-color: lightcoral;
}

.child {
padding: 10px 20px;
background-color: yellow;
border: none;
cursor: pointer;
}
Step 5: Discussion & Reflection
Before using stopPropagation()
▪ Clicking the button triggers alerts in the following order:
▪ Child Clicked
▪ Parent Clicked
▪ Grandparent Clicked
After adding stopPropagation()
▪ Clicking the button only triggers the Child Clicked alert.
 Lecture Notes

Unit IV - REACT LIBRARY - I

Event Bubbleup - Component Wrapper - Integration of CSS Modules -
Forms Validations(YUP, Formik, Standard), Events Handling, Data

Binding- Redux
 9. LECTURE NOTES
EVENT BUBBLEUP

In React, events can be "bubbled up" from child components to parent components. This
means that when an event occurs in a child component, it can be captured and handled
by a parent component. This behavior allows you to create complex interactions by
defining event handlers at various levels of your component tree.

For example, you might have a parent component that renders multiple child components,
and you want to handle a specific event that occurs in one of those child components at the
parent level.
You can achieve this by defining an event handler in the parent component and passing it
down to
the child component as a prop. When the event occurs in the child component, it can
trigger the event handler, which is defined in the parent component.

Here's a simplified example:

```javascript
import React from 'react';

function
ChildComponent(props) {
return (
<button onClick={props.onClick}>Click me</button>
);
}
function ParentComponent()

{ const handleButtonClick

= () => {

alert('Button clicked in child component');

};

return( <div>

<h1>Parent Component</h1>

<ChildComponent onClick={handleButtonClick} />

</div>

);

export default ParentComponent;

```
In this example, when you click the "Click me" button in the `ChildComponent`, the event
bubbles up to the `ParentComponent`, which handles the event by showing an alert.

This is a fundamental aspect of how React's component architecture and event

handling work, allowing you to create interactive and dynamic user interfaces.
Component Wrapper
In React and other component-based frameworks, a "Component Wrapper" is not a standard
or predefined term. However, the concept you might be referring to is commonly known as
a "Higher-Order Component" (HOC) or a "Wrapper Component.“

A Higher-Order Component (HOC) is a pattern in React where you can create a new
component that wraps another component. This higher-order component enhances or
modifies the behavior of the wrapped component. HOCs are often used for tasks like code
reuse, state management, or adding additional props to a component.
Here's a simple example of a higher-order component:
```jsx
import React from 'react';
// A higher-order component that adds a "loggedIn" prop to the wrapped component.
const withAuth = (WrappedComponent) => {
return class extends React.Component { constructor(props) {
super(props);
this.state = this.state{
loggedIn: false,
};
}
componentDidMount() {
// Simulate authentication logic setTimeout(() => {
this.setState({ loggedIn: true });
}, 2000);
}
render() {
// Pass the "loggedIn" prop to the wrapped component
return <WrappedComponent {...this.props} loggedIn={this.state.loggedIn} />;
} };
};
// Usage: Wrap a component with the withAuth HOC const Profile = ({ loggedIn }) => {
return (
<div>
{loggedIn ? (
<h1>Welcome to your profile!</h1>
):(
<h1>Please log in to view your profile.</h1>
)}
</div>
);
};
const ProfileWithAuth = withAuth(Profile);

};
};

// Usage: Wrap a component with the withAuth HOC const Profile = ({ loggedIn }) => {
return (
<div>
{loggedIn ? (
<h1>Welcome to your profile!</h1>
):(
<h1>Please log in to view your profile.</h1>
)}
</div>
);
};

const ProfileWithAuth = withAuth(Profile);

// Usage: Wrap a component with the withAuth HOC const Profile = ({ loggedIn }) => {
return (
<div>
{loggedIn ? (
<h1>Welcome to your profile!</h1>
):(
<h1>Please log in to view your profile.</h1>
)}
</div>
);
};

const ProfileWithAuth = withAuth(Profile);

export default ProfileWithAuth;

In this example, `withAuth` is a higher-order component that wraps the `Profile`
component. It adds a `loggedIn` prop to the `Profile` component based on some
authentication logic.

You can use higher-order components to encapsulate common functionality and apply it
to multiple components in your application, which promotes code reuse and
maintainability.

So, when you mention a "Component Wrapper," it's likely you are referring to this
concept of a higher-order component or a similar pattern where one component wraps
another to provide additional functionality or behavior.

Integration of CSS Modules

CSS Modules are a popular way to encapsulate CSS styles in a modular and scoped
manner when

building applications with frameworks like React. They help prevent style conflicts and
make it easier to maintain and organize your styles. Here's how you can integrate CSS
Modules into your React application:

Install the necessary dependencies:

To use CSS Modules in a React project, you'll typically need to install a build tool like
Webpack and the appropriate loaders. Here's an example using npm:

```bash

npm install --save-dev css-loader style-loader

```

These loaders are commonly used with Webpack to process CSS files and enable CSS
Modules.

Configure Webpack (if not already configured):

If you haven't set up Webpack in your React project, you'll need to create or update your
Webpack configuration to include the CSS Modules configuration. Here's a simplified
example:

```javascript

// webpack.config.js
module.exports = {

// ... module: {

rules: [

test: /\.js$/,

use: 'babel-loader', exclude: /node_modules/,

},

test: /\.css$/, use: [

'style-loader',

loader: 'css-loader', options: {

modules: {

localIdentName: '[name] [local]__[hash:base64:5]', // Customize the class name

format

},

},

},

],

},

],

},

// ...

};
In this example, we're using the `css-loader` with the `modules` option to enable CSS
Modules. The `localIdentName` option allows you to customize the format of the generated
class names.
Create CSS Module files:

In your project directory, create CSS files with the `.module.css` extension. For example,

`App.module.css`:

```css

/* App.module.css */

.header {

background-color: lightblue;

.button {

background-color: lightgreen;

Use CSS Modules in your React components:

Now, you can import and use CSS Modules in your React components:

```jsx

// App.js

import React from 'react';

import styles from './App.module.css'; // Import the CSS Module

function App() { return (

<div>

<header className={styles.header}>Header</header>

<button className={styles.button}>Click me</button>

</div> ); }

export default App;

In this example, we import the styles from `App.module.css` and use them as object
properties. These properties contain the generated class names, ensuring that styles
are scoped to the component.

That's the basic integration of CSS Modules into a React project. With this setup, you
can create modular and scoped CSS styles for your React components, making it
easier to manage styles in larger applications without worrying about global conflicts.

FORMS VALIDATIONS(YUP, Formik, Standard)

Form validation is an essential part of building web forms, ensuring that user input is
accurate and meets specific criteria. There are several libraries and approaches you
can use for form validation in JavaScript and React. Three popular options are YUP,
Formik, and standard React form validation techniques:

1.Yup:
Yup is a schema validation library often used with Formik to handle form validation in
React applications. It provides a simple and declarative way to define validation
schemas and validate data.
Installation :
You can install Yup and Formik using npm or yarn:
```bash
npm install yup formik # or
yarn add yup formik
```
Usage :
- Define validation schema using Yup:
- ```javascript
- import * as Yup from 'yup';
- const validationSchema = Yup.object({
- name: Yup.string().required('Name is required'),
- email: Yup.string().email('Invalid email').required('Email is required'),
- });
- Use Formik to handle form state and validation:

```javascript
import { Formik, Form, Field, ErrorMessage } from 'formik';
function MyForm() { return (
<Formik
initialValues={{ name: '', email: '' }} validationSchema={validationSchema}
onSubmit={(values) => {
// Handle form submission here
}}
>
<Form>
<div>
<label>Name</label>
<Field type="text" name="name" />
<ErrorMessage name="name" />
</div>
<div>
<label>Email</label>
<Field type="email" name="email" />
<ErrorMessage name="email" />
</div>
<button type="submit">Submit</button>
</Form>
</Formik>
);
}
2.Formik:
Formik is a form library for React that simplifies form handling, including form validation,
form submission, and form state management.
Installation :
Install Formik as shown in the previous example.
Usage :
Formik handles form validation, state, and submission, as demonstrated in the previous
example.
3.Standard React Form Validation :

You can also perform form validation in React without external libraries by using
controlled components and managing validation logic manually. Here's an example:

```javascript
import React, { useState } from 'react';

function MyForm() {
const [formData, setFormData] = useState({ name: '', email: '' }); const [errors,
setErrors] = useState({});

const handleChange = (e) => { const { name, value } = e.target;

setFormData({ ...formData, [name]: value });
};
const handleSubmit = (e) => { e.preventDefault();
// Validate the form data const newErrors = {};
if (!formData.name) {
newErrors.name = 'Name is required';
}
if (!formData.email) {
newErrors.email = 'Email is required';
}
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) {
// Form data is valid; proceed with submission
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name</label>
<input type="email" name="email" value={formData.email}
onChange={handleChange}
/>
{errors.email && <div>{errors.email}</div>}
</div>
<button type="submit">Submit</button>
</form>
);
}
In this example, we manage form state (`formData`) and validation errors (`errors`)
manually using React's state and event handling.

Each of these approaches has its advantages, and the choice depends on your
specific project requirements and preferences. YUP and Formik offer a more
structured and declarative way to handle validation, while standard React validation
gives you full control but requires more manual work.
Event handling is a crucial aspect of web development, allowing you to capture and
respond to user interactions with a web page. In this explanation, I'll provide a
detailed overview of event handling in JavaScript, including examples for common
events.
EVENT BASICS

An event is a signal that something has happened, such as a user clicking a button,
moving the mouse, or pressing a key.
Event handling involves writing code (event handlers) to respond to these events.
Adding Event Listeners:
Event listeners are functions that "listen" for specific events on DOM elements and
execute code when those events occur.
You can attach event listeners to DOM elements using JavaScript.
Example 1: Click Event

In this example, we'll attach a click event listener to a button element and display an
alert when the button is clicked.
```html
<!DOCTYPE html>
<html>
<body>
<button id="myButton">Click Me</button>
<script>
// Get the button element by its ID
const button = document.getElementById("myButton");
// Add a click event listener to the button button.addEventListener("click", function ()
{
alert("Button clicked!");
});
</script>
</body>
</html>
Example 2: Mouseover and Mouseout Events
In this example, we'll use the `mouseover` and `mouseout` events to change the
background color of a div when the mouse enters and leaves it.
```html
<!DOCTYPE html>
<html>
<style> #myDiv {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
<body>
<div id="myDiv">Hover over me</div>
<script>
const div = document.getElementById("myDiv");
div.addEventListener("mouseover", function () { div.style.backgroundColor =
"lightgreen";
});
div.addEventListener("mouseout", function () { div.style.backgroundColor =
"lightblue";
});
</script>
</body>
</html>
Example 3: Keydown Event

In this example, we'll use the `keydown` event to change the text of a paragraph
based on the key pressed.

```html
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph">Press a key.</p>

<script>
const paragraph = document.getElementById("myParagraph");

document.addEventListener("keydown", function (event) { paragraph.textContent =

`You pressed the key: ${event.key}`;
});
</script>
</body>
</html>
```
These examples demonstrate the basic principles of event handling in JavaScript. You
can attach event listeners to various DOM elements and respond to a wide range of
events, allowing you to create interactive and dynamic web applications. Event
handling is an essential part of web development and is used extensively to build
user-friendly interfaces.
DATA BINDING
Data binding is a fundamental concept in web development, especially in the context
of front-end frameworks like Angular, React, and Vue.js. It refers to the process of
establishing a connection or synchronization between the user interface (UI) and the
underlying data model. Data binding ensures that changes in one of these
components (UI or data) are automatically reflected in the other without requiring
manual updates. There are two main types of data binding:
One-Way Data Binding :
One-way data binding means that data flows in one direction: from the data source
to the UI. When the data changes, the UI is updated to reflect those changes, but
changes in the UI don't affect the data source. Here's an example:
```html
<!-- HTML template -->
<p>{{ message }}</p>
<!-- JavaScript data model -->
<script>
const data = {
message: "Hello, World!",
};
</script>
```
In this example, the value of `message` in the data model is displayed in the
paragraph element. If you were to update `data.message`, the paragraph's text
would automatically update to reflect the change.
Two-Way Data Binding :
Two-way data binding allows data to flow in both directions: from the data source to
the UI and from the UI back to the data source. Changes in the UI are synchronized
with the data model, and changes in the data model are reflected in the UI. This
type of binding is commonly used in form elements. Here's an example using
Angular:
```html
<!-- HTML template -->
<input [(ngModel)]="name" />
<!-- Angular component -->
<script>
import { Component } from "@angular/core";
@Component({ selector: "app-root", template: `

<input [(ngModel)]="name" />

<p>Hello, {{ name }}</p>

`,

})

export class AppComponent { name = "John";

</script>

```

In this example, the `[(ngModel)]` syntax allows you to bind the input field's value
(`name`) to the data model and vice versa. If you change the input field's value, the
`name` variable is updated, and if you update `name`, the input field reflects the
change.

The specific implementation and syntax of data binding can vary depending on the
framework or library you are using. Angular, for instance, has its own way of
handling data binding, as demonstrated in the example above. React typically uses
one-way data binding, and Vue.js provides a combination of both one-way and two-
way data binding depending on how you structure your components.

Overall, data binding is a powerful concept that simplifies the development of

interactive web applications by automating the synchronization of data and the user
interface. The choice of one- way or two-way data binding often depends on the
requirements of your application and the framework you are using.

React Redux

Redux is an open-source JavaScript library used to manage application state. React

uses Redux for building the user interface. It was first introduced by Dan Abramov
and Andrew Clark in 2015.
React Redux is the official React binding for Redux. It allows React components to
read data from a Redux Store, and dispatch Actions to the Store to update data.
Redux helps apps to scale by providing a sensible way to manage state through a
unidirectional data flow model. React Redux is conceptually simple. It subscribes to
the Redux store, checks to see if the data which your component wants have
changed, and re-renders your component.

Redux was inspired by Flux. Redux studied the Flux architecture and omitted
unnecessary complexity.

Redux does not have Dispatcher concept.

Redux has an only Store whereas Flux has many Stores.

The Action objects will be received and handled directly by Store.

Why use React Redux?

The main reason to use React Redux are:

• React Redux is the official UI bindings for react Application. It is kept up-to-date
with any API changes to ensure that your React components behave as expected.

• It encourages good 'React' architecture.

• It implements many performance optimizations internally, which allows to

components re-render only when it actually needs.

Redux Architecture
React Redux is the official React binding for Redux. It allows React components to
read data from a Redux Store, and dispatch Actions to the Store to update data.
Redux helps apps to scale by providing a sensible way to manage state through a
unidirectional data flow model. React Redux is conceptually simple. It subscribes to
the Redux store, checks to see if the data which your component wants have
changed, and re-renders your component.

Redux was inspired by Flux. Redux studied the Flux architecture and omitted
unnecessary complexity.

Redux does not have Dispatcher concept.

Redux has an only Store whereas Flux has many Stores.

The Action objects will be received and handled directly by Store.

Why use React Redux?

The main reason to use React Redux are:

• React Redux is the official UI bindings for react Application. It is kept up-to-date
with any API changes to ensure that your React components behave as expected.

• It encourages good 'React' architecture.

• It implements many performance optimizations internally, which allows to

components re-render only when it actually needs.

Redux Architecture

The components of Redux architecture are explained below.

STORE: A Store is a place where the entire state of your application lists. It manages
the status of the application and has a dispatch(action) function. It is like a brain
responsible for all moving parts in Redux.

ACTION: Action is sent or dispatched from the view which are payloads that can be
read by Reducers. It is a pure object created to store the information of the user's
event. It includes information such as type of action, time of occurrence, location of
occurrence, its coordinates, and which state it aims to change.
REDUCER: Reducer read the payloads from the actions and then updates the store
via the state accordingly. It is a pure function to return a new state from the initial
state.

Redux Installation

Requirements: React Redux requires React 16.8.3 or later version.

To use React Redux with React application, you need to install the below command.

1.$ npm install redux react-redux --save

React Redux Example

In this section, we will learn how to implements Redux in React application. Here,
we provide a simple example to connect Redux and React.
Step-1 Create a new react project using create-react-app command. I choose
the project name: "reactproject." Now, install Redux and React-Redux.
javatpoint@root:~/Desktop$ npx create-react-app reactproject
javatpoint@root:~/Desktop/reactproject$ npm install redux react-redux --
save

Step-2 Create Files and Folders

In this step, we need to create folders and files for actions, reducers,
components, and containers. After creating folders and files, our project looks like
as below image.
Step-3 Actions

It uses 'type' property to inform about data that should be sent to the Store. In this
folder, we will create two files: index.js and index.spec.js. Here, we have created an
action creator that returns our action and sets an id for every created item.

Index.js
let nextTodoId = 0
export const addTodo = text => ({
type: 'ADD_TODO',
id: nextTodoId++,
text
})

export const setVisibilityFilter = filter => ({

type: 'SET_VISIBILITY_FILTER',
filter
})

export const toggleTodo = id => ({

type: 'TOGGLE_TODO',
id
})

export const VisibilityFilters = {

SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE'
}
Index.spec.js
import * as actions from './index’
describe('todo actions', () => {
it('addTodo should create ADD_TODO action', () => {
expect(actions.addTodo('Use Redux')).toEqual({
type: 'ADD_TODO',
id: 0,
text: 'Use Redux'
})
})
it('toggleTodo should create TOGGLE_TODO action', () => {
expect(actions.toggleTodo(1)).toEqual({
type: 'TOGGLE_TODO',
id: 1
})
})
})

Step-4 Reducers
As we know, Actions only trigger changes in the app, and the Reducers specify
those changes. The Reducer is a function which takes two parameters 'Action' and
'State' to calculate and return an updated State. It read the payloads from the
'Actions' and then updates the 'Store' via the State accordingly.
In the given files, each Reducer managing its own part of the global State. The
State parameter is different for every Reducer and corresponds to the part of the
'State' it manages. When the app becomes larger, we can split the Reducers into
separate files and keep them completely independent and managing different data
domains.
Here, we are using 'combineReducers' helper function to add any new Reducers we
might use in the future.
index.js
import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'
export default combineReducers({
todos,
visibilityFilter
})

Todos.js
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
case 'TOGGLE_TODO':
return state.map(todo =>
(todo.id === action.id)
? {...todo, completed: !todo.completed}
: todo
)
default:
return state
}
}
export default todos
Todos.spec.js
import todos from './todos'
describe('todos reducer', () => {
it('should handle initial state', () => {
expect(
todos(undefined, {})
).toEqual([])
})

it('should handle ADD_TODO', () => {

expect(
todos([], {
type: 'ADD_TODO',
text: 'Run the tests',
id: 0
})
).toEqual([
{
text: 'Run the tests',
completed: false,
id: 0
}
])
expect(
todos([
{
text: 'Run the tests',
completed: false,
id: 0
}
], {
type: 'ADD_TODO',
text: 'Use Redux',
id: 1
})
).toEqual([
{
text: 'Run the tests',
completed: false,
id: 0
}, {
text: 'Use Redux',
completed: false,
id: 1
}
])
expect(
todos([
{
text: 'Run the tests',
completed: false,
id: 0
}, {
text: 'Use Redux',
completed: false,
id: 1
}
], {
type: 'ADD_TODO',
text: 'Fix the tests',
id: 2
})
).toEqual([
{
text: 'Run the tests',
completed: false,
id: 0
}, {
text: 'Use Redux',
completed: false,
id: 1
}, {
text: 'Fix the tests',
completed: false,
id: 2
}
])
})
it('should handle TOGGLE_TODO', () => {
expect(
todos([
{
text: 'Run the tests',
completed: false,
id: 1
}, {
text: 'Use Redux',
completed: false,
id: 0
}
], {
type: 'TOGGLE_TODO',
id: 1
})
).toEqual([
{
text: 'Run the tests',
completed: true,
id: 1
}, {
 text: 'Use Redux',
completed: false,
id: 0
}
])
})
})

VisibilityFilter.js
import { VisibilityFilters } from '../actions'

const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {

switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
export default visibilityFilter

Step-5 Components
It is a Presentational Component, which concerned with how things look such as
markup, styles. It receives data and invokes callbacks exclusively via props. It does
not know where the data comes from or how to change it. It only renders what is
given to them.
App.js
It is the root component which renders everything in the UI.
import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo’
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
export default App

Footer.js
It tells where the user changes currently visible todos.
import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'

const Footer = () => (

<p>
Show: <FilterLink filter={VisibilityFilters.SHOW_ALL}>All</FilterLink>
{', '}
<FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>Active</FilterLink>
{', '}
<FilterLink filter={VisibilityFilters.SHOW_COMPLETED}>Completed</FilterLink>
</p>
)
export default Footer
Link.js
It is a link with a callback.
import React from 'react'
import PropTypes from 'prop-types'

const Link = ({ active, children, onClick }) => {

if (active) {
return <span>{children}</span>
}
return (
<a
href=""
onClick={e => {
e.preventDefault()
onClick()
}}
>
{children}
</a>
)
}

Link.propTypes = {
active: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired
}
export default Link
Todo.js
It represents a single todo item which shows text.
import React from 'react'
import PropTypes from 'prop-types'
const Todo = ({ onClick, completed, text }) => (
<li
onClick={onClick}
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
>
{text}
</li>
)
Todo.propTypes = {
onClick: PropTypes.func.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}

export default Todo

TodoList.js
It is a list to show visible todos{ id, text, completed }.
import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) => (

<ul>
{todos.map((todo, index) => (
<Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
))}
</ul>
)
TodoList.propTypes = {
todos: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
completed: PropTypes.bool.isRequired,
text: PropTypes.string.isRequired
}).isRequired
).isRequired,
onTodoClick: PropTypes.func.isRequired
}
export default TodoList
AddTodo.js
It contains the input field with an ADD (submit) button.
import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
const AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}>
<input ref={node => input = node} />
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
export default connect()(AddTodo)
FilterLink.js
It represents the current visibility filter and renders a link.
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case VisibilityFilters.SHOW_ALL:
return todos
case VisibilityFilters.SHOW_COMPLETED:
return todos.filter(t => t.completed)
case VisibilityFilters.SHOW_ACTIVE:
return todos.filter(t => !t.completed)
default:
throw new Error('Unknown filter: ' + filter)
}
}

const mapStateToProps = state => ({

todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

const mapDispatchToProps = dispatch => ({

toggleTodo: id => dispatch(toggleTodo(id))
})

export default connect(

mapStateToProps,
mapDispatchToProps
)(TodoList)
Step-7 Store
All container components need access to the Redux Store to subscribe to it. For
this, we need to pass it(store) as a prop to every container component. However, it
gets tedious. So we recommend using special React Redux component calledwhich
make the store available to all container components without passing it explicitly. It
used once when you render the root component.
index.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App’
import rootReducer from './reducers'

const store = createStore(rootReducer)

render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)

Output
When we execute the application, it gives the output as below screen.
 10. ASSIGNMENT – 1 To 5

1) ReactJS Form Validation using Formik and Yup packages is one good

approach for form validation. we can validate forms using controlled

components. But it may be time-consuming and the length of the code

may increase if we need forms at many places on our website. Formik is

designed to manage forms with complex validation with ease. Formik

supports synchronous and asynchronous form-level and field-level

validation. (CO3,K3)

Step 1: Creating React Application And Installing Module:

Step 2: After creating your project folder i.e.react-form, move to it using the following

command:

Step 3: Install the required packages

https://www.geeksforgeeks.org/reactjs-form-validation-using-formik-and-yup/

2) Create a small example where initially have a simple form and then

implement Formik. (CO3,K3)

https://dev.to/franciscomendes10866/react-form-validation-with-formik-and-yup-3676
3) For the demo, you will build a basic registration form with validations and

basic CSS styling (see the image below) nothing too fancy. (CO3,K3)

Prerequisites

Before we dive into the implementation, let’s ensure we have everything set up correctly.

To follow along with this tutorial, you’ll need the following:

Basic knowledge of React and TypeScript.

A working React project with TypeScript support.

Installation of required dependencies:

React: ^16.8.0 or later

Formik: ^2.2.0 or later

Yup: ^0.32.1 or later

https://olaishola.medium.com/mastering-form-validation-in-react-with-

formik-and-yup-with-typescript-9dc4b3885538
4) GitHub User Search: (CO4,K3)

In this project, you will use an input's value to search for users in GitHub using their

username or email.

How to build it

❑ You will first store the value typed into the input in a state value called query. After

that, you will perform an HTTP request to a GitHub API endpoint to then fetch the

users' profile which once again uses the browser fetch API. The request URL will use

the input value.

❑ Once the results are fetched, we'll see how to display all the relevant info such as

their name, avatar, and a link to go to their profile.

❑ A good way to extend this project would be to attempt to allow search functionality as

the user types instead of having to submit the form first. Make sure to use a

debounce function to ensure that you do not too many requests to the GitHub API

and get a 429 error response (too many requests).

5) A news app: (CO5,K3)

This allows users to browse articles from various sources and save their favorites for later.

This project can be implemented using React and the NewsAPI to fetch news articles. To

show the list of articles, students can use the useEffect hook to fetch the data when the

component mounts and the Javascript map method to render a list of article items. To allow

users to select a source, students can use the useState hook to store the selected source in

the component’s state and render a dropdown menu with the available sources. To save an

article, students can use the useContext hook and the Context API to create a context for

storing and updating the list of favorite articles.

 11. PART-A : QUESTIONS AND ANSWERS

1.What is event bubbling in JavaScript? (CO3,K2)

Event bubbling is the phase in the event propagation process where an event travels from the
target element to its ancestor elements in the DOM hierarchy.

2.How can you stop event propagation in JavaScript? (CO3,K2)

You can stop event propagation using the `event.stopPropagation()` method.

3.Explain the difference between event bubbling and event capturing. (CO3,K2)
Event bubbling goes from the target element to its ancestors, while event capturing goes from
the top of the DOM hierarchy down to the target.

4.What is a component wrapper in the context of React? (CO4,K2)

A component wrapper is a higher-order component (HOC) or a parent component that wraps
another component, enhancing or modifying its behavior.

5.What is the primary purpose of using component wrappers in React? (CO4,K2)

Component wrappers are used to encapsulate and reuse functionality, state, or behavior
across multiple components.

6.What are CSS Modules, and why are they used? (CO4,K2)
CSS Modules are a way to scope CSS styles to specific components, preventing style conflicts in
large web applications.

7.How do you define and use CSS Modules in a React application? (CO4,K2)
CSS Modules are defined by creating CSS files with the `.module.css` extension and then
importing and using them as objects in JavaScript.

8. What is the purpose of form validation in web applications? (CO5,K2)

Form validation ensures that user input is accurate and meets specified criteria,
enhancing data quality and user experience.

9. Name a popular library for form validation in React. (CO5,K2)

Formik is a widely used library for handling forms and form validation in React
applications.
10.How does Yup help with form validation? (CO4,K2)
Yup is a schema validation library that provides a declarative way to define validation rules for
form fields.

11.What are events in JavaScript? (CO4,K2)

Events in JavaScript represent user actions or occurrences on a web page, such as clicks,
key presses, and mouse movements.

12.Give an example of a commonly used DOM event. (CO4,K2)

The "click" event is commonly used to respond to a user clicking on an element.

13.How can you prevent the default behavior of an event in JavaScript? (CO4,K2)
You can prevent the default behavior of an event using the `event.preventDefault()`
method.

14. What is data binding in web development? (CO4,K2)

Data binding is the process of synchronizing data between the user interface (UI) and the
underlying data model.

15.Explain one-way data binding in the context of web development. (CO4,K2)

One-way data binding means that data flows from the data source to the UI but not in the
reverse direction.

16.What is the significance of two-way data binding in frontend development?

(CO4,K2)
Two-way data binding simplifies UI state management by automatically synchronizing changes
between the UI and data model, enhancing interactivity and responsiveness.

These questions cover a range of topics related to event handling, component wrappers,
CSS Modules, form validations, event handling, and data binding in web development.

17.What is the default behavior of an event in JavaScript when it reaches the

top-level document element? (CO4,K2)
The default behavior is that events bubble up from the target element to the top- level
document element (HTML or document), unless explicitly stopped.
18.How can you add event listeners during the capturing phase in JavaScript?
(CO4,K2)
You can add event listeners during the capturing phase by passing `true` as the third
parameter to the `addEventListener` method.

19.Why is event delegation a useful technique in event handling? (CO4,K2)

Event delegation is useful because it allows you to attach a single event listener to a common
ancestor element, reducing the number of event listeners and improving performance.

20.In React, what is the main advantage of using component wrappers (HOCs)?
(CO4,K2)
The main advantage is the ability to share and reuse behavior and state logic among
multiple components without duplicating code.

21.Provide an example scenario where you might use a component wrapper in a

React application. (CO4,K2)
You might use a component wrapper to add authentication logic to multiple protected
routes in a web app.

22.How do CSS Modules help avoid naming conflicts in CSS styles? (CO4,K2)
CSS Modules generate unique class names for each component, ensuring that styles don't
clash with styles from other components.

23.What is the naming convention for CSS Modules class names? (CO4,K2)
The naming convention typically includes a combination of the original class name, a hash, and
component-specific information to make it unique.

24. Explain the role of Yup in form validation with Formik. (CO5,K2)
Yup is used to define validation schemas for form fields in Formik, providing a powerful and
flexible way to validate user input.

25.What is server-side validation, and why is it essential in web forms? (CO4,K2)

Server-side validation is validation logic performed on the server to ensure data integrity and
security, complementing client-side validation.

26.Differentiate between the "keydown" and "keyup" events in JavaScript. (CO4,K2)

The "keydown" event occurs when a key is pressed down, while the "keyup" event occurs when a
27.What is event delegation, and why is it useful in managing events? (CO4,K2)
Event delegation is a technique where a single event handler is placed on a common
ancestor element to handle events for multiple child elements. It's useful for reducing the
number of event listeners and improving efficiency.

28. In two-way data binding, how are changes in the UI propagated back to the data

model? (CO4,K2)
Changes in the UI are automatically reflected in the data model, ensuring synchronization
in both directions.

29.What is the primary advantage of one-way data binding in React? (CO5,K2)

One-way data binding simplifies the flow of data, making it easier to understand and debug,
especially in large applications.

30.How does data binding enhance the user experience in web applications? (CO5,K2)
Data binding enhances the user experience by providing real-time updates to the UI based on
changes in the underlying data, creating dynamic and interactive web applications.
 12. PART B : QUESTIONS
Q. CO
Questions K Level
No. Level
Explain the concept of event bubbling in JavaScript and its
1 significance in event handling. Provide examples to CO3 K2
illustrate how event bubbling works.

Discuss the use of component wrappers, also known

as Higher-Order Components (HOCs), in modern
2 CO3 K2
frontend development. How do they promote code
reusability and maintainability in React applications?

Describe the benefits of using CSS Modules

for styling in web development. Explain how
3 CO4 K2
CSS Modules help prevent naming conflicts
and improve code organization

Compare and contrast three approaches to form

validation in React: standard validation techniques,
4 CO4 K3
Formik, and Yup. Highlight the strengths and

weaknesses of each approach.

Define event delegation and provide real-world

scenarios where it is advantageous in managing events
5 CO4 K2
in web applications. Discuss the potential performance
benefits.
Explore the concept of two-way data binding in
modern frontend frameworks like Angular and
6 CO4 K2
Vue.js. Explain how it simplifies UI state
management and enhances user interactivity.

Discuss the significance of data binding in web

7 development. How does data binding contribute to CO4 K2
creating responsive and dynamic user interfaces?
8 Explore advanced use cases for form validation in CO4 K2

React applications using Formik and Yup. Illustrate how

these libraries can handle complex validation scenarios

9 Share practical examples where event bubbling and event CO4 K2

delegation are used effectively in real-world web

applications. Discuss the benefits and considerations of

these techniques.

10 Explain how developers can customize naming

conventions in CSS Modules to align with their project

CO5 K3
requirements. Provide examples of when custom naming

conventions might be useful.

 13. SUPPORTIVE ONLINE CERTIFICATION COURSES

• React Basics - coursera

https://www.coursera.org/learn/react-basics

• Udemy: "React - The Complete Guide (incl

Hooks, React Router, Redux)" by Maximilian
Schwarzmüller:

https://www.udemy.com/course/react-the-complete-
guide-incl-redux/learn/

• Edx: "CS50’s Web Programming with Python

and JavaScript" by Harvard University:

https://cs50.harvard.edu/web/2020/

62
 14. REAL TIME APPLICATIONS

1) A WEB APPLICATION PROVIDING RANGE OF OPTIONS TO CAR BUYERS

Car selling website is where the customer can buy and sell their car. This website is
user friendly and ease to use for any customer, it has effective search box to get the
precise and suitable car for the user. A rich search facility is always there from where
customer can search vehicle via category, keywords, price range, brand, types, fuel
types, etc. The website displays information of the customer support person on the
homepage so that user can directly contact them or meet them which help in
decreasing the communication gap. This website also provides a facility for road side
assistance. The social media plugin will help the company to know their popularity
over the social media.

2) PLAY YOUR FANTASY SPORTS ONLINE USING WEB APPLICATION

This application is developed for users who are interested in playing fantasy sports
online. Users can play fantasy sports with close friends or people you met over the
internet. Users can create their own leagues and can invite friends to play in their
league or they can play in others leagues. Users can easily change the league size,
payment deadlines, payout verifications and payout timelines. This system guarantee
the professional safekeeping of the funds through full-featured security measures.
User can withdraw funds from their account. User can refer a friend to play a
particular league.

3) BOOTSTRAP & RESPONSIVE DESIGN

Responsive web design is a way of making a single website that works effectively on
both desktop browsers and the myriad of mobile devices on the market. It involves
having a website that enhances the viewing experience, irrespective of which device
is being used. Bootstrap makes the front-end web development faster and easier. It is
made for the users of all skill levels, devices of all shapes and projects of all sizes. It is
considered the most popular HTML, CSS, and JavaScript framework for developing
responsive & mobile-first websites. With a responsive website design, you don't have
to have worry about having different websites for various devices or making sure that
your website runs properly on a mobile device.
 14. REAL TIME APPLICATIONS

At Spaculus, we can incorporate your new website design or we modify it and make it
responsive if you already own a website. Our team of experts uses various tools and
technologies to make your website more accessible such as media queries, flexible
grid based layouts that use re-sizing and flexible images & media.

4) Navigating the Internet

HTML is an essential element in navigating between web pages. Navigation is possible
using the hypertext concept. The linking is also simpler. From the internet user’s point
of view, they click on a text which takes them to the next page. HTML facilitates
navigation by hyperlinking with the help of an anchor tag.
<a href="geeksforgeeks.org"> Click here to open! </a>Navigation can increase
visitors to a website. It increases user activity on the website. It also helps the web
user to look at the content structure and organization.

5)Storage Function in the Browser

Storage of data in the browser was tedious in the past. For a user to save the data of
the browser that persists between two sessions, the user’s cookies or infrastructure is
to be built from the server end. This process has now been eased with
HTML5. HTML5 has roped in new features. Such storage features are localStorage
and IndexDB.
The web storage objects window.localStorage and window.sessionStorage store data
with no expiration date and storage for one session respectively. The localStorage
object will have the data saved even when the browser is closed. setItem and
removeItem are the functions commonly used to store and remove data from the
storage. Also, the most important part is that these features are supported by all
browsers.

To Store – localStorage.setItem(“username”, “Nisha”);

To Retrieve – document.getElementById(“result”).innerHTML =
localStorage.getItem(“username”);
To Remove – localStorage.removeItem(“username”);
 15. CONTENT BEYOND SYLLABUS
Middleware in Redux – Enhancing State Management
What is Middleware in Redux?
Middleware in Redux is a function that sits between the action dispatch and the
reducer. It allows us to intercept, modify, or delay actions before they reach the
store. Middleware is widely used for logging, handling asynchronous API calls, and
debugging Redux applications.
Why Use Middleware?
Asynchronous Actions – Middleware like redux-thunk and redux-saga help handle
API calls in Redux.
Logging & Debugging – Middleware such as redux-logger helps track dispatched
actions.
Authorization & Validation – Middleware can check user permissions before
updating the store.
Example: Custom Logger Middleware:
Let’s create a simple custom middleware that logs every dispatched action and the
updated state.
Example 1:
Using a Simple Auxiliary Component:

jsx

const Aux = (props) => props.children;

export default Aux;

const loggerMiddleware = (store) => (next) => (action) => {

console.log("Dispatching action:", action);

let result = next(action);

console.log("Updated State:", store.getState());

return result;

};
65
 15. CONTENT BEYOND SYLLABUS
This function takes three arguments: store, next (calls the next

middleware), and action.

It logs the action before passing it to the reducer.

Finally, it logs the updated state after the action is processed.

How to Apply Middleware in Redux?

import { createStore, applyMiddleware } from "redux";

import rootReducer from "./reducers";

const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

export default store;

Now, every action dispatched will be logged in the console, helping with debugging.

Popular Middleware in Redux

1️⃣ Redux Thunk – Handles asynchronous actions.

2️⃣ Redux Saga – More powerful alternative to Thunk, using generators.

3️⃣ Redux Logger – Logs dispatched actions and state changes.

4️⃣ Redux Persist – Saves Redux state to local storage.

66
 16. ASSESSMENT SCHEDULE

• Tentative schedule for the Assessment During

2024-2025 Even Semester

Name of the
S.NO Start Date End Date Portion
Assessment
As per schedule after
1 Unit Test 1 UNIT 1
Unit I completion
2 IAT 1 28.01.2025 03.02.2025 UNIT 1 & 2

As per schedule after

3 Unit Test 2 UNIT 3
Unit III completion

4 IAT 2 10.03.2025 15.03.2025 UNIT 3 & 4

5 Model 03.04.2025 17.04.2025 ALL 5 UNITS

163

67
 17. PRESCRIBED TEXT BOOKS
&
REFERENCE BOOKS
TEXT BOOKS:

JAVASCRIPT THE DEFINITIVE GUIDE 7/ED Paperback – 15 June 2020

Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17
with Hooks and GraphQL Paperback – Import, 18 December 2020

Advanced Web Development with React Paperback – 1 January 2020

REFERENCES:

PARENTAL WEBSITE - https://reactjs.org/

The Road to Learn React: Your journey to master plain yet pragmatic React.js by Robin
Wieruch

Learning React: Functional Web Development with React and Redux by Alex Banks and Eve
Porcello

Learning React by Kirupa Chinnathambi

"React Up & Running" by Stoyan Stefanov

https://www.edureka.co/reactjs-redux-certification-training

ONLINE LEARNING PLATFORMS :

CodePen,

CodeSandbox (ß Preferred)

Stackblitz.
 18. MINI PROJECT SUGGESTION
An e-commerce website built using React and Typescript, where we can filter clothes
products using their customer preferred sizes as M, L or XL etc. We have a button called
“Add to cart” below each product shown on the web page, once user selects any product,
it will go to cart. At the end it can be used to checkout. These terms must be familiar to
everyone now-a-days since it tries to mock popular e-commerce websites like Amazon,
Flipkart and Myntra etc.

Try here: https://react-shopping-cart-67954.firebaseapp.com/ Complete

Code: https://github.com/jeffersonRibeiro/react-shopping- cart

1) E-COMMERCE SITE (CO4,K3)

An e-commerce site allows users to browse and search for products, add them to a cart,
and check out using a dummy payment system. To build this app, you can create
a Product component that represents a single product and a ProductList component that
contains a list of Product components. The Product component should accept
information about the product, such as its name, price, and image, and render it along
with a Add to cart button. The ProductList component should accept an array of
products and render a Product component for each. You can also create
a Cart component that displays the items in the user’s cart and allows them to remove
items or check out.

2) DIARY (CALENDAR) APP: (CO4,K3)

A calendar app allows users to view, add, and edit events in a calendar. To build this
app, you can create a Calendar component that displays the current month and year and
the days of the week. You can then create an Event component representing a single
event and an EventList component containing a list of Event components. The Event
component should accept information about the event, such as its name, date, and
time, and render this information in a user-friendly way. The EventList component
should accept an array of events and render an Event component for each. You can also
add features such as switching between months and viewing events
for specific dates.
 18. MINI PROJECT SUGGESTION

3) WEATHER APP (CO4,K3)

A weather app shows the current weather for a given location. To build this app, you can
use the OpenWeatherMap API to fetch weather data for a given location. You can then
create a Weather component that accepts a location and displays the current temperature,
humidity, and other relevant information for that location. You can also add a search form
that allows users to enter a location and see the current weather for that location.

4) A RECIPE APP (CO4,K3)

A recipe app allows users to search for recipes and save their favorites. To build this app,
you can use the Spoonacular API to fetch recipe data. You can then create
a Recipe component representing a single recipe and a RecipeList component containing a
list of Recipe components. The Recipe component should accept information about the
recipe, such as its name, ingredients, and instructions, and render this information user-
friendly. The RecipeList component should accept an array of recipes and render
a Recipe component for each. You can also add a search form that allows users to enter a
keyword and see a list of matching recipes.

5) A TASK MANAGER APP (CO4,K3)

This allows users to create and track tasks, set deadlines, and organize them into different
categories. This project can be implemented using React, React Hooks for state
management, and CSS for styling. To create tasks, students can use the useState hook to
store the list of tasks in the component’s state and render an input field where users can
enter their task description. To set deadlines, students can use the DatePicker component
from the react-datepicker library to allow users to select a date for their task.
 Thank you

Disclaimer:
This document is confidential and intended solely for the educational purpose of RMK Group of
Educational Institutions. If you have received this document through email in error, please notify the
system manager. This document contains proprietary information and is intended only to the
respective group / learning community as intended. If you are not the addressee you should not
disseminate, distribute or copy through e-mail. Please notify the sender immediately by e-mail if you
have received this document by mistake and delete this document from your system. If you are not
the intended recipient you are notified that disclosing, copying, distributing or taking any action in
relianceon the contentsof this informationis strictlyprohibited.