1
What is the primary building block of a React application?
A. Module
B. DOM
C. Package
D. Component
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. camelCase
B. kebab-case
C. PascalCase
D. snake_case
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. getInitialState
B. render
C. constructor
D. componentDidMount
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. function MyComponent() { return <div />; }
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 CSS processing engine
B. A database for storing state
C. A lightweight JavaScript representation of the real DOM
D. A direct copy of the browser's 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. Rendering
B. Transpilation
C. Compiling
D. Reconciliation
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. Properties
B. Propositions
C. Prototypes
D. Proper HTML
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. props.name
B. this.props.name
C. getProps().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. styleClass
B. class
C. className
D. cssClass
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. JavaScript Object
B. Array
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. Background-Color
B. bgColor
C. background-color
D. backgroundColor
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 allows writing CSS in PHP
B. It automatically adds TailwindCSS
C. It scopes CSS classes locally to the component
D. It removes the need for CSS
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. .style.js
B. .css
C. .module.css
D. .js.css
Correct Answer: .module.css
Explanation:
React recognizes files ending in '.module.css' as CSS Modules automatically.
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
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.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. this.props
B. 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. Yes, using the useState hook
B. No, never
C. Yes, using this.state
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. implements
C. uses
D. inherits
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 sorts the list alphabetically
C. It is required for CSS Modules
D. It styles the list items
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. Inline Styling
D. CSS Modules
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. color: red
C. style={{color: 'red'}}
D. text-red-500
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. require('App.css');
B. using 'App.css';
C. include 'App.css';
D. import './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. ref
C. htmlFor
D. labelFor
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 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
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. 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
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 CSS file
B. In the constructor
C. In the return statement
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. An array of all components in the app
B. The child components defined within the opening and closing tags
C. A method to create new components
D. The subclass of a component
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. No, it throws an error
B. Yes, it renders nothing
C. Only in class components
D. Only in development mode
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 do not use this to access props or state
C. Class components do not use this
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. composer
B. maven
C. pip
D. npm or yarn
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 updates only the attributes
C. React tears down the old tree and builds the new tree from scratch
D. React keeps the old DOM and appends the new one
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. No, only one class is allowed
B. Yes, separated by spaces
C. Yes, separated by commas
D. Yes, using an array
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. render(ChildComponent)
B. new ChildComponent()
C. <ChildComponent />
D. import 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 slow component
B. A component that cannot render HTML
C. A component without props
D. A functional component that does not use hooks to manage state
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. css={ isActive ? 'red' : 'blue' }
B. style='color: red'
C. className={isActive}
D. style={{ color: isActive ? 'red' : 'blue' }}
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. Context
B. State
C. Ref
D. Props
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. package.json
B. App.js
C. The main CSS entry file (e.g., index.css)
D. index.html
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 renders 'true'
C. It renders nothing
D. It throws an error
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. export ComponentName;
C. module.export = ComponentName;
D. export default 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 render the component
B. To initialize the state
C. To import CSS
D. To call the parent class constructor and bind this.props
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 support inheritance
D. They have more lifecycle methods
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. Downloading multiple files
C. Updating all components at once every second
D. Grouping multiple state updates into a single re-render for performance
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 app crashes
B. It appears in the DOM as an attribute automatically
C. React throws a warning
D. The prop is ignored
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. Only if you use inline styles
B. No, they conflict
C. Only in separate pages
D. Yes, they can coexist
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(props) { const name = props.name }
B. function Comp([name, age]) { ... }
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.