FSWD SHORT ANSWERS

📘 Question Paper 1 – Code: 21270 (Nov/Dec 2023)

PART A – 2 Marks Answers

1. What is a web development framework? A web development framework is a pre-written collection of tools,
libraries, and standardized practices that simplifies building web applications. It provides a structured foundation with
features like routing, database integration, and MVC architecture, reducing repetitive code. Examples include
[Link] for backend and React for frontend. It accelerates development and enforces best practices.

2. What is Express in full stack? [Link] is a fast, minimalist web framework for [Link] in full stack development. It
handles server-side logic, routing, and middleware management. Express creates RESTful APIs that connect frontend
(React/Angular) with databases. It's lightweight, flexible, and forms the backend layer in MERN/MEAN stacks.

3. List the primitive types in [Link]. [Link] uses JavaScript's primitive types:
 String: Text data (e.g., "Hello")
 Number: Numeric values (e.g., 42, 3.14)
 Boolean: true or false
 Undefined: Uninitialized variable
 Null: Intentionally empty value
 Symbol: Unique identifier (ES6)
 BigInt: Large integers beyond Number range

4. What are callbacks in [Link]? Callbacks are functions passed as arguments to other functions, executed after an
asynchronous operation completes. They enable non-blocking I/O operations. Example: [Link]('[Link]', (err, data)
=> { [Link](data); }). Callbacks are fundamental to [Link]'s event-driven architecture but can lead to "callback hell"
if nested deeply.

5. Why MongoDB is called schema less database? MongoDB is schema-less because it stores data in flexible, JSON-like
documents without requiring a predefined table structure. Each document can have different fields and data types,
allowing dynamic schema evolution. This provides agility for applications with changing data requirements, unlike rigid
SQL tables.

6. What is database collection and document in MongoDB?

 Collection: A group of MongoDB documents (equivalent to an SQL table).

 Document: The basic data unit stored as BSON (Binary JSON), like { name: "John", age: 25 }. A collection contains
multiple documents, and databases organize multiple collections.

7. Differentiate between React and Angular.

Feature React Angular

Type Library (view layer) Full MVC Framework

 Feature React Angular

Language JSX (JavaScript XML) TypeScript

Data Binding One-way Two-way

DOM Virtual DOM Real DOM

Learning Easier curve Steeper curve

8. What is data binding in Angular and what is the use of data binding in Angular? Data binding is automatic
synchronization between the model (component) and view (template). Types include:

 One-way: Data flows single direction (component→view or view→component)

 Two-way: Automatic sync both ways using [(ngModel)] Use: Reduces boilerplate code, keeps UI and data
synchronized automatically, simplifying development.

9. List the three different packages in React for routing.

 react-router-dom: For web applications (most common)

 react-router-native: For React Native mobile applications

 react-router: Core package (used by the above platforms)

10. What is a MERN Stack? MERN Stack is a full-stack JavaScript framework:

 MongoDB: NoSQL database

 [Link]: Backend framework

 React: Frontend library

 [Link]: Runtime environment It enables end-to-end JavaScript development for building modern web
applications.

📘 Question Paper 2 – Code: 51313 (Apr/May 2024)

PART A – 2 Marks Answers

1. What is full stack web development? Full stack web development involves building both client-side (frontend) and
server-side (backend) portions of web applications. It includes working with databases, APIs, server configuration, and
UI/UX. A full stack developer handles the complete technology stack from database to user interface.

2. Outline the roles of backend services.

 Handle business logic and data processing

  Manage database operations (CRUD)

 Implement authentication & authorization

 Create RESTful APIs for frontend communication

 Ensure security, validation, and server management

3. What are callbacks and events in [Link]?

 Callbacks: Functions executed after async operations complete (non-blocking pattern).

 Events: Actions triggered by system/user (e.g., 'data', 'end'), handled by EventEmitter. Events emit signals and
callbacks handle the response, enabling [Link]'s event-driven architecture.

4. List and mention the purpose of any four timer methods in [Link].

 setTimeout(): Executes code once after specified delay

 setInterval(): Executes code repeatedly at intervals

 setImmediate(): Executes code at end of current event loop

 clearTimeout(): Cancels a pending timeout timer

5. Summarize the advantages of MongoDB over relational databases.

 Schema flexibility (no fixed structure)

 Horizontal scaling via sharding

 Faster read/write for unstructured data

 No complex joins needed

 JSON-like documents match JavaScript objects naturally

6. What are roles and permissions in MongoDB?

 Roles: Predefined privilege sets (e.g., read, readWrite, dbAdmin, userAdmin)

 Permissions: Specific actions allowed on database resources They enforce access control, ensuring users only
perform authorized operations for security.

7. What is [Link]? [Link] is a fast, minimalist web framework for [Link]. It simplifies server creation, routing,
and middleware management. Express provides utilities for handling HTTP requests/responses and building RESTful
APIs efficiently.

8. What is one-way and two-way binding in Angular?

  One-way binding: Data flows single direction (component→view via interpolation {{}}, or view→component via
event binding ())

 Two-way binding: Data flows both ways automatically using [(ngModel)] Two-way is simpler for forms; one-way
is more predictable and debuggable.

9. What are the benefits of React JS?

 Virtual DOM for superior performance

 Component-based architecture (reusable UI)

 Unidirectional data flow (easier debugging)

 Rich ecosystem and strong community

 React Native for cross-platform mobile apps

 SEO friendly with server-side rendering

10. What is MERN stack and its drawbacks? MERN Stack: MongoDB, [Link], React, [Link] (full JavaScript stack).

Drawbacks:

 JavaScript fatigue: Too many tools/configurations

 SEO challenges: Single Page Application nature

 Performance issues: Heavy memory usage

 Security: Lacks built-in security features

 Scalability complexity: Requires careful architecture

📘 Question Paper 3 – Code: 41350 (Nov/Dec 2024)

PART A – 2 Marks Answers

1. Compare between browser and web server.

 Browser: Client-side application (Chrome, Firefox) that requests and renders web pages

 Web Server: Server-side software (Apache, Nginx) that processes requests and serves content Browser initiates
HTTP requests; server handles logic and returns responses for browser to display.

2. Why do we need backend services? Backend services are essential for:

 Secure data processing and storage

 Business logic validation

 User authentication/authorization
  API creation for frontend communication

 Database management and server operations They protect sensitive operations that shouldn't be exposed
client-side.

3. Write a short note on NPM. NPM (Node Package Manager) is the default package manager for [Link]. It provides:

 Command-line tool to install/manage dependencies (npm install <package>)

 Online registry of over 1 million reusable packages

 [Link] for project configuration

 Scripts automation for development workflows

4. Compare event callbacks and threaded models.

Table

Copy

Aspect Event Callbacks ([Link]) Threaded Model

Threads Single thread Multiple threads

Operations Non-blocking, async Blocking, sync

Scalability High (low memory) Limited (high memory)

Use Case I/O intensive CPU intensive

5. List MongoDB datatypes with description.

 String: UTF-8 text data
 Number: Integer or floating-point
 Boolean: true or false
 Array: Ordered list of values: ["a", "b"]
 Object: Embedded document/subdocument
 ObjectId: Unique 12-byte identifier
 Date: Stores date and time
 Null: Null value representation

6. How to see user roles in MongoDB? Run commands in MongoDB shell:

 [Link]("username") → shows roles for specific user

 [Link]() → displays all users and their roles

  Query [Link] collection Requires appropriate admin privileges to view.

7. Differentiate between Typescript and Javascript.

Table

Copy

Feature TypeScript JavaScript

Typing Static (optional) Dynamic

Compilation Requires compilation Interpreted

Features OOP, interfaces, generics Flexible, less strict

Error Detection Compile-time Runtime

Use Angular development General web development

8. Importance of track by in ng-repeat directive.

 Performance optimization for large lists

 Helps Angular track item identity using unique keys

 Prevents unnecessary DOM re-rendering when data changes

 Syntax: ng-repeat="item in items track by [Link]"

 Critical when working with databases where items have unique identifiers

9. In render(), what happens if you return two <div> Error: "JSX expressions must have one parent element" React's
render() can only return single root element. To fix:

 Wrap in outer <div> or <[Link]> or <>...</> This maintains a single object tree structure that React can
efficiently diff and update.

10. Differentiate between React route parameter and query parameter.

 Route Parameter: Part of URL path: /user/:id → accessed via [Link]

 Query Parameter: After ? in URL: /user?id=123 → accessed via [Link]

 Route params define resource identity; query params are optional filters/sorts
 UNIT I – BASICS OF FULL STACK (15 Questions)
Q1. What is a web development framework? A web development framework is a
pre-written codebase that provides standardized tools, libraries, and structure
for building web applications. It simplifies common tasks like routing, database
interaction, and authentication. Examples include [Link], Angular, and React. It
enforces best practices and accelerates development.

Q2. What is the role of a web browser in full stack architecture? A web browser
is the client-side interface that:

 Renders HTML/CSS/JavaScript into visual web pages

 Sends HTTP requests to web servers
 Handles user interactions and input
 Stores cookies and local data
 Examples: Chrome, Firefox, Safari

Q3. What is a web server and its primary function? A web server is server-side
software that:

 Receives HTTP requests from browsers

 Processes requests and executes backend logic
 Serves static/dynamic content (HTML, JSON, images)
 Examples: Apache, Nginx, [Link] HTTP server

 Acts as the gateway between client and backend

Q4. What are backend services? Backend services are server-side components
that handle:

 Business logic and data validation

 Database operations (CRUD)
 User authentication & authorization
 API creation for frontend communication
 Security and server management They process requests that cannot be handled
client-side.
 Q5. Explain MVC Architecture. MVC (Model-View-Controller) is a design pattern
that separates application concerns:

 Model: Manages data and business logic

 View: Displays data to the user (UI)
 Controller: Handles user input and coordinates Model/View Benefit: Improves
maintainability, enables parallel development, and enforces separation of
concerns.

Q6. What is the difference between frontend and backend development?

Table
Copy

Frontend Backend

Client-side (browser) Server-side (databases, servers)

Handles UI/UX Handles business logic & data

Technologies: HTML, CSS, JS, Technologies: [Link], Express,

React MongoDB

Focus: Data processing &

Focus: User interaction security

Q7. What is a technology stack in web development? A technology stack is the

combination of programming languages, frameworks, and tools used to build a
complete web application. It includes:

 Frontend: React, Angular

 Backend: [Link], Express
 Database: MongoDB
 Server: Nginx/Apache Examples: MERN, MEAN, LAMP stacks.

Q8. What is the role of [Link] in a full stack?

 JavaScript runtime environment for server-side execution

 Enables non-blocking, event-driven architecture
 Handles I/O operations efficiently
 Runs [Link] for API creation
 Provides NPM ecosystem for package management

Q9. What is the role of [Link] in a full stack?

 Web framework for [Link]

 Simplifies routing and middleware management
 Creates RESTful APIs connecting frontend to database
 Handles HTTP requests/responses
 Provides structure for backend logic

Q10. What is the role of MongoDB in a full stack?

 NoSQL database for flexible data storage

 Stores JSON-like documents matching JavaScript objects
 Provides horizontal scalability for large applications
 Offers high performance for unstructured data
 Connects to [Link] via native drivers or Mongoose

Q11. What is the role of Angular in a full stack?

 Frontend framework for building single-page applications

 Provides two-way data binding for real-time UI updates
 Offers component-based architecture for reusable UI
 Includes built-in directives and dependency injection
 Written in TypeScript for type safety

Q12. What is the role of React in a full stack?

 JavaScript library for building user interfaces

 Uses Virtual DOM for high performance rendering
 Supports component-based architecture
 Enables unidirectional data flow for predictable state
 Can be used for server-side rendering in MERN stack

Q13. What is the MEAN stack? MEAN Stack is a full-stack JavaScript framework:

 MongoDB (database)
 [Link] (backend)
 Angular (frontend)
 [Link] (runtime) It enables end-to-end JavaScript development for building
dynamic web applications.

Q14. Differentiate between two-tier and three-tier architecture.

Two-Tier Three-Tier

Client + Server only Client + Server + Database

Direct database access Backend mediates database access

Less secure More secure & scalable

Simple, limited Complex, enterprise-ready

Q15. What are the responsibilities of a full stack developer?

 Develop frontend user interfaces with React/Angular

 Build backend APIs with [Link]/Express
 Design and manage databases (MongoDB)
 Handle deployment, hosting, and DevOps
 Debug and test across entire application stack
 Ensure security and performance optimization

UNIT II – NODE JS (15 Questions)

Q1. What is [Link]? [Link] is an open-source, cross-platform JavaScript
runtime environment built on Chrome's V8 engine. It executes JavaScript server-side
and uses an event-driven, non-blocking I/O model, making it lightweight and
efficient for building scalable network applications.

Q2. What are the key features of [Link]?

 Asynchronous and event-driven architecture

 Single-threaded with event loop (no thread overhead)
 NPM package ecosystem
 Fast execution via V8 engine
 Cross-platform compatibility
 Streaming and buffering capabilities

Q3. How do you install [Link] and verify installation?

 Download installer from [Link]

 Run installer for your OS

 Verify with commands:

bash
Copy
node --version # shows Node version
npm --version # shows NPM version

 NPM is included with [Link] installation

Q4. What is NPM and its purpose? NPM (Node Package Manager) is:

 Default package manager for [Link]

 Command-line tool to install/manage dependencies (npm install express)
 Online registry with 1+ million reusable packages
 Uses [Link] to track project dependencies and scripts

Q5. What is [Link] and its importance? [Link] is the project

configuration file that contains:

 Metadata: name, version, description

 Dependencies: packages required
 Scripts: custom commands (start, test)
 DevDependencies: development-only packages It makes projects portable and
reproducible.

Q6. Write a simple [Link] application that prints "Hello World".

JavaScript
Copy
// [Link]
[Link]("Hello World");

Run: node [Link]

Or as a web server:
 JavaScript
Copy
const http = require('http');
[Link]((req, res) => {
[Link]('Hello World');
}).listen(3000);

Q7. What are Events in [Link]? Events are actions or occurrences that happen in
the system (e.g., 'data', 'error', 'connection'). They are the core of [Link]'s event-
driven architecture. The EventEmitter class is used to create, emit, and handle
custom events.

Q8. What is EventEmitter? EventEmitter is a built-in [Link] class that:

 Emits named events

 Registers event listeners with .on() or .addListener()
 Triggers callbacks when events occur
JavaScript
Copy
const emitter = new EventEmitter();
[Link]('data', callback);
[Link]('data');

Q9. What is the Event Loop in [Link]? The Event Loop is a single-threaded loop
that:

 Continuously checks the event queue for pending callbacks

 Executes non-blocking operations asynchronously
 Enables high concurrency without multiple threads
 Core of [Link]'s non-blocking I/O model

Q10. What are callbacks in [Link]? Callbacks are functions passed as

arguments to other functions, executed after an asynchronous operation completes.
They enable non-blocking behavior:
JavaScript
Copy
[Link]('[Link]', (err, data) => {
if(err) throw err;
[Link](data);
});
 Q11. What is callback hell and how to avoid it? Callback hell is deeply nested
callbacks making code unreadable.

Solutions:

 Use Promises with .then()

 Use async/await syntax
 Modularize code into smaller functions
 Use named functions instead of anonymous

Q12. List four timer methods in [Link] with purpose.

 setTimeout(fn, ms): Execute once after delay

 setInterval(fn, ms): Execute repeatedly at intervals
 setImmediate(fn): Execute at end of current event loop
 clearTimeout(id): Cancel a pending timeout

Q13. How does [Link] handle Data I/O?

 Uses asynchronous, non-blocking I/O operations

 Streams data for large files (memory efficient)
 Buffers handle binary data
 Event-driven callbacks process data when ready
 Prevents server from freezing during file/network operations

Q14. How to implement HTTP services in [Link]? Use the built-in http module:
JavaScript
Copy
const http = require('http');
const server = [Link]((req, res) => {
[Link](200, {'Content-Type': 'application/json'});
[Link]([Link]({message: "Hello"}));
});
[Link](3000);

Q15. What is the difference between synchronous and asynchronous I/O?

Table
Copy
 Synchronous Asynchronous

Blocking (waits for operation) Non-blocking (continues execution)

Uses return values Uses callbacks/Promises

Simple but slow Complex but fast & scalable

Example: [Link]() Example: [Link]()

UNIT III – MONGO DB (15 Questions)

Q1. What is NoSQL and why is it needed? NoSQL is a non-relational database
approach that:

 Handles unstructured/semi-structured data

 Provides horizontal scalability
 Offers flexible schema for agile development
 Needed for big data, real-time web apps, and rapid iteration

Q2. What are the types of NoSQL databases?

 Document stores: MongoDB, CouchDB

 Key-value stores: Redis, DynamoDB
 Column-family stores: Cassandra, HBase
 Graph databases: Neo4j, ArangoDB Each type is optimized for specific data structures.

Q3. What is MongoDB? MongoDB is a document-oriented NoSQL database that

stores data in flexible, JSON-like BSON documents. It provides:

 Dynamic schemas (no fixed structure)

 Horizontal scaling via sharding
 High performance for read/write operations
 Rich query language and aggregation framework

Q4. What are the advantages of MongoDB over relational databases?

 Schema flexibility (no migrations needed)

 Horizontal scalability (add more servers)
 Faster for unstructured data (no joins)
 Native JavaScript object storage
 High availability via replica sets
 Geospatial and text search support

Q5. What is the difference between SQL and NoSQL databases?

Table
Copy

SQL NoSQL

Relational (ta Non-relational (docume

bles) nts, etc.)

Fixed
schema Dynamic schema

Vertical
scaling Horizontal scaling

ACID
compliance Eventual consistency

Complex No joins (embedded

joins docs)

Q6. How to install MongoDB on a system?

 Download from [Link] (Community/Atlas)

 Run installer for your OS

 Add bin directory to PATH

 Create data/db directory for storage
 Start server: mongod
 Connect with: mongo shell or Compass GUI

Q7. What is mongod and mongo?

 mongod: The MongoDB server daemon that runs the database process
 mongo: The interactive shell/client for connecting to MongoDB
 mongod must be running before mongo can connect

Q8. What is MongoDB Compass? MongoDB Compass is the official GUI tool for:

 Visualizing database structure

 CRUD operations without writing commands
 Query performance analysis
 Schema analysis and optimization
 Beginner-friendly alternative to command line

Q9. How to create a user account in MongoDB?

JavaScript
Copy
use admin;
[Link]({
user: "myUser",
pwd: "password",
roles: [{role: "readWrite", db: "myDB"}]
});

Run in admin database. Requires appropriate privileges.

Q10. What is role-based access control in MongoDB? RBAC restricts users to

authorized operations only:

 Assigns predefined roles (read, readWrite, dbAdmin)

 Controls database/collection-level access
 Enhances security by principle of least privilege
 Managed via [Link]() and [Link]()

Q11. What is a database in MongoDB? A database is a physical container for

collections in MongoDB. It's the top-level organizational unit that:

 Stores multiple collections

 Has separate access control
 Examples: admin, local, config (system dbs)
 Created implicitly when first collection is stored

Q12. What is a collection in MongoDB? A collection is a group of documents

(equivalent to SQL table). Key points:
 No fixed schema (documents can differ)
 Created automatically when first document inserted
 Example: users collection stores user documents
 Supports indexes and validation rules

Q13. What is a document in MongoDB? A document is a single data record

stored as BSON (Binary JSON). Characteristics:

 Key-value pairs (like JavaScript objects)

 Can contain nested documents and arrays
 Maximum size: 16 MB
 Example: {name: "John", age: 25, address: {city: "Chennai"}}

Q14. What are MongoDB data types? MongoDB supports:

 String, Number (int, double), Boolean

 Array: ["a", "b"]
 Object: nested documents
 ObjectId: unique identifier (_id)
 Date: timestamp
 Null: null value
 Binary Data: for files
 Decimal128: high-precision numbers

Q15. How to connect MongoDB to [Link]?

JavaScript
Copy
// Using native driver
const MongoClient = require('mongodb').MongoClient;
[Link]('mongodb://localhost:27017/mydb', callback);

// Using Mongoose
const mongoose = require('mongoose');
[Link]('mongodb://localhost:27017/mydb', {useNewUrlParser: true});

UNIT IV – EXPRESS AND ANGULAR (15 Questions)

Q1. What is [Link]? [Link] is a fast, minimalist web framework for
[Link]. It provides:

 Routing mechanism for endpoints

 Middleware support for request processing
 HTTP utility methods ([Link](), [Link])
 Template engine integration

 Simplifies RESTful API creation

Q2. What are the key features of Express?

 Robust routing system

 Middleware architecture
 Template engine support (EJS, Pug)
 Error handling capabilities
 Static file serving
 Session management
 HTTP helpers for quick responses

Q3. How to install [Link]?

bash
Copy
npm install express --save

Creates a local copy in node_modules. Use --save to add to [Link] dependencies.

Then import:
JavaScript
Copy
const express = require('express');
const app = express();

Q4. What is middleware in Express? Middleware functions have access to req,

res, and next():

 Execute during request-response cycle

 Handle logging, authentication, body parsing
 Applied globally: [Link](middleware)
 Route-specific: [Link]('/', auth, callback)
 Must call next() or response will hang

Q5. How to configure basic routes in Express?

JavaScript
 Copy
[Link]('/users', (req, res) => {
[Link]('GET request');
});
[Link]('/users', (req, res) => {
[Link]({message: 'POST request'});
});
[Link]('/users/:id', (req, res) => {
[Link](`Update user ${[Link]}`);
});
[Link]('/users/:id', (req, res) => {
[Link]('Delete user');
});

Q6. What is the difference between [Link] and [Link]?

 [Link]: Extracts values from URL route parameters (/user/:id)

 [Link]: Contains data submitted in request body (for POST/PUT)
 [Link] from URL; [Link] from client form/JSON data
 Need [Link]() middleware to parse [Link]

Q7. What is [Link]() vs [Link]() in Express?

 [Link](): Sends response (auto-detects type: string, Buffer, HTML)

 [Link](): Specifically sends JSON data with proper Content-Type: application/json
header
 Use [Link]() for APIs; [Link]() for general responses

Q8. What is Angular framework? Angular is a TypeScript-based, open-source

frontend framework developed by Google for building:

 Single Page Applications (SPAs)

 Progressive Web Apps (PWAs)
 Features two-way data binding, dependency injection, and component
architecture

Q9. What is TypeScript? TypeScript is a superset of JavaScript that adds:

 Static typing (type annotations)

 Object-oriented features (classes, interfaces, generics)
 Compile-time error checking
 Better IDE support (intellisense, refactoring)
 Compiles to plain JavaScript for browser execution

Q10. What are the advantages of TypeScript over JavaScript?

 Early error detection during compilation

 Improved code maintainability for large projects
 Better documentation via types
 Enhanced IDE features (autocomplete, navigation)
 Refactoring support with type safety
 Prevents many runtime errors

Q11. What is an Angular component? An Angular component is a building block

of UI that:

 Controls a view (template)

 Contains logic, data, and behavior in a class
 Decorated with @Component() metadata
 Has selector, template, styles, and **lifecycle hooks`
 Example: AppComponent is the root component

Q12. What is data binding in Angular? Data binding is automatic

synchronization between component (model) and template (view):

 One-way: Data flows single direction (component→view or view→component)

 Two-way: Data flows both ways ([(ngModel)])
 Reduces boilerplate code and keeps UI/data synchronized

Q13. What are the types of data binding in Angular?

 Interpolation: {{value}} (component→view)

 Property binding: [property]="value" (component→view)
 Event binding: (event)="handler()" (view→component)
 Two-way binding: [(ngModel)]="value" (both directions)
 Attribute binding: [[Link]]="value"

Q14. List five built-in directives in Angular.

 *ngIf: Conditionally adds/removes element

 *ngFor: Iterates over arrays
 *ngSwitch: Multiple condition switch
 ngClass: Dynamically adds CSS classes
 ngStyle: Dynamically adds inline styles
 ngModel: Two-way data binding for forms

Q15. Differentiate between structural and attribute directives.

Table
Copy

Structural Attribute

Changes DOM
structure (add/removes elements) Changes element appearance/behavior

Prefixed with * (*ngIf, *ngFor) No * prefix (ngClass, ngStyle)

Affects layout Affects styling/properties

Example: [ngClass]="{'active':
Example: *ngIf="condition" isActive}"

UNIT V – REACT (15 Questions)

Q1. What is React? React is a JavaScript library (not framework) for building user
interfaces, developed by Facebook. It:

 Uses Virtual DOM for performance

 Follows component-based architecture
 Enables declarative UI development
 Can be used for web and mobile (React Native)

Q2. What is JSX? JSX (JavaScript XML) is a syntax extension for JavaScript that:

 Allows writing HTML-like code in JavaScript

 Makes React code more readable
 Gets transpiled to [Link]() calls by Babel
 Example: <div className="app">Hello</div>
 Q3. What are React components? Components are reusable, independent UI
pieces that:

 Accept props (properties) as input

 Return React elements describing UI
 Can be functional or class-based
 Encapsulate logic and presentation
 Example: function Button({label}) { return <button>{label}</button>; }

Q4. Differentiate between functional and class components.

Table
Copy

Functional Class Component

Simple functions that ES6

return JSX classes extending [Link]

Use Hooks for Have lifecycle

state/lifecycle methods (componentDidMount)

** Cleaner syntax **, easier

testing ** More verbose **, older approach

Recommended approach Legacy but still valid

** Q5. What is React State? ** ** State ** is a ** built-in object ** that stores **

component-specific data ** that can ** change over time **. When state changes,
component ** re-renders **. Managed using:

 useState Hook (functional components)

 [Link] (class components)
 State is ** private ** and fully controlled by component

** Q6. What is the difference between props and state? **

Table

Copy
 Props State

** Managed within component **

** Passed from parent ** (read-only) (mutable)

** External ** data ** Internal ** data

** Cannot be changed ** by receiving ** Can be updated **

component with setState()

Makes components ** interactive

Makes components ** reusable ** **

** Q7. What is React Router? ** ** React Router ** is a ** standard routing library ** for
React that:

 Enables ** navigation** between components

 Maps URLs to components

 Supports nested routes and dynamic routing
 Provides Link, Route, Switch components
 Essential for single-page applications

Q8. What is the purpose of Link component in React Router?

 Navigates between routes without page reload

 Uses client-side routing for SPAs
 Example: <Link to="/about">About</Link>
 Renders as <a> tag but prevents default browser navigation
 Maintains application state during navigation

Q9. Differentiate between React route parameters and query parameters.

Table
Copy

Route Parameter Query Parameter

Part of URL path: /user/:id After ? in URL: /user?id=123

 Route Parameter Query Parameter

Accessed via Accessed via

** [Link] ** ** [Link] **

Defines ** resource identity ** Provides ** optional filters/sorts **

Example: /user/123 Example: /user?sort=name&order=asc

** Q10. What is Webpack and its purpose in React? ** ** Webpack ** is a ** module

bundler ** that:

 ** Bundles ** JavaScript files and assets

 ** Transpiles ** JSX and ES6+ code via loaders (Babel)

 ** Minifies ** code for production

 Manages ** dependencies and imports **

 Enables ** hot reloading ** in development

** Q11. What is Babel and why is it used? ** ** Babel ** is a ** JavaScript compiler **

that:

 ** Transpiles ** ES6+ code to browser-compatible ES5

 ** Converts JSX ** to [Link]()

 Allows using ** modern JavaScript features ** today

 Essential for React development toolchain

 Configured via .babelrc or [Link]

** Q12. What is server-side rendering (SSR) in React? ** ** SSR ** is rendering React

components on the ** server ** (not browser) that:

 Sends ** fully rendered HTML ** to client

 Improves ** SEO ** (search engine visibility)

 Provides ** faster initial page load **

 ** Hydrates ** on client to become interactive

 Implemented using ** [Link] ** or custom [Link] setup

** Q13. What are the benefits of server-side rendering? **

 ** Better SEO ** (search engines crawl HTML)

 ** Faster perceived performance ** (content visible sooner)

 ** Social media sharing ** (proper link previews)

 ** Works without JavaScript ** (basic functionality)

 Improved ** performance on slow devices **

** Q14. What is the MERN stack? ** ** MERN Stack ** is a ** full-stack JavaScript solution
**:

 ** M **ongoDB (NoSQL database)

 ** E **[Link] (backend framework)

 ** R **eact (frontend library)

 ** N **[Link] (runtime)

 Enables ** end-to-end JavaScript ** development

** Q15. What are the drawbacks of the MERN stack? **

 ** JavaScript fatigue ** (too many tools/configurations)

 ** SEO challenges ** (SPA nature requires SSR)

 ** Performance overhead ** (heavy memory usage)

 ** Security vulnerabilities ** (lacks built-in protection)

 ** Scalability complexity ** (requires careful microservices design)