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.
 22IT403
WEB DEVELOPMENT FRAMEWORKS (REACT)

Batch / Year / Semester: 2022-2026 / II / 4

Name of the Faculty

Dr. S. RADHIKA,
Professor-IT, RMKEC

Ms. M. KANNIGA PARAMESHWARI,

Assistant Professor-IT, RMKEC

4
 1. CONTENTS

S.NO. CONTENTS PAGE NO

1 Contents 5

2 Course Objectives 6
7
3 Pre Requisites
4 Syllabus 8

5 Course Outcomes 11

6 CO- PO/PSO Mapping 12

7 Lecture Plan 13

8 Activity Based Learning 14

9 Lecture Notes 15

10 Assignments 115

11 Part A Questions & Answers 116

12 Part B Questions 132

13 Supportive Online Certification Courses 133

Real time Applications in day to day life and to 134

14
Industry
15 Contents Beyond the Syllabus 135
136
16 Assessment Schedule
17 Prescribed Text Books & Reference Books 137

18 Mini Project Suggestions 138

 2. COURSE OBJECTIVES

∙ 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
 3. PRE REQUISITES

22IT403 Web Development Frameworks

(React)

22CS102 Software Development Practices

6
 4. Syllabus
WEB DEVELOPMENT FRAMEWORKS (React) L P T C
22IT403
(Theory Course with Laboratory Component) 3 2 0 4

OBJECTIVES:
∙ 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

UNIT I ADVANCED JAVASCRIPT 15

Introduction to HTML5 and CSS3, Media Queries, JS, DOM, BootStrap, Variables, Loops, Operators,
Scope, Hoisting, Arrays, Spread, REST, DeStructuring

UNIT II INTRODUCTION TO REACTJS 15

Class - Inheritance, Methods, Extended Class-Map, filter and Reduce Functions, Functions - Arrow
Functions, Lambda Expressions , REST - Introduction, Why JSX, Hello World Apps, Project
Structure

UNIT III REACT COMPONENTS AND HOOKS 15

Class vs Functional Components, React Class Based Components - componentDidMount,
WillUpdate, shouldupate, didcatch etc - 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

UNIT IV REACT LIBRARY - I 15

Event Bubbleup - Component Wrapper - Integration of CSS Modules - Forms Validations(YUP,

Formik, Standard), Events Handling, Data Binding
 UNIT V REACT LIBRARY - II 15
Custom Hooks, HTTP - Fetch, Axios, 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

Indicative List of 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

Spread Operator
Merge Customer and Account Arrays
Update the Customer Object with the new values
Develop a function that takes an Spread Argument and calculates total balance.

2) Create a list of Bank Objects (same kind of object you used in above lab, but in a 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

3) Create a collection of Customer by using

Weak Map and Map Collection in JS
Show Case the different feature set of the same.
Add Login Page, Dash Board Page, Admin Page
Enable React Routing
Add React Protected Route, for authorization

4) 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

5) Employ back end 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 back end api
Employ useref, useeffect & usestate, and useHistory
Enable Exception Handling
Enable HOC and Aux Components
Implement React-Testing Library

Business Use Case Implementations

Student Management System

Retail Bank System
eCommerce System
Student LMS Management System

TOTAL: 45+30 = 75 PERIODS

 OUTCOMES:
At the end of this course, the students will be able to:

CO1: Personalize web pages using text formatting, graphics, audio, and
video. CO2: Hands on knowledge on Rest API , propTypes
CO3: Able to develop a web application using latest React Framework
CO4: Apply various React features including functions, components, and
services. CO5: Able to develop application using ReactJs hooks .

TEXT BOOKS:
1. JAVASCRIPT THE DEFINITIVE GUIDE 7/ED Paperback – 15 June 2020
2. Full-Stack React, TypeScript, and Node: Build cloud-ready web
applications using React 17 with Hooks and GraphQL Paperback
– Import, 18 December 2020
3. Advanced Web Development with React Paperback – 1 January 2020

REFERENCES:

PARENTAL WEBSITE - https://reactjs.org/

1. The Road to Learn React: Your journey to master plain yet

pragmatic React.js by Robin Wieruch
2. Learning React: Functional Web Development with React and
Redux by Alex Banks and Eve Porcello
3. Learning React by Kirupa Chinnathambi
4. "React Up & Running" by Stoyan Stefanov
5. https://www.edureka.co/reactjs-redux-certification-training

ONLINE LEARNING PLATFORMS :

1. CodePen,
2. CodeSandbox (ß Preferred)
3. Stackblitz.
5. Course Outcomes

COURSE OUTCOMES HKL

CO1 Personalize web pages using text formatting, graphics, K3

audio, and video.

CO2 Hands on knowledge on Rest API , propTypes. K6

CO3 Able to develop a web application using latest K3

React Framework.

CO4 Apply various React features including K6

functions, components, and services

CO5 Able to develop application using ReactJs hooks K6

Knowledge Level Description

K6 Evaluation

K5 Synthesis

K4 Analysis

K3 Application

K2 Comprehension

K1 Knowledge

11
6. CO-PO/PSO
Mapping
CO PROGRAM OUTCOMES PSO
CO ATTAI P P
PO PO PO PO PO PO PO PO PO PO PO PO PS S S
NMENT O O
1 2 3 4 5 6 7 8 9 1 1 12 O
1 2 3
0 1

CO1 1 3 3 3 1 1 1 - - 2 1 2 1 - - -

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

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

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

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

CO 3 3 3 1 2 1 - 1 2 1 2 1 - - -

12
 Lecture
Notes
Unit IV - REACT LIBRARY - I

Event Bubbleup - Component Wrapper - Integration of CSS Modules -

Forms Validations(YUP, Formik, Standard), Events Handling, Data
Binding
 8. ACTIVITY BASED LEARNING – UNIT III

The basic idea is that the game will present the user with a grid of randomly
appearing balloons, and the objective is to pop them to earn points. Each
successful balloon pop will reward the player with five points:

Check out this live CodePen demo to preview what you will build. Or, explore the
complete code from the GitHub repo of this project.
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 = {
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>
);
};
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:

1. 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.

2. 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.

3. 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;
}
```

4. 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="text" name="name" value={formData.name} onChange={handleChange} />
{errors.name && <div>{errors.name}</div>}
</div>
<div>
<label>Email</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:

1. 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.

2. 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.
 16. ASSESSMENT SCHEDULE
Tentative schedule for the Assessment During 2023-2024 Odd
semester

S.NO Name of Start Date End Date Portion

the
Assessment

1 Unit Test 1 - - UNIT 1

2 IAT 1 09.08.2023 15.08.2023 UNIT 1 & 2

3 Unit Test 2 - - UNIT 3

4 IAT 2 26.10.2023 01.11.2023 UNIT 3 & 4

5 Revision 1 UNIT 5 , 1 &

2

6 Revision 2 - - UNIT 3 & 4

7 Model 15.11.2023 25.11.2023 ALL 5 UNITS

 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

ONLINE LEARNING PLATFORMS

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

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
 PART-A QUESTIONS AND ANSWERS

Event Bubbling:

1. What is event bubbling in JavaScript?

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?

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

3. Explain the difference between event bubbling and event capturing.

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.

Component Wrapper:

4. What is a component wrapper in the context of React?

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?

Component wrappers are used to encapsulate and reuse functionality, state,

or behavior across multiple components.

Integration of CSS Modules:

6. What are CSS Modules, and why are they used?

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?

CSS Modules are defined by creating CSS files with the `.module.css` extension
and then importing and using them as objects in JavaScript.
 Forms Validations (Yup, Formik, Standard):

8. What is the purpose of form validation in web applications?

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.

Formik is a widely used library for handling forms and form validation in

React applications.

10. How does Yup help with form validation?

Yup is a schema validation library that provides a declarative way to define

validation rules for form fields.

Events Handling:

11. What are events in JavaScript?

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.

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?
You can prevent the default behavior of an event using the
`event.preventDefault()` method.

Data Binding:

14. What is data binding in web development?

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.

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

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

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.

Event Bubbling:

7.What is the default behavior of an event in JavaScript when it reaches the top-level
document element?
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?
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?

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.

Component Wrapper:

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

1.Provide an example scenario where you might use a component wrapper in a React
application.
 Integration of CSS Modules:

22. How do CSS Modules help avoid naming conflicts in CSS styles?
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?
The naming convention typically includes a combination of the original class
name, a hash, and component-specific information to make it unique.

Forms Validations (Yup, Formik, Standard):

24. Explain the role of Yup in form validation with Formik.

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?

Server-side validation is validation logic performed on the server to ensure

data integrity and security, complementing client-side validation.

Events Handling:

26. Differentiate between the "keydown" and "keyup" events in JavaScript.

The "keydown" event occurs when a key is pressed down, while the "keyup"
event occurs when a key is released.

27. What is event delegation, and why is it useful in managing events?

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.

Data Binding:

28. In two-way data binding, how are changes in the UI propagated back to the data
 model?
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?

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?
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.

These questions provide further insight into event handling, component wrappers,
CSS Modules, form validations, event handling, and data binding in web
development.
 PART B - QUESTIONS
Q. Questions CO K Level
No. Level

1 Explain the concept of event bubbling in JavaScript CO4 K2

and its significance in event handling. Provide
examples to illustrate how event bubbling works.
2 Discuss the use of component wrappers, also CO4 K2
known as Higher-Order Components (HOCs), in
modern frontend development. How do they
promote code reusability and maintainability in
React applications?
3 Describe the benefits of using CSS CO4 K2
Modules for styling in web
development. Explain how CSS Modules
help prevent naming conflicts and
improve code organization
4 Compare and contrast three approaches to form CO4 K2
validation in React: standard validation techniques,

Formik, and Yup. Highlight the strengths and

weaknesses of each approach.

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

7 Discuss the significance of data binding in web CO4 K2

development. How does data binding contribute to
creating responsive and dynamic user interfaces?

8 Explain how developers can customize naming CO4 K2

conventions in CSS Modules to align with their
project requirements. Provide examples of when
custom naming conventions might be useful
9 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
10 Share practical examples where event bubbling and CO4 K2
event delegation are used effectively in real-world
web applications. Discuss the benefits and
considerations of these techniques.
 13. ASSIGNMENTS
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.

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.

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.

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
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
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.
 14. MINI PROJECT SUGGESTION
1) E-COMMERCE SITE

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:

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.

3) WEATHER APP
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
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

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 information is strictlyprohibited.