Back to Subject
View Notes

Unit 2 - Practice Quiz

INT252

1 What is the primary building block of a React application?

A. Module
B. Component
C. Package
D. DOM

2 Which convention should be followed when naming a React component?

A. camelCase
B. snake_case
C. PascalCase
D. kebab-case

3 Which method is required to be defined in a React Class Component?

A. getInitialState
B. render
C. componentDidMount
D. constructor

4 How do you define a Functional Component in React?

A. class MyComponent extends React.Component
B. function MyComponent() { return <div />; }
C. const MyComponent = new Component()
D. React.createClass({ ... })

5 What is the React Virtual DOM?

A. A direct copy of the browser's DOM
B. A lightweight JavaScript representation of the real DOM
C. A database for storing state
D. A CSS processing engine

6 What is the process of updating the DOM to match the Virtual DOM called?

A. Transpilation
B. Reconciliation
C. Rendering
D. Compiling

7 What does 'Props' stand for in React?

A. Proper HTML
B. Properties
C. Propositions
D. Prototypes

8 Are React Props mutable?

A. Yes, always
B. No, they are read-only
C. Only inside class components
D. Only inside functional components

9 How do you access props in a Class Component?

A. props.name
B. this.props.name
C. getProps().name
D. super.name

10 Which attribute is used to assign a CSS class in React JSX?

A. class
B. cssClass
C. className
D. styleClass

11 What is the data type of the 'style' attribute when using inline styling in React?

A. String
B. Array
C. JavaScript Object
D. CSS File

12 How is the CSS property 'background-color' written in React inline styles?

A. background-color
B. backgroundColor
C. Background-Color
D. bgColor

13 What is the primary advantage of using CSS Modules?

A. It allows writing CSS in PHP
B. It scopes CSS classes locally to the component
C. It removes the need for CSS
D. It automatically adds TailwindCSS

14 Which file extension is typically used for CSS Modules?

A. .css
B. .module.css
C. .js.css
D. .style.js

15 What is TailwindCSS?

A. A component library like MaterialUI
B. A utility-first CSS framework
C. A CSS-in-JS library
D. A React state manager

16 How do you pass a prop named 'color' with value 'red' to a component 'Button'?

A. <Button color='red' />
B. <Button prop:color='red' />
C. <Button>red</Button>
D. Button.color = 'red'

17 In a functional component, how do you access props passed as an argument?

A. this.props
B. props
C. arguments[0]
D. getProps()

18 Can a functional component use State?

A. No, never
B. Yes, using the useState hook
C. Only if converted to a Class
D. Yes, using this.state

19 What keyword is used to inherit from React.Component in a class component?

A. implements
B. inherits
C. extends
D. uses

20 Why is the 'key' prop important in lists?

A. It styles the list items
B. It helps React identify which items have changed, added, or removed
C. It sorts the list alphabetically
D. It is required for CSS Modules

21 Which of the following is NOT a valid way to style a React component?

A. Inline Styling
B. CSS Stylesheets
C. CSS Modules
D. Direct DOM manipulation of style attribute

22 In TailwindCSS, how would you apply a red text color?

A. color: red
B. text-red-500
C. font-red
D. style={{color: 'red'}}

23 What is the correct syntax to import a CSS file 'App.css' into 'App.js'?

A. include 'App.css';
B. import './App.css';
C. require('App.css');
D. using 'App.css';

24 In React, what replaces the HTML 'for' attribute in labels?

A. htmlFor
B. forId
C. labelFor
D. ref

25 What allows React to be faster than traditional DOM manipulation?

A. It runs on the GPU
B. It uses the Virtual DOM to minimize direct DOM access
C. It compresses HTML files
D. It does not use JavaScript

26 How do you use a default value for a prop in a functional component?

A. Define it in defaultProps or destructure with a default value
B. Check if it is null inside render
C. Use global variables
D. It is not possible

27 When using a Class Component, where do you typically initialize state?

A. In the render method
B. In the constructor
C. In the return statement
D. In the CSS file

28 What is 'children' in React props?

A. The child components defined within the opening and closing tags
B. The subclass of a component
C. An array of all components in the app
D. A method to create new components

29 Which configuration file is generated when initializing TailwindCSS?

A. tailwind.json
B. tailwind.config.js
C. style.config.js
D. css.config.json

30 Can a React component return null?

A. Yes, it renders nothing
B. No, it throws an error
C. Only in class components
D. Only in development mode

31 When using CSS Modules, how do you apply a class named 'header'?

A. className='header'
B. className={styles.header}
C. class='header'
D. style={header}

32 What is the main difference between Functional and Class components regarding the this keyword?

A. Functional components use this extensively
B. Class components do not use this
C. Functional components do not use this to access props or state
D. There is no difference

33 Which tool is commonly used to install TailwindCSS in a React project?

A. npm or yarn
B. pip
C. maven
D. composer

34 In the Diffing Algorithm, what happens if the root elements of two trees are different types?

A. React updates only the attributes
B. React tears down the old tree and builds the new tree from scratch
C. React keeps the old DOM and appends the new one
D. React throws an error

35 Can you use multiple CSS classes in the className attribute?

A. No, only one class is allowed
B. Yes, separated by commas
C. Yes, separated by spaces
D. Yes, using an array

36 What syntax allows you to render a component inside another component?

A. <ChildComponent />
B. render(ChildComponent)
C. import ChildComponent
D. new ChildComponent()

37 What is a 'Stateless Functional Component'?

A. A component that cannot render HTML
B. A functional component that does not use hooks to manage state
C. A slow component
D. A component without props

38 If you want to apply dynamic inline styles based on a variable isActive, which is correct?

A. style='color: red'
B. style={{ color: isActive ? 'red' : 'blue' }}
C. className={isActive}
D. css={ isActive ? 'red' : 'blue' }

39 Which feature allows you to pass data from a parent to a child component?

A. State
B. Props
C. Context
D. Ref

40 Which file contains the directives @tailwind base;, @tailwind components;, and @tailwind utilities;?

A. index.html
B. package.json
C. The main CSS entry file (e.g., index.css)
D. App.js

41 How does React handle boolean values in JSX interpolation {true}?

A. It renders 'true'
B. It renders nothing
C. It renders a checkbox
D. It throws an error

42 What is the correct way to export a component as the default export?

A. export default ComponentName;
B. export ComponentName;
C. module.export = ComponentName;
D. return ComponentName;

43 When using inline styles, which unit is assumed for unitless numbers on properties like width?

A. rem
B. em
C. px (pixels)
D. %

44 Can props contain functions?

A. No, only strings and numbers
B. Yes, to handle events or callbacks
C. Only in Class components
D. Only if the function is static

45 What is the purpose of the super(props) call in a Class component constructor?

A. To initialize the state
B. To call the parent class constructor and bind this.props
C. To render the component
D. To import CSS

46 Which of the following is a benefit of Functional Components over Class Components?

A. They have more lifecycle methods
B. They are more verbose
C. They are generally easier to read and test, and require less boilerplate
D. They support inheritance

47 In the context of Virtual DOM, what is 'Batch Update'?

A. Updating the database in batches
B. Grouping multiple state updates into a single re-render for performance
C. Updating all components at once every second
D. Downloading multiple files

48 If a prop is passed to a component but not defined in the component's logic, what happens?

A. The app crashes
B. The prop is ignored
C. It appears in the DOM as an attribute automatically
D. React throws a warning

49 Can you use standard CSS and TailwindCSS in the same project?

A. No, they conflict
B. Yes, they can coexist
C. Only if you use inline styles
D. Only in separate pages

50 Which syntax is used to destructure props in a functional component parameter?

A. function Comp(props) { const name = props.name }
B. function Comp({ name, age }) { ... }
C. function Comp(name, age) { ... }
D. function Comp([name, age]) { ... }