1
What is the primary building block of a React application?
A. Package
B. Module
C. Component
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. kebab-case
B. snake_case
C. camelCase
D. PascalCase
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. componentDidMount
B. render
C. constructor
D. getInitialState
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. class MyComponent extends React.Component
B. const MyComponent = new Component()
C. function MyComponent() { return <div />; }
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. Compiling
B. Rendering
C. Reconciliation
D. Transpilation
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. Prototypes
B. Propositions
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. Only inside functional components
B. No, they are read-only
C. Yes, always
D. Only inside class components
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. this.props.name
B. props.name
C. super.name
D. getProps().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. class
B. cssClass
C. styleClass
D. className
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. Array
B. JavaScript Object
C. String
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 scopes CSS classes locally to the component
B. It automatically adds TailwindCSS
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. .js.css
B. .css
C. .module.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 React state manager
B. A CSS-in-JS library
C. A utility-first CSS framework
D. A component library like MaterialUI
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 prop:color='red' />
B. <Button color='red' />
C. <Button>red</Button>
D. Button.color = 'red'
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. this.props
C. arguments[0]
D. getProps()
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. Only if converted to a Class
B. Yes, using this.state
C. Yes, using the useState hook
D. No, never
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. inherits
B. extends
C. implements
D. uses
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 helps React identify which items have changed, added, or removed
B. It styles the list items
C. It sorts the list alphabetically
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. Inline Styling
B. CSS Modules
C. CSS Stylesheets
D. Direct DOM manipulation of style attribute
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. style={{color: 'red'}}
C. text-red-500
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. using 'App.css';
B. import './App.css';
C. include '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. forId
B. labelFor
C. htmlFor
D. ref
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 compresses HTML files
C. It does not use JavaScript
D. It runs on the GPU
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. Check if it is null inside render
C. Use global variables
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 return statement
B. In the CSS file
C. In the constructor
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 subclass of a component
B. A method to create new components
C. The child components defined within the opening and closing tags
D. An array of all components in the app
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 class components
B. Only in development mode
C. No, it throws an error
D. Yes, it renders nothing
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. className='header'
B. className={styles.header}
C. class='header'
D. style={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. There is no difference
B. Functional components use this extensively
C. Functional components do not use this to access props or state
D. Class components do not use this
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. composer
B. npm or yarn
C. maven
D. pip
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 keeps the old DOM and appends the new one
B. React tears down the old tree and builds the new tree from scratch
C. React updates only the attributes
D. React throws an error
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. Yes, separated by spaces
D. No, only one class is allowed
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. render(ChildComponent)
D. new 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 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
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. className={isActive}
D. style='color: red'
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. Props
C. State
D. Context
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. App.js
B. index.html
C. package.json
D. The main CSS entry file (e.g., index.css)
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 a checkbox
B. It throws an error
C. It renders nothing
D. It renders 'true'
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. module.export = ComponentName;
B. export ComponentName;
C. export default ComponentName;
D. return 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. px (pixels)
B. %
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. Only if the function is static
B. No, only strings and numbers
C. Only in Class components
D. Yes, to handle events or callbacks
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 call the parent class constructor and bind this.props
B. To render the component
C. To import CSS
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 are more verbose
B. They are generally easier to read and test, and require less boilerplate
C. They have more lifecycle methods
D. They support inheritance
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 all components at once every second
B. Updating the database in batches
C. Grouping multiple state updates into a single re-render for performance
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. React throws a warning
B. The prop is ignored
C. It appears in the DOM as an attribute automatically
D. The app crashes
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 if you use inline styles
C. Only in separate pages
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(props) { const name = props.name }
C. function Comp(name, age) { ... }
D. function Comp([name, age]) { ... }
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.