Q1. Explain JSX in React.
JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to
HTML. It is used in React to describe the structure of the user interface. JSX
makes it easier to write and visualize the component structure by allowing
HTML-like code directly within JavaScript.
Example: const element = <h1>Hello, World!</h1>;
Q2. b. Explain the concept of components in React and how they contribute
to the structure of a React application.
Components are the building blocks of a React application. They are reusable,
independent, and encapsulated pieces of UI. Components can be either
functional or class-based and help in breaking the UI into smaller, manageable
parts.
Example: function Greeting() {
return <h1>Hello, World!</h1>;
}
Benefits:
1. Code reusability.
2. Separation of concerns.
3. Improved maintainability.
Q3. c. What is the role of Babel in a React application?
Babel is a JavaScript compiler that converts modern JavaScript and JSX code into
browser-compatible JavaScript. It ensures compatibility with older browsers and
enables the use of ES6+ features in React.
Key features of Babel:
1. Transpiles JSX into React createElement calls.
2. Supports ES6+ syntax (e.g., arrow functions, async/await).
3. Allows usage of polyfills
Q4. d. How do you render a list in React? Provide an example.
In React, lists are rendered using the map() function to iterate over an array
and create elements for each item. Each element should have a unique key
prop to optimize rendering.
const fruits = ["Apple", "Banana", "Cherry"];
const listItems = fruits.map((fruit) => <li key={fruit}>{fruit}</li>);
function FruitList() {
return <ul>{listItems}</ul>;
Q5. . Differentiate between the Virtual DOM and React DOM.
Virtual DOM React DOM
An in-memory representation of The actual DOM manipulated by the
the UI. browser.
Slower as it involves direct DOM
Lightweight and faster to update.
manipulation.
Updates are batched and
Requires manual DOM updates.
optimized.
Part B (2 × 9 = 18 Marks)
a. Describe the process of conditional rendering in React with a code
example.
Conditional rendering allows components to render differently based on state or
props. It is achieved using:
1. If/else statements
2. Ternary operators
3. Logical && operator
Example: function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome Back!</h1>;
return <h1>Please Log In</h1>;
b. Explain the difference between state and props in React. Why would you use one over
the other?
State Props
Used to manage dynamic data in a component. Used to pass data from a parent to a child.
Mutable (can be updated). Immutable (read-only).
Controlled within the component. Controlled by the parent component.
Usage:
Use state when a component needs to manage its own data.
Use props to pass data or functions to child components.
Discuss how state is implemented in a React component. Provide an example.
In functional components, state is implemented using the useState hook.
Example:
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>);}
Part C (1 × 12 = 12 Marks)
a. Explain the difference between state and props in React by implementing a
component that uses both. How do these concepts impact the unidirectional
data flow in a React application?
Implementation: import React, { useState } from "react";
function ParentComponent() {
const [message, setMessage] = useState("Hello from State!");
return (
<div>
<ChildComponent message={message} />
<button onClick={() => setMessage("State Updated!")}>Update
State</button>
</div>
);
function ChildComponent({ message }) {
return <h1>{message}</h1>;
Explanation:
State is used in the parent component to manage dynamic data.
Props are used to pass the state data down to the child component.
React enforces unidirectional data flow, meaning data flows from
parent to child. This ensures better control over the data and makes
debugging easier.
