Module -2 (Chapter 1)

1.​ Explain the purpose of an Issue Tracker in a MERN-based application. Mention the
main attributes associated with an issue.
2.​ List the CRUD operations supported by the Issue Tracker application and describe the
significance of each operation.
3.​ Describe how a React class component is created and used. Illustrate with a simple
example that prints a welcome message.
4.​ What is the role of the render() method in a React class component? Why must it
always return a single element?
5.​ Define the concept of component composition in React. Why is it preferred over
inheritance?
6.​ With reference to the Issue Tracker application, write a React component that
combines three components: IssueFilter, IssueTable, and IssueAdd.
7.​ How can data be passed from a parent to a child component in React using props?
Write code to pass issue ID and title to a child component called IssueRow.
8.​ Explain the difference between passing values using string literals and using
JavaScript expressions (e.g., {}) while passing props in JSX.
9.​ Describe how data can be passed to a component using children. Write a React class
component that receives and displays children inside a bordered box.
10.​ Compare passing data using props vs using children. When would you use one over
the other?
11.​Write a React component that takes an array of issue objects and renders them
dynamically as rows in a table using the map() method.
12.​What is the role of the key attribute in dynamically rendered lists in React? Explain
with an example from the Issue Tracker.
13.​Describe the structure and key functionalities of the Issue Tracker application
developed using React. Explain how CRUD operations are handled and list all the
attributes maintained for an issue.
14.​Create a React class component named HelloWorld that dynamically constructs a
greeting message using an array of continents. Explain how the render() method and
JSX are used within the class to display the message.
15.​Illustrate the concept of component composition in React by designing a basic layout
for an Issue Tracker. Your answer should include code for composing IssueFilter,
IssueTable, and IssueAdd components under a main IssueList component.
16.​ Write a React program to demonstrate how data can be passed from a parent
component (IssueTable) to a child component (IssueRow) using properties. Include a
styled table and display multiple rows with unique issue data.
17.​Design a React component that acts as a wrapper (BorderWrap) which accepts and
renders nested child components using this.props.children. Explain how this differs
from passing data through props.
18.​Write a React component to display a list of issues dynamically using the map()
function on an array. Explain how the key attribute is used and why it is necessary
when rendering lists.
19.​Compare and contrast the three different methods of passing data in React
components: props, children, and entire objects. Give suitable examples and discuss
when each method is appropriate.
20.​Design and implement the main table component (IssueTable) for an Issue Tracker
where each issue is passed as an object to the child component (IssueRow). Ensure
that your implementation includes conditionally rendering missing fields such as the
due date.
21.​What happens when multiple sibling elements are returned directly from a render()
method in React? Write an example to demonstrate this, describe the error, and
explain how using <React.Fragment> helps resolve it.
22.​Explain how JavaScript expressions are embedded inside JSX. Demonstrate this by
creating a component that calculates and displays a custom message using array
operations inside the render() method.
23.​You are building a simplified version of a GitHub-like Issue Tracker. The client wants
to see a table of issues with the ability to filter and add new ones.​
Describe how you would structure your React components and pass data among them
to achieve this functionality.
24.​ A student tries to return two <div> elements from the render() method of a React class
without wrapping them inside a parent element. The application throws an error.​
Explain why this error occurs and how you would correct it.
25.​While designing the Issue Table, a developer wants to reuse a single component to
represent each row of the table with different issue data.​
Explain how you would implement this using component reuse and props.
26.​The client has asked you to keep the UI modular and maintainable. They want clear
separation between filtering, listing, and adding issues.​
Which components would you define in your React code, and how would you
organize them inside a main component?
27.​In the Issue Table, a developer tries to style cells using inline CSS but finds it
repetitive. You’re asked to optimize the code and simplify styling.​
How would you restructure the styling approach, and what are the benefits of moving
styles to an external CSS file or class?
28.​You are asked to create a wrapper component that can add a border around any nested
content (like text or even another component). You should not use props for this.​
How would you implement this using props.children and where would you use such a
pattern in a real-world application?
29.​Your manager gives you a list of issues as a JavaScript array and asks you to display
them in a table dynamically.​
Explain how you will use React to iterate over the array and generate table rows, and
why using a unique key is important.
30.​After building the Issue Tracker table using hardcoded data, the client now wants the
list to support dynamic updates from a backend or another file.​
What changes would you make to your component to move from hardcoded to
dynamic data, and what are the benefits of this approach?