Theory - MVC and React Architecture
1. What does MVC stand for?
A: Model-View-Controller.
2. What is the role of the Model in MVC?
A: Manages data and business logic.
3. What is the responsibility of the View in MVC?
A: Handles the display/UI layer.
4. What does the Controller do in MVC?
A: Handles input, updates model, and returns a response.
5. What is a key benefit of using MVC architecture?
A: Separation of concerns for better maintainability.
6. Explain the MVC architecture and how it separates concerns in a web application.
A: MVC separates data (Model), UI (View), and logic (Controller), improving clarity and
maintainability.
7. Describe how MVC can be implemented in a [Link] and Express application with
examples.
A: Model: Mongoose schema; View: React front-end; Controller: Express routes and
business logic.
8. How does React fit into the MVC architecture, and what challenges arise when
combining it with traditional MVC?
A: React is mainly View but also has logic, challenging strict MVC adherence.
9. Compare and contrast MVC architecture with the architecture of a typical React
application.
A: MVC has strict roles; React combines UI and some logic in components.
10. Discuss how MVC architecture can be adapted to a MERN stack application,
including the roles of MongoDB, Express, React, and [Link].
A: MongoDB: Model, Express: Controller, React: View, [Link]: Server/runtime
environment.
11. What is the component-based architecture in React?
A: UI is built using reusable, independent components.
12. What is the role of the virtual DOM in React’s architecture?
A: A lightweight DOM copy used for efficient updates.
13. What is a unidirectional data flow in React?
A: Data flows from parent to child components using props.
14. What is the purpose of the Reconciliation process in React?
A: Reconciliation updates the DOM when component data changes.
15. What are Higher-Order Components (HOCs) in React?
A: Functions that accept and return a new enhanced component.
16. Explain how React’s component-based architecture improves code reusability and
maintainability.
A: Components can be reused across the app and are easier to test and manage.
17. Describe the lifecycle of a React component and how it integrates with the virtual
DOM.
A: Lifecycle includes mounting, updating, unmounting; integrates with virtual DOM
using hooks like useEffect.
18. How does React’s architecture handle state management, and what are the
differences between local state and global state (e.g., Redux)?
A: Local state uses useState, global uses Redux or Context API.
19. Discuss the role of hooks in modern React architecture and how they replace
class-based components.
A: Hooks like useState and useEffect provide lifecycle and state functionality in
functional components.
20. Explain how React’s rendering process works, from JSX to the actual DOM, including
diffing and updating.
A: JSX is compiled to JS -> virtual DOM -> diffing -> minimal DOM updates.
MongoDB Query Tasks
21. Find all users from 'New York' who are older than 30.
A:
[Link]({ city: 'New York', age: { $gt: 30 } })
22. Query orders with price > 500 and sort by orderDate descending.
A:
[Link]({ price: { $gt: 500 } }).sort({ orderDate: -1 })
23. Find users with status either 'active' or 'inactive'.
A:
[Link]({ status: { $in: ['active', 'inactive'] } })
24. Get orders where product name contains 'phone' (case-insensitive).
A:
[Link]({ product: { $regex: 'phone', $options: 'i' } })
25. Count number of orders per user, sorted descending.
A:
[Link]([{ $group: { _id: '$userId', count: { $sum: 1 } } }, { $sort: {
count: -1 } }])
26. Calculate total revenue per user from orders.
A:
[Link]([{ $group: { _id: '$userId', revenue: { $sum: { $multiply: ['$price',
'$quantity'] } } } }])
27. $lookup to join users with their orders and return user name with order details.
A:
[Link]([{ $lookup: { from: 'orders', localField: '_id', foreignField: 'userId',
as: 'orders' } }])
28. Find orders where quantity is between 1 and 5.
A:
[Link]({ quantity: { $gte: 1, $lte: 5 } })
29. Aggregate orders with $match price > 1000 and $group sum quantities by product.
A:
[Link]([{ $match: { price: { $gt: 1000 } } }, { $group: { _id: '$product',
totalQty: { $sum: '$quantity' } } }])
30. $lookup to join users and orders, $unwind to list each order with user details.
A:
[Link]([{ $lookup: { from: 'orders', localField: '_id', foreignField: 'userId',
as: 'orders' } }, { $unwind: '$orders' }])