What are Components in React?
💡 Concept Name
React Components are reusable building blocks of UI that can be either functions or classes, allowing developers to break the user interface into smaller, manageable parts.
📘 Quick Intro
Components in React encapsulate logic and layout together. Each component can manage its own state and receive data via props. Functional components are commonly used today, often enhanced with hooks like useState and useEffect.
🧠 Analogy / Short Story
Think of a webpage like a car. Each part—engine, tires, seats—is built separately and combined. Similarly, React components are self-contained parts of the UI, designed and reused like modular car parts that together build the full product.
🔧 Technical Explanation
- ⚛️ Components can be functional (using functions) or class-based (using ES6 classes).
- 📥 Props are used to pass data into components.
- 🔁 State allows a component to manage and react to internal data changes.
- 🧱 Components promote reusability and clean separation of concerns.
- 🧬 Components can be nested to form complex UI structures.
💻 Real Code Example
// Functional Component Example
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Welcome name="Developer" />
❓ Interview Q&A
Q1: What is a component in React?
A: A component is a reusable piece of UI that manages its own rendering, logic, and optionally its state and behavior.
Q2: What are the two types of components in React?
A: Functional components and class-based components.
Q3: What is the difference between props and state?
A: Props are read-only and passed by parent, while state is managed internally by the component and can change over time.
Q4: Why are components useful in React?
A: They promote modularity, reusability, and separation of concerns.
Q5: Can a component have other components inside it?
A: Yes, React allows nesting components to create a UI tree.
Q6: What hook is used to manage state in functional components?
A: The useState hook.
Q7: Can components be reused with different data?
A: Yes, by passing different props, components can render different content.
Q8: How do you define a functional component in React?
A: As a JavaScript function that returns JSX.
Q9: Are class components still used in React?
A: Yes, but functional components with hooks are now preferred.
Q10: What is the return type of a component?
A: A React element (typically JSX) which describes the UI structure.
📝 MCQs
Q1. What are React components?
- CSS elements
- Java methods
- Reusable UI building blocks
- HTML templates
Q2. Which are the two types of React components?
- Static and dynamic
- DOM and virtual
- Root and child
- Functional and class components
Q3. What is the purpose of props?
- Store internal data
- Create classes
- Pass data from parent to child
- Build routes
Q4. Which hook manages local state?
- useRouter
- useProps
- useContext
- useState
Q5. What must every React component return?
- HTML string
- CSS block
- JSX element
- JavaScript object
Q6. What is a key advantage of components?
- Increased size
- Global variables
- Modularity and reusability
- Hard-coded logic
Q7. What is the role of state in a component?
- Stores global data
- Handles routing
- Styles elements
- Stores internal dynamic data
Q8. Can components be nested?
- No
- Only class components
- Yes
- Only in class-based apps
Q9. Are props mutable?
- Yes
- Sometimes
- No
- Only in class components
Q10. What replaces lifecycle methods in functional components?
- Templates
- Mixins
- Hooks
- Reducers
💡 Bonus Insight
React’s power lies in its component-based architecture. Developers can write small, testable, independent components and assemble them to create scalable UIs. Hooks have made functional components even more powerful and concise.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!