1
What is the primary building block of a React application?
A. Component
B. Package
C. Module
D. DOM
Correct Answer: Component
Explanation:
Components are the core building blocks of React applications, allowing developers to split the UI into independent, reusable pieces.
2
Which convention should be followed when naming a React component?
A. PascalCase
B. snake_case
C. kebab-case
D. camelCase
Correct Answer: PascalCase
Explanation:
React components must start with a capital letter (PascalCase) so that React can distinguish them from native HTML tags.
3
Which method is required to be defined in a React Class Component?
A. render
B. getInitialState
C. componentDidMount
D. constructor
Correct Answer: render
Explanation:
The render() method is the only required method in a class component, returning the JSX elements to be displayed.
4
How do you define a Functional Component in React?
A. function MyComponent() { return <div />; }
B. class MyComponent extends React.Component
C. const MyComponent = new Component()
D. React.createClass({ ... })
Correct Answer: function MyComponent() { return <div />; }
Explanation:
Functional components are simply JavaScript functions that return JSX.
5
What is the React Virtual DOM?
A. A database for storing state
B. A direct copy of the browser's DOM
C. A CSS processing engine
D. A lightweight JavaScript representation of the real DOM
Correct Answer: A lightweight JavaScript representation of the real DOM
Explanation:
The Virtual DOM is a programming concept where a virtual representation of the UI is kept in memory and synced with the 'real' DOM.
6
What is the process of updating the DOM to match the Virtual DOM called?
A. Reconciliation
B. Transpilation
C. Compiling
D. Rendering
Correct Answer: Reconciliation
Explanation:
Reconciliation is the process through which React updates the DOM by comparing the new Virtual DOM with the previous one.
7
What does 'Props' stand for in React?
A. Propositions
B. Prototypes
C. Proper HTML
D. Properties
Correct Answer: Properties
Explanation:
Props stands for properties, which are arguments passed into React components.
8
Are React Props mutable?
A. No, they are read-only
B. Only inside class components
C. Only inside functional components
D. Yes, always
Correct Answer: No, they are read-only
Explanation:
Props are read-only (immutable) from the perspective of the child component receiving them. A component must never modify its own props.
9
How do you access props in a Class Component?
A. getProps().name
B. this.props.name
C. props.name
D. super.name
Correct Answer: this.props.name
Explanation:
In a class component, props are accessed via 'this.props'.
10
Which attribute is used to assign a CSS class in React JSX?
A. className
B. class
C. cssClass
D. styleClass
Correct Answer: className
Explanation:
Since 'class' is a reserved keyword in JavaScript, React uses 'className' to define CSS classes.
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
Correct Answer: JavaScript Object
Explanation:
Inline styles in React are passed as a JavaScript object, not a string.
12
How is the CSS property 'background-color' written in React inline styles?
A. bgColor
B. background-color
C. backgroundColor
D. Background-Color
Correct Answer: backgroundColor
Explanation:
React uses camelCase for inline style properties to match the JavaScript DOM API.
13
What is the primary advantage of using CSS Modules?
A. It automatically adds TailwindCSS
B. It scopes CSS classes locally to the component
C. It removes the need for CSS
D. It allows writing CSS in PHP
Correct Answer: It scopes CSS classes locally to the component
Explanation:
CSS Modules generate unique class names, ensuring that styles are scoped locally to the component and do not conflict globally.
14
Which file extension is typically used for CSS Modules?
A. .module.css
B. .css
C. .js.css
D. .style.js
Correct Answer: .module.css
Explanation:
React recognizes files ending in '.module.css' as CSS Modules automatically.
15
What is TailwindCSS?
A. A component library like MaterialUI
B. A CSS-in-JS library
C. A React state manager
D. A utility-first CSS framework
Correct Answer: A utility-first CSS framework
Explanation:
TailwindCSS is a utility-first CSS framework that provides low-level utility classes to build custom designs.
16
How do you pass a prop named 'color' with value 'red' to a component 'Button'?
A. <Button color='red' />
B. Button.color = 'red'
C. <Button prop:color='red' />
D. <Button>red</Button>
Correct Answer: <Button color='red' />
Explanation:
Props are passed to components using syntax similar to HTML attributes.
17
In a functional component, how do you access props passed as an argument?
A. props
B. getProps()
C. arguments[0]
D. this.props
Correct Answer: props
Explanation:
Functional components accept a single argument, usually named 'props', which contains the data passed to the component.
18
Can a functional component use State?
A. Yes, using this.state
B. Yes, using the useState hook
C. No, never
D. Only if converted to a Class
Correct Answer: Yes, using the useState hook
Explanation:
With the introduction of React Hooks (specifically useState), functional components can manage state.
19
What keyword is used to inherit from React.Component in a class component?
A. extends
B. uses
C. inherits
D. implements
Correct Answer: extends
Explanation:
Class components are defined using ES6 classes that 'extend' React.Component.
20
Why is the 'key' prop important in lists?
A. It sorts the list alphabetically
B. It helps React identify which items have changed, added, or removed
C. It styles the list items
D. It is required for CSS Modules
Correct Answer: It helps React identify which items have changed, added, or removed
Explanation:
Keys help the reconciliation algorithm identify elements uniquely to optimize rendering performance.
21
Which of the following is NOT a valid way to style a React component?
A. Direct DOM manipulation of style attribute
B. CSS Stylesheets
C. CSS Modules
D. Inline Styling
Correct Answer: Direct DOM manipulation of style attribute
Explanation:
While technically possible via refs, direct DOM manipulation is contrary to React's declarative paradigm and is not a standard styling method.
22
In TailwindCSS, how would you apply a red text color?
A. font-red
B. text-red-500
C. style={{color: 'red'}}
D. color: red
Correct Answer: text-red-500
Explanation:
Tailwind uses utility classes like 'text-red-500' to apply styles directly in the className.
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. using 'App.css';
D. require('App.css');
Correct Answer: import './App.css';
Explanation:
Standard CSS files are imported directly using the ES6 import syntax with the relative path.
24
In React, what replaces the HTML 'for' attribute in labels?
A. ref
B. forId
C. labelFor
D. htmlFor
Correct Answer: htmlFor
Explanation:
'for' is a reserved keyword in JavaScript (for loops), so React uses '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 runs on the GPU
C. It compresses HTML files
D. It does not use JavaScript
Correct Answer: It uses the Virtual DOM to minimize direct DOM access
Explanation:
React computes the minimal set of changes needed using the Virtual DOM and applies them in a batch, which is faster than frequent direct DOM updates.
26
How do you use a default value for a prop in a functional component?
A. It is not possible
B. Use global variables
C. Check if it is null inside render
D. Define it in defaultProps or destructure with a default value
Correct Answer: Define it in defaultProps or destructure with a default value
Explanation:
You can use component.defaultProps or modern ES6 destructuring: function Comp({ name = 'Guest' }).
27
When using a Class Component, where do you typically initialize state?
A. In the constructor
B. In the return statement
C. In the CSS file
D. In the render method
Correct Answer: In the constructor
Explanation:
State is traditionally initialized in the constructor using this.state = { ... }.
28
What is 'children' in React props?
A. The child components defined within the opening and closing tags
B. An array of all components in the app
C. The subclass of a component
D. A method to create new components
Correct Answer: The child components defined within the opening and closing tags
Explanation:
props.children represents the content included between the opening and closing tags of a component.
29
Which configuration file is generated when initializing TailwindCSS?
A. style.config.js
B. css.config.json
C. tailwind.config.js
D. tailwind.json
Correct Answer: tailwind.config.js
Explanation:
Running npx tailwindcss init creates a tailwind.config.js file for customization.
30
Can a React component return null?
A. Only in development mode
B. Yes, it renders nothing
C. Only in class components
D. No, it throws an error
Correct Answer: Yes, it renders nothing
Explanation:
Returning null from a component tells React to render nothing for that component.
31
When using CSS Modules, how do you apply a class named 'header'?
A. style={header}
B. class='header'
C. className='header'
D. className={styles.header}
Correct Answer: className={styles.header}
Explanation:
CSS Modules require importing the styles object (usually named styles) and accessing the class name as a property.
32
What is the main difference between Functional and Class components regarding the this keyword?
A. Functional components do not use this to access props or state
B. Class components do not use this
C. There is no difference
D. Functional components use this extensively
Correct Answer: Functional components do not use this to access props or state
Explanation:
Functional components are plain functions and do not have instances, so they don't use this. Class components rely on this.
33
Which tool is commonly used to install TailwindCSS in a React project?
A. npm or yarn
B. composer
C. pip
D. maven
Correct Answer: npm or yarn
Explanation:
TailwindCSS is a Node package and is installed using Node Package Managers like npm or yarn.
34
In the Diffing Algorithm, what happens if the root elements of two trees are different types?
A. React throws an error
B. React keeps the old DOM and appends the new one
C. React updates only the attributes
D. React tears down the old tree and builds the new tree from scratch
Correct Answer: React tears down the old tree and builds the new tree from scratch
Explanation:
If the root elements are different (e.g., <div> to <span>), React assumes the entire subtree has changed and rebuilds it completely.
35
Can you use multiple CSS classes in the className attribute?
A. Yes, using an array
B. Yes, separated by commas
C. No, only one class is allowed
D. Yes, separated by spaces
Correct Answer: Yes, separated by spaces
Explanation:
Like HTML, multiple classes can be assigned in a single string separated by spaces.
36
What syntax allows you to render a component inside another component?
A. import ChildComponent
B. <ChildComponent />
C. new ChildComponent()
D. render(ChildComponent)
Correct Answer: <ChildComponent />
Explanation:
React components are composed by including the child component's JSX tag inside the parent's return statement.
37
What is a 'Stateless Functional Component'?
A. A functional component that does not use hooks to manage state
B. A component without props
C. A slow component
D. A component that cannot render HTML
Correct Answer: A functional component that does not use hooks to manage state
Explanation:
Before hooks, functional components were purely presentational and stateless. The term refers to a function that only receives props and renders UI.
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. style='color: red'
D. className={isActive}
Correct Answer: style={{ color: isActive ? 'red' : 'blue' }}
Explanation:
Inline styles accept an object, and ternary operators are commonly used within the object values for conditional styling.
39
Which feature allows you to pass data from a parent to a child component?
A. Ref
B. Context
C. Props
D. State
Correct Answer: Props
Explanation:
Props are the standard mechanism for passing data down the component tree from parent to child.
40
Which file contains the directives @tailwind base;, @tailwind components;, and @tailwind utilities;?
A. index.html
B. The main CSS entry file (e.g., index.css)
C. App.js
D. package.json
Correct Answer: The main CSS entry file (e.g., index.css)
Explanation:
These directives inject Tailwind's styles and are placed in the project's global CSS file.
41
How does React handle boolean values in JSX interpolation {true}?
A. It renders nothing
B. It renders 'true'
C. It throws an error
D. It renders a checkbox
Correct Answer: It renders nothing
Explanation:
Booleans, null, and undefined are valid children in React but they do not render anything to the DOM.
42
What is the correct way to export a component as the default export?
A. return ComponentName;
B. module.export = ComponentName;
C. export default ComponentName;
D. export ComponentName;
Correct Answer: export default ComponentName;
Explanation:
The ES6 syntax for a default export is export default VariableName;.
43
When using inline styles, which unit is assumed for unitless numbers on properties like width?
A. %
B. px (pixels)
C. rem
D. em
Correct Answer: px (pixels)
Explanation:
React automatically appends 'px' to unitless numbers for specific properties like width, height, margin, etc.
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
Correct Answer: Yes, to handle events or callbacks
Explanation:
Props can hold any JavaScript value, including functions, which allows child components to communicate back to parents.
45
What is the purpose of the super(props) call in a Class component constructor?
A. To import CSS
B. To call the parent class constructor and bind this.props
C. To render the component
D. To initialize the state
Correct Answer: To call the parent class constructor and bind this.props
Explanation:
In JavaScript classes, super calls the parent constructor. In React, passing props ensures this.props is set in the constructor.
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 more verbose
D. They are generally easier to read and test, and require less boilerplate
Correct Answer: They are generally easier to read and test, and require less boilerplate
Explanation:
Functional components reduce the boilerplate code (like constructors and this binding) associated with classes.
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
Correct Answer: Grouping multiple state updates into a single re-render for performance
Explanation:
React groups multiple state updates that occur in event handlers to trigger a single re-render/reconciliation cycle.
48
If a prop is passed to a component but not defined in the component's logic, what happens?
A. The prop is ignored
B. The app crashes
C. React throws a warning
D. It appears in the DOM as an attribute automatically
Correct Answer: The prop is ignored
Explanation:
If the component logic doesn't use the prop, it is simply ignored. It doesn't break the app or appear in the DOM unless explicitly rendered.
49
Can you use standard CSS and TailwindCSS in the same project?
A. Yes, they can coexist
B. Only in separate pages
C. Only if you use inline styles
D. No, they conflict
Correct Answer: Yes, they can coexist
Explanation:
TailwindCSS generates standard CSS classes. You can use them alongside your own custom CSS files without issue.
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 }
Correct Answer: function Comp({ name, age }) { ... }
Explanation:
Object destructuring inside the function parameter list ({ name, age }) is the standard cleaner way to access specific props.