MCQs Of Class1
Introduction to React
Here are 100 multiple-choice questions (MCQs) based on the concepts introduced in the Day 1 React lecture, which include the basics of React, JSX, and setting up a React application.
1. What is React primarily used for?
- A) Designing websites
- B) Managing server-side code
- C) Building user interfaces
- D) Creating databases
Answer: C) Building user interfaces
2. What is JSX in React?
- A) JavaScript XML
- B) JavaScript with XML Syntax
- C) JavaScript Export
- D) JavaScript Extension
Answer: A) JavaScript XML
3. Which of the following is a React feature?
- A) Single page application rendering
- B) Two-way data binding
- C) JSX syntax
- D) All of the above
Answer: D) All of the above
4. What does the npx create-react-app command do?
- A) Creates a new React component
- B) Initializes a new Node.js app
- C) Initializes a new React project with a default setup
- D) Installs React globally
Answer: C) Initializes a new React project with a default setup
5. Which of the following is NOT a core principle of React?
- A) Components
- B) Virtual DOM
- C) Reactivity
- D) Declarative UI
Answer: C) Reactivity
6. In React, what is the purpose of the render() method?
- A) To display HTML content
- B) To handle the logic of an app
- C) To render the React component’s view to the DOM
- D) To handle routing
Answer: C) To render the React component’s view to the DOM
7. Which of the following is a React component lifecycle method?
- A) componentWillMount()
- B) setState()
- C) render()
- D) All of the above
Answer: D) All of the above
8. What is the default port for a React development server?
- A) 4000
- B) 5000
- C) 3000
- D) 8080
Answer: C) 3000
9. How do you access props inside a React component?
- A) this.props
- B) props()
- C) this.prop()
- D) props.this
Answer: A) this.props
10. Which of the following is the correct syntax for creating a functional component in React?
- A) function App() { return <div>Hello</div>; }
- B) function App = () => { return <div>Hello</div>; }
- C) const App = () => { return <div>Hello</div>; }
- D) All of the above
Answer: D) All of the above
11. What is the React keyword used to declare a component’s state?
- A) this.state
- B) state()
- C) this.setState()
- D) useState()
Answer: A) this.state
12. Which of the following is NOT a valid JSX expression?
- A) <h1>Hello, React!</h1>
- B) {name}
- C) <div>Welcome {2 + 2}</div>
- D) <div>Hello</div>
Answer: D) <div>Hello</div>
13. Which of the following is used for handling events in React?
- A) handleEvent()
- B) onClick={handleClick}
- C) addEventListener()
- D) setState()
Answer: B) onClick={handleClick}
14. What is a Virtual DOM in React?
- A) A copy of the actual DOM
- B) A representation of the DOM that can be updated faster
- C) A separate DOM used for testing
- D) A tool for debugging
Answer: B) A representation of the DOM that can be updated faster
15. Which of the following is a valid JSX expression to display a dynamic variable?
- A) <h1>{name}</h1>
- B) <h1>{{name}}</h1>
- C) <h1>${name}</h1>
- D) <h1>name</h1>
Answer: A) <h1>{name}</h1>
16. Which of the following is the correct command to start a React app once it's set up?
- A) npm run start
- B) npm start
- C) react start
- D) node start
Answer: B) npm start
17. What is the purpose of useState hook in React?
- A) To manage the component lifecycle
- B) To set initial values of state variables
- C) To handle API requests
- D) To manage props
Answer: B) To set initial values of state variables
18. In React, what does props stand for?
- A) Property state
- B) Property objects
- C) Properties
- D) Props
Answer: C) Properties
19. In a React component, which method is used to update the state?
- A) setState()
- B) getState()
- C) updateState()
- D) renderState()
Answer: A) setState()
20. What is the folder structure created by create-react-app?
- A) public, src, components
- B) node_modules, src, assets
- C) public, src, tests
- D) components, assets, dist
Answer: A) public, src, components
21. How do you import a component in React?
- A) import { ComponentName } from 'component';
- B) import ComponentName from './ComponentName';
- C) import './ComponentName';
- D) import componentName from 'component';
Answer: B) import ComponentName from './ComponentName';
22. What is the role of the render() function in a React component?
- A) It performs state updates
- B) It returns the UI (JSX) of the component
- C) It modifies props
- D) It creates an event handler
Answer: B) It returns the UI (JSX) of the component
23. Which of the following is true about React components?
- A) Components can be class-based or function-based
- B) Components cannot return HTML
- C) React components cannot accept props
- D) React components cannot have a render method
Answer: A) Components can be class-based or function-based
24. How do you create a new React project?
- A) npm init react-app project-name
- B) npx create-react-app project-name
- C) create-react-app project-name
- D) npm create-react-app project-name
Answer: B) npx create-react-app project-name
25. What does the this keyword refer to in React class components?
- A) The global scope
- B) The current class instance
- C) The component’s props
- D) The component’s state
Answer: B) The current class instance
26. What is the main difference between class-based and function-based components in React?
- A) Function-based components can have a render method
- B) Class-based components cannot have state
- C) Function-based components use hooks, while class components use lifecycle methods
- D) There is no difference between the two
Answer: C) Function-based components use hooks, while class components use lifecycle methods
27. How can you add inline styles to a React component?
- A) <div style="color: red;">Hello</div>
- B) <div style={{color: 'red'}}>Hello</div>
- C) <div style='color: red'>Hello</div>
- D) <div color="red">Hello</div>
Answer: B) <div style={{color: 'red'}}>Hello</div>
28. Which command is used to install dependencies in a React project?
- A) npm install
- B) npm update
- C) npm add
- D) npm build
Answer: A) npm install
29. How do you pass data from a parent component to a child component in React?
- A) Using state
- B) Using props
- C) Using event handlers
- D) Using localStorage
Answer: B) Using props
30. What is a controlled component in React?
- A) A component that handles its own state
- B) A component that is rendered by React DOM
- C) A component that doesn’t use state
- D) A component whose form elements are bound to state
Answer: D) A component whose form elements are bound to state
31. What is the correct syntax to use a React Fragment?
- A) <Fragment></Fragment>
- B) <>...</>
- C) <React.Fragment>...</React.Fragment>
- D) All of the above
Answer: D) All of the above
32. How do you handle forms in React?
- A) Use useForm hook
- B) Use onChange and onSubmit events
- C) Use handleForm function
- D) React doesn’t handle forms
Answer: B) Use onChange and onSubmit events
33. In React, what does the key prop do?
- A) Provides a unique identity for elements in a list
- B) Makes the component key-readable
- C) Stores the state of a component
- D) Binds an event handler to an element
Answer: A) Provides a unique identity for elements in a list
34. What is the purpose of useEffect hook in React?
- A) To handle side effects in function components
- B) To handle events
- C) To bind the component’s state to the DOM
- D) To define component lifecycle methods
Answer: A) To handle side effects in function components
35. What does the useState hook return in React?
- A) A function to set state
- B) A variable containing the state value
- C) A pair of values: the current state and a function to update it
- D) A function to delete state
Answer: C) A pair of values: the current state and a function to update it
36. In React, how do you create a ref?
- A) const ref = React.createRef();
- B) const ref = useRef();
- C) Both A and B
- D) const ref = useRef.create();
Answer: C) Both A and B
37. Which of the following is NOT a React lifecycle method?
- A) componentDidMount()
- B) componentWillUnmount()
- C) componentWillUpdate()
- D) componentDidRender()
Answer: D) componentDidRender()
38. How do you conditionally render content in React?
- A) Using if statements
- B) Using ternary operators
- C) Using && (logical AND) operator
- D) All of the above
Answer: D) All of the above
39. Which of the following is used for routing in React?
- A) react-router
- B) react-navigation
- C) react-link
- D) react-path
Answer: A) react-router
40. In React, what does the state refer to?
- A) An object that holds data and properties that affect the render
- B) An object that stores props
- C) An object that updates the component every time it changes
- D) An array of component methods
Answer: A) An object that holds data and properties that affect the render
41. What is the correct way to import a CSS file in React?
- A) import './style.css';
- B) import './style';
- C) import 'style.css';
- D) import { './style.css' };
Answer: A) import './style.css';
42. Which of the following is a valid use case for React?
- A) Server-side rendering
- B) Building interactive UIs
- C) Building single-page applications (SPAs)
- D) All of the above
Answer: D) All of the above
43. What is a stateless component in React?
- A) A component that does not handle state
- B) A component that only handles state
- C) A component with dynamic properties
- D) A component that has no props
Answer: A) A component that does not handle state
44. Which of the following is an example of a pure component in React?
- A) class MyComponent extends React.Component
- B) const MyComponent = () => <div>Hello</div>
- C) class MyComponent extends React.PureComponent
- D) function MyComponent() { return <div>Hello</div>; }
Answer: C) class MyComponent extends React.PureComponent
45. What does React.StrictMode do?
- A) It automatically optimizes performance
- B) It highlights potential problems in the application
- C) It runs the app in development mode only
- D) It prevents the app from rendering in production
Answer: B) It highlights potential problems in the application
46. What is the purpose of React.createElement()?
- A) To create a new component
- B) To create a new React element from JSX
- C) To render a React component
- D) To handle component state
Answer: B) To create a new React element from JSX
47. How can you define default props for a React component?
- A) Using the getDefaultProps() method
- B) Using defaultProps property
- C) Using the useDefaultProps() hook
- D) React does not support default props
Answer: B) Using defaultProps property
48. Which of the following is a hook in React?
- A) useClick()
- B) useEffect()
- C) setState()
- D) componentWillMount()
Answer: B) useEffect()
49. What is the use of useRef() in React?
- A) It allows you to keep a reference to a DOM element or a function
- B) It allows you to handle form events
- C) It provides access to the virtual DOM
- D) It tracks the number of component renders
Answer: A) It allows you to keep a reference to a DOM element or a function
50. Which of the following are hooks in React?
- A) useState, useEffect, useContext
- B) useComponent, useProps, useState
- C) useContext, useComponent, useEffect
- D) useComponent, useRef, useProps
Answer: A) useState, useEffect, useContext
51. What is the primary purpose of a "container" component in React?
- A) To handle visual rendering only
- B) To manage the state and pass it down to presentational components
- C) To render raw HTML code
- D) To manage component lifecycle methods only
Answer: B) To manage the state and pass it down to presentational components
52. What is render() method used for in React class components?
- A) To handle side effects
- B) To render JSX to the DOM
- C) To modify props
- D) To update the state
Answer: B) To render JSX to the DOM
53. Which of the following is the correct way to add a comment in JSX?
- A) <!-- comment -->
- B) // comment
- C) /* comment */
- D) {/* comment */}
Answer: D) {/* comment */}
54. What is the difference between componentDidMount() and useEffect()?
- A) componentDidMount() is for class components, while useEffect() is for functional components
- B) Both serve the same purpose
- C) useEffect() is for handling side effects only
- D) componentDidMount() is called after every render, while useEffect() is called before render
Answer: A) componentDidMount() is for class components, while useEffect() is for functional components
55. What does the shouldComponentUpdate() method in React do?
- A) It determines if a component should render again
- B) It forces the component to re-render
- C) It triggers the render() method
- D) It updates the component state
Answer: A) It determines if a component should render again
56. Which of the following is the best way to optimize performance in React?
- A) Using React.memo for functional components
- B) Using shouldComponentUpdate for class components
- C) Both A and B
- D) React does not provide performance optimization methods
Answer: C) Both A and B
57. What is useContext() used for in React?
- A) To manage state across different components
- B) To allow a component to subscribe to React context
- C) To share functions across components
- D) To handle side effects in functional components
Answer: B) To allow a component to subscribe to React context
58. Which method is used to update state in a class component?
- A) this.updateState()
- B) this.setState()
- C) this.changeState()
- D) this.modifyState()
Answer: B) this.setState()
59. What does ReactDOM.render() do?
- A) Renders a React component to the browser DOM
- B) Renders a component to a virtual DOM
- C) Renders the initial state of the component
- D) Renders JSX to HTML
Answer: A) Renders a React component to the browser DOM
60. What is JSX in React?
- A) JavaScript extended syntax for HTML-like structure
- B) JavaScript for XML
- C) JavaScript eXtension for styling
- D) JavaScript eXecution environment
Answer: A) JavaScript extended syntax for HTML-like structure
61. Which method is used to pass data from a parent component to a child component?
- A) this.props
- B) this.state
- C) this.data
- D) this.children
Answer: A) this.props
62. What does the useMemo hook do in React?
- A) It allows a component to memorize its state
- B) It memorizes the result of a calculation to prevent unnecessary re-rendering
- C) It is used to memoize event handlers
- D) It helps you add new props to a component
Answer: B) It memorizes the result of a calculation to prevent unnecessary re-rendering
63. What is the purpose of React.Fragment?
- A) To group multiple elements without adding extra nodes to the DOM
- B) To break a component into multiple subcomponents
- C) To split a component into multiple files
- D) To manage the lifecycle methods
Answer: A) To group multiple elements without adding extra nodes to the DOM
64. Which of the following is NOT true about useState()?
- A) It is used to manage the state in functional components
- B) It allows you to update the state dynamically
- C) It returns an array with the current state and a function to update it
- D) It can only be used inside class components
Answer: D) It can only be used inside class components
65. Which hook should be used for managing side effects in a functional component?
- A) useState
- B) useEffect
- C) useContext
- D) useReducer
Answer: B) useEffect
66. What is the role of defaultProps in React?
- A) It assigns default values to props if not passed
- B) It sets the state of the component
- C) It helps in validating props
- D) It provides default lifecycle methods
Answer: A) It assigns default values to props if not passed
67. Which method is used to update state in a functional component?
- A) this.setState()
- B) setState()
- C) useState()
- D) state.update()
Answer: C) useState()
68. How can you pass a function from a parent component to a child component?
- A) By using props
- B) By using context
- C) By using state
- D) By using React Router
Answer: A) By using props
69. In React, what does the map() function do?
- A) It maps components to their JSX representation
- B) It loops through an array of data and returns a new array of elements
- C) It binds event handlers to the DOM
- D) It creates a new state in the component
Answer: B) It loops through an array of data and returns a new array of elements
70. What is ReactDOM.render() used for in React?
- A) To render a component on the server
- B) To render a component to the browser DOM
- C) To render JSX to HTML
- D) To trigger an event handler
Answer: B) To render a component to the browser DOM
71. What does the useReducer hook do in React?
- A) It is used for handling complex state logic
- B) It works only with class components
- C) It provides a simplified version of useState
- D) It allows you to pass props between components
Answer: A) It is used for handling complex state logic
72. Which of the following can React's useState hook handle?
- A) Objects
- B) Arrays
- C) Numbers
- D) All of the above
Answer: D) All of the above
73. How do you define a function component in React?
- A) function MyComponent() { return <div>Hello</div>; }
- B) const MyComponent = () => <div>Hello</div>;
- C) class MyComponent extends React.Component { render() { return <div>Hello</div>; } }
- D) Both A and B
Answer: D) Both A and B
74. What is the default behavior of a component in React?
- A) Components don’t re-render automatically
- B) Components render based on changes in state or props
- C) Components only render on initial load
- D) Components do not have lifecycle methods
Answer: B) Components render based on changes in state or props
75. What does the useEffect hook allow you to do in React?
- A) Handle side effects in functional components
- B) Manage state in class components
- C) Render the component conditionally
- D) Bind event handlers to DOM elements
Answer: A) Handle side effects in functional components
76. What does the useContext hook do in React?
- A) Allows you to access context values in functional components
- B) Allows you to set context values in class components
- C) Allows you to store state across multiple components
- D) Allows you to pass state between sibling components
Answer: A) Allows you to access context values in functional components
77. Which of the following is true about state in React?
- A) State can be directly modified in class components
- B) State is immutable and should be updated using setState or useState
- C) State can be shared directly between sibling components
- D) State is only used for visual elements, not logic
Answer: B) State is immutable and should be updated using setState or useState
78. What is the purpose of the React.memo higher-order component?
- A) It prevents re-rendering of functional components if props do not change
- B) It triggers a force update for all components
- C) It allows you to write class components
- D) It helps in optimizing the component lifecycle
Answer: A) It prevents re-rendering of functional components if props do not change
79. What is JSX in React?
- A) A syntax extension for JavaScript that allows HTML-like code in JavaScript files
- B) A JavaScript library used for managing state
- C) A markup language used by React
- D) A template engine for dynamic rendering
Answer: A) A syntax extension for JavaScript that allows HTML-like code in JavaScript files
80. Which of the following is used to prevent a component from re-rendering in React?
- A) React.PureComponent
- B) React.memo
- C) shouldComponentUpdate
- D) All of the above
Answer: D) All of the above
81. What is the role of the key prop in React?
- A) It helps React identify which items have changed, are added, or are removed
- B) It binds event handlers to DOM elements
- C) It stores the component's state
- D) It adds default styles to the component
Answer: A) It helps React identify which items have changed, are added, or are removed
82. Which of the following statements is correct about React.Fragment?
- A) It returns an array of elements
- B) It is used to group a list of children without adding extra nodes to the DOM
- C) It wraps an element in an extra div
- D) It is used only for handling side effects
Answer: B) It is used to group a list of children without adding extra nodes to the DOM
83. What is the main advantage of using functional components in React over class components?
- A) Functional components can use this keyword
- B) Functional components are always more efficient than class components
- C) Functional components are simpler and easier to test
- D) Functional components can only be used for rendering static content
Answer: C) Functional components are simpler and easier to test
84. How can you add event handlers in React?
- A) By using onClick attribute in JSX
- B) By using addEventListener() in the componentDidMount method
- C) By defining an event handler method within the component
- D) All of the above
Answer: D) All of the above
85. Which of the following is used to pass data between components in React?
- A) Props
- B) State
- C) Context
- D) All of the above
Answer: D) All of the above
86. What is the role of React.StrictMode in React?
- A) It highlights potential problems in an application during development
- B) It disables all warnings in production mode
- C) It renders the components faster
- D) It enforces immutability of state
Answer: A) It highlights potential problems in an application during development
87. Which hook should be used for managing forms in React?
- A) useForm
- B) useEffect
- C) useState
- D) None of the above
Answer: C) useState
88. What does the setState() method do in class components?
- A) It directly modifies the state of the component
- B) It schedules an update to the component’s state and triggers a re-render
- C) It removes the state from the component
- D) It updates props of a component
Answer: B) It schedules an update to the component’s state and triggers a re-render
89. What does the useRef() hook do in React?
- A) It creates a mutable reference to a DOM element or a value
- B) It is used for rendering values
- C) It returns a static value for a variable
- D) It is used for dynamic rendering of components
Answer: A) It creates a mutable reference to a DOM element or a value
90. Which of the following is true about React's render() method?
- A) It is used in class components to define what is returned to the DOM
- B) It is only used in functional components
- C) It directly updates the state
- D) It renders elements without JSX
Answer: A) It is used in class components to define what is returned to the DOM
91. How can you ensure that a component only re-renders when necessary?
- A) By using shouldComponentUpdate() in class components
- B) By using React.memo() for functional components
- C) By using PureComponent or React.memo()
- D) All of the above
Answer: D) All of the above
92. What happens if state is updated incorrectly in React?
- A) React will ignore the update and continue rendering
- B) React will immediately force a re-render
- C) The component will crash
- D) React will cause a memory leak
Answer: B) React will immediately force a re-render
93. Which hook should you use to update state in response to changes in props?
- A) useState
- B) useEffect
- C) useMemo
- D) useContext
Answer: B) useEffect
94. What does the key prop help React do efficiently?
- A) Identifies the correct component to render
- B) Helps to uniquely identify components in a list to avoid unnecessary re-renders
- C) Passes data between components
- D) Handles user interactions
Answer: B) Helps to uniquely identify components in a list to avoid unnecessary re-renders
95. What is useCallback() used for in React?
- A) To memoize event handlers and prevent unnecessary re-renders
- B) To optimize the performance of the component by preventing all renders
- C) To add default values to props
- D) To handle side effects inside functional components
Answer: A) To memoize event handlers and prevent unnecessary re-renders
96. Which of the following is a valid method for managing state in a React component?
- A) Using useState hook
- B) Using setState in class components
- C) Using useReducer for complex state logic
- D) All of the above
Answer: D) All of the above
97. What is the purpose of the componentDidMount() lifecycle method in React?
- A) It is called when the component is first mounted to the DOM
- B) It updates the component's state when props change
- C) It is used to clean up resources before the component is unmounted
- D) It is used to trigger re-renders manually
Answer: A) It is called when the component is first mounted to the DOM
98. What does React.StrictMode do during development?
- A) It runs additional checks and warnings to help identify potential issues
- B) It prevents updates to the component’s state
- C) It automatically handles side effects
- D) It increases the component rendering speed
Answer: A) It runs additional checks and warnings to help identify potential issues
99. Which hook allows you to read and update context in functional components?
- A) useContext
- B) useState
- C) useEffect
- D) useReducer
Answer: A) useContext
100. What does React use to manage virtual DOM updates?
- A) It compares the current virtual DOM with the previous one and applies the minimal changes to the real DOM
- B) It immediately updates the real DOM whenever state or props change
- C) It re-renders all components on each update
- D) It uses the server to manage updates
Answer: A) It compares the current virtual DOM with the previous one and applies the minimal changes to the real DOM