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. PascalCase
B. camelCase
C. snake_case
D. kebab-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. componentDidMount
C. render
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. React.createClass({ ... })
B. function MyComponent() { return <div />; }
C. const MyComponent = new Component()
D. class MyComponent extends React.Component
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. Reconciliation
B. Transpilation
C. Rendering
D. Compiling
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. Proper HTML
C. Propositions
D. Prototypes
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. getProps().name
C. super.name
D. this.props.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. cssClass
B. styleClass
C. className
D. class
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. String
C. CSS File
D. JavaScript Object
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. 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 allows writing CSS in PHP
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. .js.css
B. .css
C. .style.js
D. .module.css
Correct Answer: .module.css
Explanation:
React recognizes files ending in '.module.css' as CSS Modules automatically.
15
What is TailwindCSS?
A. A utility-first CSS framework
B. A CSS-in-JS library
C. A component library like MaterialUI
D. A React state manager
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>red</Button>
C. <Button color='red' />
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. this.props
B. getProps()
C. props
D. arguments[0]
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. Only if converted to a Class
C. No, never
D. Yes, using this.state
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. implements
B. inherits
C. extends
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. Direct DOM manipulation of style attribute
B. Inline Styling
C. CSS Stylesheets
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. style={{color: 'red'}}
B. font-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. require('App.css');
B. import './App.css';
C. include 'App.css';
D. using '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. htmlFor
B. labelFor
C. forId
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 compresses HTML files
B. It runs on the GPU
C. It does not use JavaScript
D. It uses the Virtual DOM to minimize direct DOM access
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. Define it in defaultProps or destructure with a default value
B. Use global variables
C. It is not possible
D. Check if it is null inside render
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 render method
C. In the constructor
D. In the return statement
Correct Answer: In the constructor
Explanation:
State is traditionally initialized in the constructor using this.state = { ... }.
28
What is 'children' in React props?
A. A method to create new components
B. An array of all components in the app
C. The child components defined within the opening and closing tags
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. css.config.json
B. style.config.js
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. No, it throws an error
D. Only in class components
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. className={styles.header}
C. className='header'
D. class='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 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
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. pip
C. npm or yarn
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 tears down the old tree and builds the new tree from scratch
C. React keeps the old DOM and appends the new one
D. React updates only the attributes
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, separated by spaces
B. Yes, using an array
C. Yes, separated by commas
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. new ChildComponent()
B. render(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. style='color: red'
B. css={ isActive ? 'red' : 'blue' }
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. Ref
B. State
C. Props
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. The main CSS entry file (e.g., index.css)
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 a checkbox
B. It renders nothing
C. It throws an error
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. 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. em
C. px (pixels)
D. rem
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 import CSS
C. To initialize the state
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 have more lifecycle methods
B. They support inheritance
C. They are generally easier to read and test, and require less boilerplate
D. They are more verbose
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. Grouping multiple state updates into a single re-render for performance
B. Updating all components at once every second
C. Updating the database in batches
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. React throws a warning
C. The app crashes
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. No, they conflict
B. Yes, they can coexist
C. Only if you use inline styles
D. Only in separate pages
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.