MCQs Of Day 2
Setting Up React Environment
1. Which command installs Node.js and npm on a Windows system?
o A) install node
o B) npm install
o C) brew install node
o D) Download from the Node.js official website
2. What does npm stand for?
o A) Node Project Manager
o B) Node Programming Module
o C) Node Package Manager
o D) New Project Module
3. Which command is used to check the installed version of Node.js?
o A) node -v
o B) node -version
o C) npm --version
o D) npm -v
4. What command initializes a new React project using Create React App?
o A) npm create react-app
o B) npx create-react-app
o C) node create-react-app
o D) react start
5. What does the npx command do?
o A) Installs npm packages
o B) Executes npm packages without installing globally
o C) Updates npm
o D) Uninstalls npm packages
6. Which file is the main entry point for a React application created using Create React App?
o A) index.html
o B) App.js
o C) index.js
o D) main.js
7. Which command runs a React app locally?
o A) npm start
o B) node start
o C) npm run app
o D) node run start
8. Where do you modify the default HTML structure of a React app?
o A) App.js
o B) index.js
o C) public/index.html
o D) App.css
9. What is the purpose of the public folder in a React app?
o A) Stores JavaScript files
o B) Contains the HTML file and static assets
o C) Manages npm packages
o D) Contains React components
10. Which of the following is true about the src folder in a React project?
o A) It contains only HTML files
o B) It contains JavaScript, CSS, and component files
o C) It stores public assets
o D) It is not used in React apps
MCQs on JSX Syntax
11. What does JSX stand for?
o A) JavaScript XML
o B) JavaScript Extension
o C) JSON XML
o D) JavaScript Syntax
12. Which of the following is true about JSX?
o A) It is optional in React
o B) It is used to write HTML in JavaScript
o C) It replaces JavaScript
o D) It requires a special browser to run
13. In JSX, how do you add a JavaScript expression within HTML tags?
o A) <> </>
o B) { }
o C) [ ]
o D) {{ }}
14. Which of the following is NOT allowed in JSX?
o A) Functions
o B) Objects
o C) Variables
o D) For loops
15. How do you render multiple elements without adding extra nodes in JSX?
o A) <> </>
o B) { }
o C) <container></container>
o D) <div></div>
16. How do you write a single-line comment in JSX?
o A) /* comment */
o B) {/* comment */}
o C) // comment
o D) <!-- comment -->
17. Which of the following syntax is correct in JSX?
o A) <h1>Hello World!</h1>
o B) <h1>Hello World!>
o C) h1 Hello World! /h1
o D) <h1>Hello World!</h1 /
18. How do you render a variable named name in JSX?
o A) <h1>{name}</h1>
o B) <h1>(name)</h1>
o C) <h1>{{name}}</h1>
o D) <h1>$name</h1>
19. What will <h1>{"Hello" + "World"}</h1> render in JSX?
o A) Error
o B) Hello
o C) HelloWorld
o D) Hello World
20. What is the correct way to render an image in JSX?
o A) <img src="url" />
o B) <image src="url" />
o C) <img href="url" />
o D) <image href="url" />
MCQs on Props in React
21. What are props in React?
o A) State variables
o B) Functions
o C) Properties passed to components
o D) JavaScript operators
22. How are props passed to a component?
o A) As an argument
o B) Through the state
o C) As a variable
o D) Using functions
23. In functional components, how do you access props?
o A) props.variable
o B) this.props
o C) component.props
o D) useProps()
24. Which keyword is used to pass data to a component?
o A) set
o B) prop
o C) props
o D) data
25. How do you pass a value to a prop named title in a component?
o A) <Component title="Hello" />
o B) <Component {title}="Hello" />
o C) <Component title="Hello"/>
o D) <Component title = Hello />
26. What happens if you pass a prop with no value?
o A) Prop is true by default
o B) Prop is false by default
o C) Prop is undefined
o D) Throws an error
27. Which of the following components uses props correctly?
o A) <Component text={props.text} />
o B) <Component {props.text} />
o C) <Component text="props.text" />
o D) <Component text={(props.text)} />
28. What will be the output if props.name is undefined in a component?
o A) Throws error
o B) Displays undefined
o C) Blank
o D) Displays default value
29. How can you set default values for props in a component?
o A) propDefaults
o B) defaultProps
o C) setProps
o D) initProps
30. What does children prop refer to in React?
o A) Data passed to child components
o B) Child elements inside a component
o C) Child component itself
o D) A function
4o
You said:
more
ChatGPT said:
ChatGPT
Certainly! Here are more MCQs covering additional topics, such as state management, handling events, and conditional rendering in React.
MCQs on State Management
31. What is state in React?
o A) Static data for a component
o B) Mutable data that affects rendering
o C) Properties passed to components
o D) Immutable data
32. Which hook is commonly used to manage state in a functional component?
o A) useState
o B) useEffect
o C) useProps
o D) useContext
33. What is the correct syntax to initialize state with useState?
o A) const state = useState("initial")
o B) const [state, setState] = useState("initial")
o C) const [state] = useState("initial")
o D) const setState = useState("initial")
34. In React, calling setState does what to the component?
o A) Updates props
o B) Re-renders the component
o C) Unmounts the component
o D) Causes an error
35. What does useState return?
o A) An object
o B) An array
o C) A string
o D) A boolean
36. How can you update the state of a variable count with setCount?
o A) setCount(count + 1)
o B) count = count + 1
o C) setState(count + 1)
o D) useState(count + 1)
37. Where should state variables be declared in a functional component?
o A) Inside the return statement
o B) Inside the useEffect hook
o C) Outside of the component
o D) At the top of the component function
38. If you update the state multiple times in a single function, how many times does React render?
o A) Once per update
o B) Twice per update
o C) Once, after all updates
o D) React does not re-render on state changes
39. What happens if a state update is triggered with the same value as the current state?
o A) Re-renders the component
o B) Triggers an error
o C) No re-render occurs
o D) Clears the state
40. Which of the following can useState accept as an initial value?
o A) Only strings
o B) Only numbers
o C) Any data type
o D) Only objects
MCQs on Handling Events in React
41. How do you bind a button click event in React?
o A) onclick={handleClick}
o B) onClick={handleClick}
o C) onclick="handleClick"
o D) onClick="handleClick"
42. Which of the following is a valid way to handle events in React?
o A) <button click="handleClick">Click</button>
o B) <button onclick={handleClick}>Click</button>
o C) <button onClick={handleClick}>Click</button>
o D) <button click={handleClick}>Click</button>
43. What is the event parameter in an event handler function?
o A) A method to trigger events
o B) An object representing the event
o C) The component’s state
o D) Undefined in React
44. In React, onClick={handleClick()} will...
o A) Bind the function correctly
o B) Cause an error
o C) Call the function immediately
o D) Pass the event object to the function
45. How do you prevent the default action of an event in React?
o A) event.preventDefault()
o B) preventDefault(event)
o C) event.stopPropagation()
o D) event.defaultPrevented()
46. Which event handler is used for capturing text input value changes in React?
o A) onText
o B) onInputChange
o C) onChange
o D) onValue
47. What will onClick={() => setCount(count + 1)} do?
o A) Update the count value directly
o B) Create an infinite loop
o C) Increase count by 1 on click
o D) Throw an error
48. Which of the following correctly passes an argument in an event handler?
o A) onClick={handleClick(argument)}
o B) onClick={() => handleClick(argument)}
o C) onClick={handleClick}
o D) onClick={(argument) => handleClick}
49. What is the purpose of the e.stopPropagation() function in event handling?
o A) Stops all event functions
o B) Prevents the event from bubbling up
o C) Stops all functions in React
o D) Binds the event function to the parent
50. Which syntax is correct to handle a form submission in React?
o A) onSubmit={submitHandler()}
o B) onSubmit={submitHandler}
o C) onSubmit="submitHandler()"
o D) submitHandler={onSubmit}
MCQs on Conditional Rendering
51. Which of the following is used for conditional rendering in JSX?
o A) if...else
o B) Ternary operator
o C) for...loop
o D) switch
52. How do you conditionally render elements in JSX?
o A) {condition && <Component />}
o B) {condition ? Component : ""}
o C) condition ? <Component />
o D) <Component if={condition}>
53. Which operator can help with conditional rendering in JSX?
o A) &&
o B) ||
o C) ==
o D) +=
54. If you want to display a fallback UI when a condition is false, what should you use?
o A) condition ? <Component /> : <Fallback />
o B) { condition && <Component /> }
o C) if (condition) <Component /> else <Fallback />
o D) condition || <Fallback />
55. In conditional rendering, what does {isLoggedIn && <LogoutButton />} do?
o A) Always shows the LogoutButton
o B) Shows LogoutButton only if isLoggedIn is true
o C) Hides LogoutButton always
o D) Throws an error
56. How would you show one of two components based on the condition isMember?
o A) isMember ? <Member /> : <Guest />
o B) isMember && <Member />
o C) <Guest /> ? <Member /> : <Guest />
o D) isMember || <Guest />
57. Which is true about {condition && <Component />} syntax?
o A) It displays Component if condition is true
o B) It displays Component if condition is false
o C) It is invalid in JSX
o D) It always displays Component
58. What will {isAvailable ? <InStock /> : <OutOfStock />} render if isAvailable is false?
o A) InStock
o B) OutOfStock
o C) Nothing
o D) Both components
59. Which of the following cannot be used to conditionally render elements in JSX?
o A) if...else
o B) Ternary operator
o C) Logical && operator
o D) Switch statement
60. What will {isLoading ? "Loading..." : "Data Loaded"} display if isLoading is true?
o A) Loading...
o B) Data Loaded
o C) True
o D) Error
More Questions on React Basics
61. What is React mainly used for?
o A) Server-side development
o B) Backend programming
o C) Building user interfaces
o D) Managing databases
62. What is the extension for JavaScript XML files in React?
o A) .js
o B) .jsx
o C) .react
o D) .xml
63. What is the default port used by a React app created by Create React App?
o A) 3000
o B) 5000
o C) 8080
o D) 4000
64. What is the root component in a React app?
o A) App.js
o B) index.html
o C) public.html
o D) main.js
65. Which file manages the React application rendering process?
o A) index.js
o B) app.js
o C) public.html
o D) component.js
These additional questions provide a broader understanding of React, covering essentials like event handling, conditional rendering, and state management—key topics for any React developer. Let me know if you need more details on any specific area!
4o
You said:
more
ChatGPT said:
ChatGPT
Sure! Here’s a new set of additional MCQs covering component lifecycle, hooks, component styling, React Router basics, and general React best practices.
MCQs on Component Lifecycle and Hooks
66. Which hook is used to run side effects in functional components?
o A) useEffect
o B) useState
o C) useReducer
o D) useContext
67. In which phase is the useEffect hook called in a functional component?
o A) Only on initial render
o B) Only on component unmount
o C) On every render, based on dependencies
o D) Only on component destruction
68. How can you run useEffect only once after the initial render?
o A) useEffect(callback, [state])
o B) useEffect(callback)
o C) useEffect(callback, [])
o D) useEffect(callback, {})
69. What is the purpose of the dependency array in useEffect?
o A) To prevent infinite loops
o B) To specify when the effect should run
o C) To declare state variables
o D) To pass props
70. Which method is called only once when a class component is first added to the DOM?
o A) componentDidMount
o B) componentWillUnmount
o C) componentDidUpdate
o D) render
71. In a class component, where is API data fetching typically done?
o A) componentDidMount
o B) render
o C) componentWillUnmount
o D) componentDidUpdate
72. Which lifecycle method is used for cleanup activities in class components?
o A) componentDidMount
o B) componentWillUnmount
o C) componentDidUpdate
o D) render
73. How do you ensure a useEffect hook only runs when a specific variable changes?
o A) Pass the variable in the return statement
o B) Include the variable in the dependency array
o C) Place the hook in the callback function
o D) Use useState to track the variable
74. What will happen if the dependency array is empty in useEffect?
o A) Runs on every render
o B) Only runs once after the first render
o C) Causes an error
o D) Never runs
75. Which of the following is not a lifecycle method in React class components?
o A) componentDidUpdate
o B) componentWillReceiveProps
o C) componentWillRender
o D) componentDidMount
MCQs on Styling in React
76. How can you apply inline styles to a React component?
o A) Using a style object
o B) Using CSS
o C) By assigning styles directly to JSX elements as a string
o D) Using importStyles
77. Which property is required to use inline styles in React?
o A) styles
o B) css
o C) style
o D) stylesheet
78. How do you set the color of a heading element to red in inline style?
o A) style={{color: "red"}}
o B) style={"color": "red"}
o C) style="color: red"
o D) styles={{color: "red"}}
79. How can you add a CSS file to a React component?
o A) Import it in the component file with import './style.css'
o B) Use @import in JSX
o C) Add it in the public/index.html
o D) Add it as inline styling
80. What is styled-components used for in React?
o A) Inline styling in JSX
o B) CSS framework integration
o C) To write CSS directly in JavaScript
o D) To manage JavaScript components only
81. Which method can be used to conditionally add classes in React?
o A) classNames
o B) addClasses
o C) classSelector
o D) toggleClass
82. Which syntax is correct for applying a CSS module style in React?
o A) className={styles.className}
o B) className="styles.className"
o C) style={styles.className}
o D) styles="className"
83. What is the main advantage of using CSS modules?
o A) Automatic styling
o B) Scoped styling to prevent global conflicts
o C) Enhanced performance
o D) Lightweight size
84. When using CSS-in-JS, styles are scoped to which elements?
o A) Globally scoped
o B) Scoped only to the current component
o C) Scoped to all child components
o D) Scoped only to the parent component
85. What is the syntax for conditional inline styling in React?
o A) {condition ? style={{ color: 'blue' }} : style={{ color: 'green' }}
o B) {style={condition ? { color: 'blue' } : { color: 'green' }}}
o C) style={condition ? { color: 'blue' } : { color: 'green' }}
o D) {style={{ color: condition ? 'blue' : 'green' }}}
MCQs on React Router
86. Which package is commonly used for routing in React applications?
o A) react-routing
o B) react-router-dom
o C) react-route
o D) react-navigation
87. What component from react-router-dom defines a route path?
o A) Path
o B) Switch
o C) Route
o D) Router
88. Which component wraps the entire app for routing in React?
o A) AppRouter
o B) Router
o C) BrowserRouter
o D) RouteContainer
89. How do you navigate programmatically in React Router v6?
o A) window.location.href
o B) navigate
o C) useNavigate
o D) redirect
90. What is the primary use of the <Link> component in React Router?
o A) To define routes
o B) To create navigational links without reloading the page
o C) To load external pages
o D) To create buttons
91. Which of the following is used to define routes in React Router v6?
o A) Router
o B) Routes
o C) Switch
o D) Path
92. Which hook gives you access to route parameters in React Router?
o A) useLocation
o B) useParams
o C) useHistory
o D) useRoute
93. What does exact do in the <Route exact path="/">?
o A) Matches only the specified path exactly
o B) Matches all paths
o C) Renders the default component
o D) Prevents the route from rendering
94. What is the purpose of useLocation hook in React Router?
o A) To get the current URL location
o B) To define routes
o C) To navigate programmatically
o D) To add route parameters
95. How can you render a component only if a certain condition is true in a route?
o A) Use conditionalRoute
o B) Use an inline condition with Route
o C) Use Switch with Route
o D) Place condition directly in Routes
MCQs on Best Practices in React
96. What is the recommended way to pass data between components?
o A) Using context API or props
o B) Using Redux only
o C) Direct DOM manipulation
o D) Using event listeners
97. Why should you avoid using index as the key in React?
o A) It does not uniquely identify elements
o B) It is not allowed in React
o C) It makes the component slow
o D) It changes on every render
98. Which of the following helps to improve the performance of a React application?
o A) Using componentDidMount for rendering
o B) Memoizing components
o C) Rendering all data at once
o D) Avoiding hooks
99. What does "lifting state up" mean in React?
o A) Moving state to a higher-level component to share it with children
o B) Moving state to a lower-level component
o C) Increasing the number of state variables
o D) Resetting the state value
100. Why should you use functional components over class components in modern React development? - A) Functional components are faster - B) Functional components are deprecated - C) Functional components are recommended for hooks - D) Class components use more memory
This set covers a wide range of concepts in React to deepen understanding and prepare students for real-world React usage. Let me know if you’d like additional areas covered!