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.
 20IT940
WEB DEVELOPMENT FRAMEWORKS

Batch / Year / Semester: 2021-2025 / III / 5

Name of the Faculty : 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

SUBJECT CODE: 21IT928

SUBJECT NAME: WEB DEVELOPMENT FRAMEWORKS (React)

21IT402
WEB TECHNOLOGY (HTML5, CSS3, JS)

21IT928
WEB DEVELOPMENT FRAMEWORKS (React)

6
 4. Syllabus
L T P C
21IT928 WEB DEVELOPMENT FRAMEWORKS (React)
(Theory Course with Laboratory Component) 2 0 2 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 – 15
II
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, audio, K3

and video.

CO2 Hands on knowledge on Rest API , propTypes. K6

CO3 Able to develop a web application using latest React K3

Framework.

CO4 Apply various React features including functions, K6

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

ATTAI
CO P P
NMENT PO PO PO PO PO PO PO PO PO PO PO PO PS S S
1 2 3 4 5 6 7 8 9 1 1 12 O O O
0 1 1 2 3

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
 8. ACTIVITY BASED LEARNING – UNIT III

This activity enables the students to master the CSS

https://cssgridgarden.com/
https://blog.logrocket.com/build-tic-tac-toe-game-react-hooks/
 Lecture Notes

Unit IV - REACT LIBRARY - I

Event Bubbleup - Component Wrapper - Integration of CSS Modules -

Forms Validations(YUP, Formik, Standard), Events Handling, Data
Binding
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>
);
};

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:

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 the Start Date End Date Portion

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

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
 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 not in
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:

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

21.Provide an example scenario where you might use a component wrapper in a React
application.
You might use a component wrapper to add authentication logic to multiple
protected routes in a web app.
 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.
 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
relianceonthe contentsof this informationisstrictlyprohibited.