What's the difference between JSX attributes and HTML attributes?
JSX attributes are used for styling, while HTML attributes are for functionality.
JSX attributes are written in camelCase, while HTML attributes are lowercase.
There is no difference, they are the same.
JSX attributes can only be strings, while HTML attributes can be any data type.
How does the useEffect Hook in functional components relate to lifecycle methods in class components?
useEffect
useEffect combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount.
componentDidMount
componentDidUpdate
componentWillUnmount
useEffect is a replacement for componentDidMount only.
useEffect is only used for data fetching.
There is no relationship between useEffect and lifecycle methods.
In JSX, how would you set the 'class' attribute for an element?
What will happen if you update the state directly in a React component?
An error will be thrown, and the application will crash.
Nothing will happen; the state will remain unchanged.
The component will re-render, and the state change will be reflected correctly.
The component will re-render, but the state change won't be reflected.
What's a common way to bind event handlers in React class components?
Using arrow functions in the render method
render
Calling addEventListener within the componentDidMount lifecycle method
addEventListener
Using bind in the constructor
bind
Both 'Using bind in the constructor' and 'Using arrow functions in the render method'
How do you define default props for a functional component in React?
Default props are not supported for functional components
By passing them as arguments to the component
Using the defaultProps property of the component function
defaultProps
Inside the component's function body
What is the purpose of event.preventDefault() in React event handling?
event.preventDefault()
To detach the event handler after it has been executed once
To prevent the default behavior of the event (like form submission)
To stop the event from bubbling up the component tree
To cancel the event entirely and prevent any further actions
Why is event binding often necessary in class components?
To ensure that this refers to the correct component instance inside event handlers
this
Event binding is not necessary in React; it's an older JavaScript concept.
To allow passing custom arguments to event handlers
To prevent default browser behavior for all events
Which of the following is NOT a valid way to bind an event handler in a React class component?
Using addEventListener directly on the DOM element
Binding in the constructor: this.handleClick = this.handleClick.bind(this)
this.handleClick = this.handleClick.bind(this)
Using an arrow function in the callback: onClick={() => this.handleClick()}
onClick={() => this.handleClick()}
Directly passing the method: onClick={this.handleClick}
onClick={this.handleClick}
What is the primary purpose of components in React?
To directly manipulate the DOM
To break down the UI into independent, reusable pieces
To handle user interactions
To manage application state