Main Features of React
💡 Concept Name
React Features – A JavaScript library for building user interfaces using a component-based architecture and a virtual DOM for performance.
📘 Quick Intro
React is widely used for building dynamic web applications. Its core strengths are reusable components, a virtual DOM for efficient rendering, JSX syntax for templating, hooks for state management, and a unidirectional data flow model.
🧠 Analogy / Short Story
Building a React app is like assembling a Lego set—each block (component) has a defined purpose, can be reused, and fits perfectly into the bigger picture. React makes updates efficient by figuring out which blocks actually need to be moved (via virtual DOM).
🔧 Technical Explanation
- 🧱 Components: Reusable, self-contained building blocks for UI.
- 🌀 Virtual DOM: Efficient diffing and rendering mechanism.
- 🧬 JSX: JavaScript syntax extension that allows mixing HTML and JS.
- 🧠 Hooks: Manage state and side effects in functional components.
- ➡️ Unidirectional Data Flow: Data moves from parent to child, making apps predictable.
💻 Real Code Example
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
❓ Interview Q&A
Q1: What is JSX in React?
A: JSX is a syntax extension for JavaScript that allows writing HTML-like code in JS files.
Q2: What makes the virtual DOM efficient?
A: It minimizes real DOM updates by comparing snapshots and applying only the necessary changes.
Q3: What is unidirectional data flow?
A: It means data flows from parent to child components, making state changes predictable and debuggable.
Q4: What are hooks in React?
A: Functions like useState and useEffect that allow functional components to manage state and lifecycle.
Q5: What is the purpose of components in React?
A: Components encapsulate logic and UI, enabling modular and reusable code blocks.
Q6: Can React work without JSX?
A: Yes, JSX is syntactic sugar for React.createElement(), which can be used directly.
Q7: How does React handle UI rendering?
A: It builds a virtual DOM and syncs it with the real DOM efficiently using a diffing algorithm.
Q8: What's the role of props in React?
A: Props allow data to be passed from parent to child components as inputs.
Q9: How is state different from props?
A: State is local to the component, while props are passed in from parent components.
Q10: What is the benefit of component-based architecture?
A: It improves reusability, separation of concerns, and maintainability of code.
📝 MCQs
Q1. What is the purpose of JSX in React?
- To write CSS
- To define state
- To write HTML-like code in JS
- To manage routing
Q2. What is a key feature of virtual DOM?
- CSS styling
- State persistence
- Efficient diffing and rendering
- Data fetching
Q3. How does data flow in React?
- Two-way
- Only upward
- Unidirectionally from parent to child
- Randomly
Q4. What hook is used for managing local state?
- useEffect
- useState
- useProps
- useReducer
Q5. Are components reusable in React?
- No
- Yes
- Only class components
- Only in TypeScript
Q6. What does React.createElement() do?
- Defines a prop
- Manages state
- Creates a virtual DOM element
- Fetches data
Q7. Which of the following is a React hook?
- setInterval
- bindState
- useEffect
- getElement
Q8. What type of architecture does React use?
- Layered
- MVC
- Component-based
- Service-oriented
Q9. How are props passed in React?
- Child to parent
- Globally
- From parent to child
- Via Redux only
Q10. Can functional components use state?
- No
- Only class components can
- Yes, via hooks
- Only with Redux
💡 Bonus Insight
React's flexibility means it can be used for small widgets or large-scale apps. Combined with tools like React Router and Redux, it forms the foundation of many modern web applications.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!