React Components — Questions and Answers
Question 1: What is a React component?
- A CSS class
- A reusable piece of UI that can accept inputs (props) and return JSX describing what should appear on screen (Correct answer)
- A database table
- A server endpoint
Correct answer: A reusable piece of UI that can accept inputs (props) and return JSX describing what should appear on screen
Components are the building blocks of React applications, encapsulating UI logic and presentation into reusable, independent pieces.
Question 2: What is the difference between a functional and class component?
- There is no difference
- Functional components are functions that return JSX; class components extend React.Component with a render method (Correct answer)
- Functional components cannot have state
- Class components are faster
Correct answer: Functional components are functions that return JSX; class components extend React.Component with a render method
Functional components are simpler JavaScript functions. With hooks, they have the same capabilities as class components, which is why they are now preferred.
Question 3: What are props in React?
- CSS properties
- Read-only inputs passed from parent to child components to configure their behavior and display (Correct answer)
- Mutable state values
- API endpoints
Correct answer: Read-only inputs passed from parent to child components to configure their behavior and display
Props (properties) flow down from parent to child components, allowing parents to pass data and callbacks to customize child behavior.
Question 4: What is JSX?
- A JavaScript library
- A syntax extension that looks like HTML but is actually JavaScript, used to describe UI structure in React (Correct answer)
- A CSS framework
- A testing tool
Correct answer: A syntax extension that looks like HTML but is actually JavaScript, used to describe UI structure in React
JSX combines HTML-like syntax with JavaScript, making it easy to write UI code that describes what the rendered output should look like.
Question 5: What is the virtual DOM?
- A real DOM in a virtual machine
- A lightweight JavaScript representation of the real DOM that React uses to efficiently determine what needs to change (Correct answer)
- A hidden webpage
- A testing environment
Correct answer: A lightweight JavaScript representation of the real DOM that React uses to efficiently determine what needs to change
React keeps a virtual copy of the DOM in memory. When state changes, it compares the virtual DOM to the real DOM and updates only what changed (reconciliation).
Question 6: What is component composition in React?
- Mixing chemicals
- Building complex UIs by combining simpler components together, passing children and props (Correct answer)
- Writing CSS
- Compiling code
Correct answer: Building complex UIs by combining simpler components together, passing children and props
Composition means building complex components by combining simpler ones, rather than using inheritance. This is React's primary pattern for code reuse.
React Components
What is a React component?