Assignment-2

Subject: User Interface Development with React (CSE 3191)

1. Create a React program that lets user to input his/her name, age, city, country, course,
college name and email id and display the entered values on the screen.
Tips:
(a) Use React's useState hook to manage the state for the user's name and age.
(b) Provide an input field for the name with a default value of "Ahmed Saraf" and an
input field for age with a default value of 25.
Other Default Vaalues: "Delhi" for city , "India" for country, “abc123@[Link]
for email id, course: “B. Tech”, College name: “ABC”.
(c) Use the onChange event to update the state when the user types in the input fields.
(d) Below each input field, display the entered name, age, etc, dynamically as the user
types.
(e) The program should display the following text below the inputs:
"My name is [entered name]"
"My age is [entered age]"
"My city is [entered city]"
"My country is [entered country]"
"My email id is [entered email id]"
"My course is [entered B. Tech]"
"My college name is [entered ABC]"
2. Create a React program that displays a list of student names and their marks using the
map() function.

3. Create a React program that demonstrates the use of useMemo to optimize performance
for expensive computations as follows:

(i) Create a functional component called Component. Add a state variable number
with an initial value of 1. Add a state variable text with an initial value of an
empty string "".
(ii) Create a function computeExpensiveValue(num) that simulates a heavy
computation (e.g., a large loop) and returns a result based on num.
(iii) Use [Link] to compute the expensive value based on number. The
computation should only rerun when number changes.
a. Render the following in the component: display the current number, display
the result of the expensive computation, a button to increment number by 1,
an input field bound to text that updates as the user types, display the typed
text below the input.

4. Create a React program that demonstrates the use of useCallback to prevent

(a) Create a functional component that demonstrates the use of the useEffect hook.
(b) The component should perform an operation such as:displaying a message in
the console or on the screen whenever the component mounts or updates.
Optionally, implement a cleanup function to demonstrate how useEffect handles
unmounting.
(c) Use appropriate state management with the useState hook to trigger re-
rendering and observe how useEffect behaves in response to state changes.
(d) Include clear comments explaining the purpose of useEffect, its dependency
array, and the flow of execution.

6. Create a React application that demonstrates data sharing between components using
the Context API and the useContext hook. Define a context (e.g., UserContext) in a
parent component and provide a value such as a user’s name, theme, or language
preference. Consume the context value in one or more child components using the
useContext hook, and display the data on the screen. Optionally, include a mechanism
(such as a button) to update the context value dynamically and reflect.
7. Write a program in React to implement the concept of the useRef hook as follows:

(a) Create a functional React component that demonstrates the use of the useRef hook.
(b) Use useRef to access and manipulate a DOM element directly — for example,
setting focus on an input field when a button is clicked.
(c) Optionally, demonstrate how useRef can be used to store mutable values that
persist across renders without causing re-renders.
(d) Include appropriate comments explaining the purpose of useRef, its difference
from useState, and its practical use cases in React applications.

8. Write a Simple program in react to implement the event handling used in react.
9. Write a React program to demonstrate the handling of multiple events.

• Create a functional React component that includes different user interface elements
such as buttons, input fields, or divs.
• Implement multiple event handlers (for example, onClick, onChange,
onMouseOver, etc.) to respond to various user actions.
• Display appropriate messages or perform specific actions when each event is
triggered.
• Include comments explaining the purpose of each event handler and how React’s
event system (Synthetic Events) manages them.

10. Write a program in react to implement the concept of inline and non-inline event
handlers.
11. Write a program in react to demonstrate the concept of synthetic events and event
pooling used in react environment.
12. Write a React component that uses the useState hook to create a counter with
Increment, Decrement, and Reset buttons.

13. Design and implement a React application utilizing the useState hook to manage and
display a list of articles. The application should meet the following specifications:

• The interface must contain two input fields for entering an article’s Title and
Summary.
• Upon clicking the “Add” button, the entered article should be appended to a
displayed list of articles.
• Each article entry in the list must include: the Title, displayed as a clickable link.
Clicking this link should toggle the visibility of the corresponding Summary
(i.e., show or hide it).
• A Remove ( ) button that allows the user to delete the respective article from
the list. The visibility of each article’s summary should be controlled using
inline CSS styling (e.g., by modifying the display property between "none" and
"block").