Back to Subject

Unit 2: Components and styles in React - Practice Quiz

INT252 — Web App Development With Reactjs 50 Questions
0 Correct 0 Wrong 50 Left
0/50

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

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

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

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

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

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

4 How do you define a Functional Component in React?

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

5 What is the React Virtual DOM?

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

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

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

7 What does 'Props' stand for in React?

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

8 Are React Props mutable?

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

9 How do you access props in a Class Component?

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

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

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

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

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

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

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

13 What is the primary advantage of using CSS Modules?

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

14 Which file extension is typically used for CSS Modules?

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

15 What is TailwindCSS?

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

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

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

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. Yes, using this.state
B. No, never
C. Yes, using the useState hook
D. Only if converted to a Class

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A. Check if it is null inside render
B. Define it in defaultProps or destructure with a default value
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 CSS file
C. In the constructor
D. In the return statement

28 What is 'children' in React props?

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

29 Which configuration file is generated when initializing TailwindCSS?

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

30 Can a React component return null?

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

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

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

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

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

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

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

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 keeps the old DOM and appends the new one
C. React throws an error
D. React tears down the old tree and builds the new tree from scratch

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

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

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

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

37 What is a 'Stateless Functional Component'?

A. A component that cannot render HTML
B. A slow component
C. A functional component that does not use hooks to manage state
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: isActive ? 'red' : 'blue' }}
B. css={ isActive ? 'red' : 'blue' }
C. className={isActive}
D. style='color: red'

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

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

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

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

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

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

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

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

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

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

44 Can props contain functions?

A. No, only strings and numbers
B. Only in Class components
C. Yes, to handle events or callbacks
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 render the component
C. To import CSS
D. To call the parent class constructor and bind this.props

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

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

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

A. Updating all components at once every second
B. Grouping multiple state updates into a single re-render for performance
C. Updating the database in batches
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. It appears in the DOM as an attribute automatically
C. React throws a warning
D. The prop is ignored

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

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

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

A. function Comp(name, age) { ... }
B. function Comp([name, age]) { ... }
C. function Comp({ name, age }) { ... }
D. function Comp(props) { const name = props.name }
Previous MCQ
Unit 1
Next MCQ
Unit 3