WorksheetsUnit 17 React.js Question Bank - Extraction
Total questions: 100
Worksheet time: 50mins
Put "True" in front of the correct statement and "False" in front of the incorrect statement: ReactJS is a back-end JavaScript framework.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: React was developed by Facebook.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: React is primarily used for building single-page applications.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: React uses a virtual DOM to improve performance.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: React compares the virtual DOM with the real DOM to determine changes.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: The virtual DOM updates the entire real DOM on every state change.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: Virtual DOM improves performance by minimizing direct DOM manipulations.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: Node.js is required to run a React application.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: Vite is the only tool you can use to create React apps.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: npm create vite@latest is the command to start a new Vite project.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: You must restart the development server after every file change.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: The App.jsx file is the root component in a new React project.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: React components can only return one root element.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: JSX stands for JavaScript XML.
True
False
Put "True" in front of the correct statement and "False" in front of the incorrect statement: JSX is executed directly by browsers.
True
False
Choose the correct answer: What is ReactJS primarily used for?
Backend development
Building user interfaces
Database management
Mobile app development
Choose the correct answer: ReactJS is maintained by:
Microsoft
Amazon
Choose the correct answer: Which feature makes ReactJS efficient for UI updates?
Virtual DOM
Global CSS
Server-side rendering
Inline styles
Choose the correct answer: What syntax extension does React use for templating?
HTML
CSS-in-JS
JSX
TypeScript
Choose the correct answer: React components are:
Non-reusable
Reusable
Only for class components
Limited to 10 per app
Choose the correct answer: The Virtual DOM is a:
Real DOM copy
Browser plugin
Lightweight in-memory representation
State management tool
Choose the correct answer: How does Virtual DOM improve performance?
By updating the entire DOM
By reducing component count
By disabling CSS
By minimizing direct DOM manipulations
Choose the correct answer: What triggers a Virtual DOM update?
State/props changes
CSS changes
User login
API calls
Choose the correct answer: To create a React app with Vite, run:
npm create-react-app
npm create vite@latest
yarn add react
npx install react
Choose the correct answer: After creating a Vite project, you must run:
npm run dev
npm start
npm build
npm deploy
Choose the correct answer: The default port for Vite is:
3000
5173
8080
8000
Choose the correct answer: Vite supports frameworks like:
Only React
Angular only
React, Vue, Svelte
Django
Choose the correct answer: JSX stands for:
JavaScript XML
Java Syntax Extension
JSON XML
JS Extensions
Choose the correct answer: JSX allows embedding expressions with:
Parentheses ()
Angle brackets <>
Square brackets []
Curly braces {}
Choose the correct answer: To render multiple JSX elements, wrap them in:
Give significant term for question: The virtual representation of the actual DOM that React uses for efficient updates.
Virtual DOM
JSX
props
useState
Give significant term for question: The syntax extension for JavaScript that allows writing HTML-like code in React.
JSX
Components
state
Vite
Give significant term for question: The React method used to render components to the DOM in older React versions.
ReactDOM.render()
useState
Class component
Virtual DOM
Give significant term for question: The modern build tool that's faster than Create React App for setting up React projects.
Vite
Components
Functional component
props
Give significant term for question: The self-contained, reusable building blocks of a React application.
Components
Class component
JSX
ReactDOM.render()
Give significant term for question: The type of component defined as a JavaScript function.
Functional component
Class component
state
useState
Give significant term for question: The type of component that uses ES6 classes and extends React.Component.
Class component
Functional component
Vite
props
Give significant term for question: The React object that holds mutable data specific to a component.
state
props
Virtual DOM
useState
Give significant term for question: The immutable data passed from parent to child components.
props
state
Components
JSX
Give significant term for question: The React Hook that manages state in functional components.
useState
ReactDOM.render()
Virtual DOM
Vite
Match the correct answer from column A what suits column B. From column B, choose the entry that correctly matches: Virtual DOM
Lightweight in-memory representation of the actual DOM
Hook for side effects (e.g., data fetching)
Match the correct answer from column A what suits column B. From column B, choose the entry that correctly matches: JSX
HTML-like syntax extension for JavaScript
Hook for accessing React context globally
Match the correct answer from column A what suits column B. From column B, choose the entry that correctly matches: useState
Hook for managing state in functional components
Hook for complex state logic with reducers
Match the correct answer from column A what suits column B. From column B, choose the entry that correctly matches: useEffect
Hook for side effects (e.g., data fetching)
Hook for accessing React context globally
Dear learner: Complete the question. React.js is primarily used for creating user interfaces for (a) applications.
Match the correct answer from column A what suits column B: For the item
Hook to extract dynamic URL parameters
Client-side navigation component
Top-level component for client-side routing
Placeholder for nested route content
Match the correct answer from column A what suits column B: For the item
Client-side navigation component
Container for
Maps a URL path to a component
Top-level component for client-side routing
Match the correct answer from column A what suits column B: For the item
Hook to extract dynamic URL parameters
Maps a URL path to a component
Placeholder for nested route content
Client-side navigation component
Match the correct answer from column A what suits column B: For the item , choose the correct description from column B.
Client-side navigation component
Container for
Placeholder for nested route content
Hook to extract dynamic URL parameters
Match the correct answer from column A what suits column B: For the item useParams(), choose the correct description from column B.
Hook to extract dynamic URL parameters
Maps a URL path to a component
Client-side navigation component
Top-level component for client-side routing
Match the correct answer from column A what suits column B: For the item
Placeholder for nested route content
Maps a URL path to a component
Container for
Top-level component for client-side routing
Dear learner: Give signific term question. Identify the term that fits the definition: A utility-first CSS framework for rapid UI development.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The library that enables client-side navigation in React applications.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The top-level component that syncs your app with the browser's URL.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The component that defines the mapping between URLs and components.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The container component that holds multiple Route definitions.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The component used for navigation that prevents full page reloads.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The special Link component that applies styling when active.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The hook that extracts dynamic parameters from the URL.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The hook used for programmatic navigation between routes.
(a)
Dear learner: Give signific term question. Identify the term that fits the definition: The special component that renders matched child routes in nested routing.
(a)
Dear learner: Complete the question. To install React Router, you use the package (a) .
Dear learner: Complete the question. The top-level component for routing in React is (a) .
Dear learner: Complete the question. Dynamic route parameters are accessed using the (a) hook.
Dear learner: Complete the question. For programmatic navigation, you use the (a) hook.
Dear learner: Complete the question. A 404 page is implemented using the route path (a) .
Dear learner: Complete the question. Nested routes render child components using the (a) component.
Dear learner: Complete the question. The (a) hook is used for side effects like data fetching.
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: You can embed JavaScript expressions in JSX using curly braces {}.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: JSX fragments are written as <>....
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: React components must always start with a capital letter.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: Functional components can't use state.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: Class components are the modern preferred way to write components.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: Components can return other components.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: Props are immutable within child components.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: State can only be used in class components.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: setState() is asynchronous in class components.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: Props can only pass string values.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: State changes always trigger a re-render.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: Hooks can only be used in functional components.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: useState returns the current state and a setter function.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: You can call hooks inside loops or conditionals.
True
False
Dear learner: Put "True" in front of the correct statement and "False" in front of the incorrect statement: useEffect can return a cleanup function.
True
False
Dear learner: Choose the correct answer: Class components require:
extends React.Component
useState()
function keyword
props keyword
Dear learner: Choose the correct answer: Props are passed to child components as:
Mutable objects
Immutable values
CSS classes
State variables
Dear learner: Choose the correct answer: To share state between components:
Use global variables
Copy-paste code
Lift state up
Avoid props
Dear learner: Choose the correct answer: State is managed using:
useState or useReducer
useEffect
useContext
useRef
Dear learner: Choose the correct answer: Props are used to:
Modify parent state
Pass data to children
Replace Redux
Style components
Dear learner: Choose the correct answer: Prop drilling refers to:
Passing props through multiple layers
Using useEffect
Styling components
Server-side rendering
Dear learner: Choose the correct answer: To avoid prop drilling, use:
useState
Class components
Inline styles
Context API or Redux
Dear learner: Choose the correct answer: Rules of Hooks include:
Call Hooks in loops
Call Hooks at the top level
Dear learner: Choose the correct answer: useReducer is used for:
Simple state
Styling
Complex state logic
Prop drilling
Dear learner: Choose the correct answer: useContext helps with:
Global state management
Local state only
API calls
Inline CSS
Dear learner: Choose the correct answer: useEffect replaces lifecycle methods like:
componentDidMount
render
constructor
shouldComponentUpdate
Match the correct answer from column A what suits column B: For the item State, choose the correct description from column B.
Handle side effects (e.g., API calls)
Sharing state across components without prop drilling
Mutable data local to a component
Passing props through multiple layers (anti-pattern)
Immutable data passed from parent to child
Match the correct answer from column A what suits column B: For the item Props, choose the correct description from column B.
Immutable data passed from parent to child
Sharing state across components without prop drilling
Managing complex state transitions
Handle side effects (e.g., API calls)
Match the correct answer from column A what suits column B: For the item useReducer, choose the correct description from column B.
Handle side effects (e.g., API calls)
Mutable data local to a component
Managing complex state transitions
Passing props through multiple layers (anti-pattern)
Match the correct answer from column A what suits column B: For the item useContext, choose the correct description from column B.
Sharing state across components without prop drilling
Passing props through multiple layers (anti-pattern)
Immutable data passed from parent to child
Manage complex state transitions
Match the correct answer from column A what suits column B: For the item useEffect, choose the correct description from column B.
Handle side effects (e.g., API calls)
Mutable data local to a component
Sharing state across components without prop drilling
Passing props through multiple layers (anti-pattern)
Match the correct answer from column A what suits column B: For the item Prop Drilling, choose the correct description from column B.
Passing props through multiple layers (anti-pattern)
Mutable data local to a component
Handle side effects (e.g., API calls)
Immutable data passed from parent to child
