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. Component
B. Module
C. Package
D. DOM

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

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

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

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

4 How do you define a Functional Component in React?

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

5 What is the React Virtual DOM?

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

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

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

7 What does 'Props' stand for in React?

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

8 Are React Props mutable?

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

9 How do you access props in a Class Component?

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

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

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

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

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

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

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

13 What is the primary advantage of using CSS Modules?

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

14 Which file extension is typically used for CSS Modules?

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

15 What is TailwindCSS?

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

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>red</Button>
D. Button.color = 'red'

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

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

18 Can a functional component use State?

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

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

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

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

A. It sorts the list alphabetically
B. It is required for CSS Modules
C. It helps React identify which items have changed, added, or removed
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. CSS Stylesheets
C. Direct DOM manipulation of style attribute
D. Inline Styling

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

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

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

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

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

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

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

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

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

A. Use global variables
B. Check if it is null inside render
C. Define it in defaultProps or destructure with a default value
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 subclass of a component
B. A method to create new components
C. An array of all components in the app
D. The child components defined within the opening and closing tags

29 Which configuration file is generated when initializing TailwindCSS?

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

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. style={header}
B. className='header'
C. className={styles.header}
D. class='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. pip
B. npm or yarn
C. maven
D. composer

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

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

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

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

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

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

37 What is a 'Stateless Functional Component'?

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

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

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

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

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

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

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

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

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

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

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

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

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

44 Can props contain functions?

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

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 import CSS
D. To render the component

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

A. They support inheritance
B. They have more lifecycle methods
C. They are generally easier to read and test, and require less boilerplate
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. Downloading multiple files
C. Updating the database in batches
D. Grouping multiple state updates into a single re-render for performance

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

A. It appears in the DOM as an attribute automatically
B. The app crashes
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 in separate pages
C. No, they conflict
D. Only if you use inline styles

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

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