IP : Assignment No.

Q1] What is a React Js? What are the advantages of React JS?
Ans.
React.js is an open-source JavaScript library developed by Facebook for building user
interfaces. It allows developers to create large web applications that can update and
render efficiently in response to data changes.

Key Concepts in React.js:

● Components: Building blocks of a React application. Each component is a
self-contained module (block of code) that can be reused across the
application.
● JSX: A syntax extension that allows you to write HTML directly within
JavaScript. React components are often written using JSX.
● Virtual DOM: React creates a lightweight in-memory representation of the
actual DOM (Document Object Model). When the state of an object changes,
React updates only the changed parts of the real DOM, making the process
more efficient.
Advantages of React.js:

1. Component-Based Architecture:
○ React promotes building UIs by breaking them down into smaller,
reusable components. This component-based approach makes it easier
to manage and scale large applications.
2. Virtual DOM:
○ React creates a lightweight in-memory representation of the actual
DOM (Document Object Model). When the state of an object changes,
React updates only the changed parts of the real DOM, making the
process more efficient.
3. Unidirectional Data Flow:
○ React follows a unidirectional data flow, meaning data moves in a single
direction (from parent to child components). This makes it easier to
debug and understand the flow of data in the application.
4. Rich Ecosystem:
○ React can be used with other libraries, like Redux for state
management, React Router for navigation, and many others.
5. React Native:
○ React Native allows developers to use React for building mobile
applications that run on both iOS and Android
6. Strong Community Support:
○ Being maintained by Facebook and supported by a large community of
developers, React has a vast ecosystem of libraries, tools, and
resources, making it easier to find solutions and support.

Q.2.i] Write a short note on REST API

Ans
REST API
● A REST API (or RESTful API) stands for REpresentational State Transfer
Application Programming Interface.
● At the most basic level, an API is a mechanism that enables an application or
service to access a resource within another application or service.

Principles of REST API

● Stateless: Each request from a client to the server must contain all the
information needed to understand and process the request. The server does
not store any session information about the client between requests.
● Resources: In REST, everything is considered a resource, which can be a piece
of data or an object, identified by a unique URL.
 ● HTTP Methods:
○ GET: Retrieve data from the server.
○ POST: Send data to the server to create a new resource.
○ PUT: Update an existing resource on the server.
○ DELETE: Remove a resource from the server.

Working of a REST API

1. Client Request: A client (like a web browser or mobile app) sends an HTTP
request to the server. This request includes a method (GET, POST, PUT,
DELETE), a URL identifying the resource, and optionally, data and headers.
2. Server Processing: The server receives the request, processes it according to
the specified HTTP method, and interacts with its backend systems, such as a
database, to perform the requested operation.
3. Response: After processing, the server sends back an JSON response to the
client. This response contains a status code indicating the success or failure of
the request, along with the requested data (for GET requests), a confirmation
(for POST/PUT/DELETE requests), or an error message.
4. Client Handling: The client receives the response and processes it, displaying
the data or handling the result of the operation accordingly.

Example
1. If you want to get information about a user with ID 123, the client might send
a GET request to https://api.example.com/users/123.
2. The server would process this request, retrieve the user's information from the
database, and return it in a JSON format as response.
Q.2.ii] Write a short note on DNS
Ans
● DNS stands for Domain Name System. It is a hierarchical and decentralised
naming system used to translate human-readable domain names (like
www.google.com) into machine-readable IP addresses (like 192.0.2.1).
● This system is essential for the functioning of the internet, allowing users to
access websites and other resources using easy-to-remember names instead
of numerical IP addresses.

Working of DNS : The below flowchart shows the working of DNS

1. User Request:
● When a user types a domain name into their web browser, the request
to access that domain is initiated.
2. Local DNS Resolver:
● The request first goes to a local DNS resolver (often provided by the
user's Internet Service Provider). This resolver is responsible for
handling the query.
3. Cache Check:
● The local DNS resolver checks its cache to see if it already has the IP
address for the requested domain name. If it does, it returns this
information to the user's device, completing the request.
● If the IP address is not in the local resolver's cache, the resolver starts a
recursive query, contacting other DNS servers in a hierarchical order to
find the IP address.
4. Root DNS Servers
● The local resolver first contacts the root DNS servers. These servers do
not have information about specific domain names but they examine
the domain name's extension (such as .com, .org, .net) and direct
 the query to the appropriate TLD DNS server that handles that
extension.
5. TLD DNS Servers
● The root DNS servers respond to the resolver with the IP address of the
TLD DNS server. TLD DNS server doesn’t know the IP address of the
domain name, but it does know the address of the authoritative DNS
server for the specific domain (e.g., example.com). It returns this
address to the resolver.
6. Authoritative DNS Servers
● The authoritative DNS servers are responsible for storing and providing
the IP address for specific domain names.
● The resolver then contacts the authoritative DNS server, which returns
the IP address of the requested domain.
7. Response
● The local DNS resolver receives the IP address from the authoritative
DNS server. It then sends this IP address back to the user’s browser.
● With the IP address in hand, the browser can now connect to the server
hosting the website, initiate an HTTP or HTTPS request, and load the
website content.
8. Caching
● To make future DNS lookups faster, the resolver caches the IP address it
received for a certain period, known as the Time-to-Live (TTL). This
way, if another request for the same domain name is made, the
resolver can respond immediately without querying the DNS hierarchy
again.

Q.2.iii] Write a short note on HTTP

Ans
HTTP (HyperText Transfer Protocol) is the foundational protocol used for transmitting
data over the web. It defines the rules for communication between web clients
(browsers) and servers, enabling the fetching of resources like HTML documents,
images, and other files.
Key Features of HTTP:

1. Stateless: Each HTTP request is independent and unrelated to previous ones,

meaning the server does not retain any information about previous requests.
To maintain state (e.g., for user sessions), technologies like cookies or sessions
are used.
2. Client-Server Model: The client (typically a web browser) initiates an HTTP
request to the server, which then processes the request and returns a
 response. This response could be an HTML page, an image, a video, or any
other type of data.
3. Methods (Verbs): HTTP defines various methods to indicate the desired action
on the resource. Common methods include:
○ GET: Requests data from a specified resource.
○ POST: Submits data to be processed to a specified resource.
○ PUT: Updates an existing resource with new data.
○ DELETE: Removes a specified resource.
4. Status Codes: The server's response includes a status code that indicates the
outcome of the request:
○ 1xx (Informational): Request received, continuing process.
○ 2xx (Success): Request successful (e.g., 200 OK).
○ 3xx (Redirection): Further action needed (e.g., 301 Moved
Permanently).
○ 4xx (Client Error): Client-side error (e.g., 404 Not Found).
○ 5xx (Server Error): Server-side error (e.g., 500 Internal Server Error)

Working of HTTP:

1. Client Request: A client (like a web browser or mobile app) sends an HTTP
request to the server. This request includes a method (GET, POST, PUT,
DELETE), a URL identifying the resource, and optionally, data and headers.
2. Server Processing: The server receives the request, processes it according to
the specified HTTP method, and interacts with its backend systems, such as a
database, to perform the requested operation.
3. Response: After processing, the server sends back an JSON response to the
client. This response contains a status code indicating the success or failure of
 the request, along with the requested data (for GET requests), a confirmation
(for POST/PUT/DELETE requests), or an error message.
4. Client Handling: The client receives the response and processes it, displaying
the data or handling the result of the operation accordingly.

Example
1. If you want to get information about a user with ID 123, the client might send
a GET request to https://api.example.com/users/123.
2. The server would process this request, retrieve the user's information from the
database, and return it in a JSON format as response.

Q.2.iv] Write a short note on JSON

Ans
JSON (JavaScript Object Notation)

● JSON, or JavaScript Object Notation, is a lightweight data-interchange format

that is easy for humans to read and write and easy for machines to parse and
generate.
● Despite its origin in JavaScript, JSON is a language-independent format,
widely used in data exchange between servers and web applications, and
supported by most modern programming languages.

Key Features of JSON:

1. Simple and Readable Syntax:
● JSON uses a simple syntax that closely mirrors JavaScript object literals,
which makes it easy to understand and write.
● Data in JSON is organized into key-value pairs, where the key is a string,
and the value can be a string, number, array, boolean, null, or another
JSON object.
● JSON data is enclosed within curly braces {}, and each key-value pair is
separated by a comma.

2. Language-Independent:
● Although JSON is derived from JavaScript, it is not limited to use within
JavaScript. JSON can be generated and parsed by almost any
 programming language, including Python, Java, C#, Ruby, PHP, and
many others.
● This makes JSON an ideal format for data exchange between different
systems, regardless of the programming languages they use.

3. Lightweight and Efficient:

● JSON's lightweight nature means that it uses minimal overhead, which
makes it efficient for transmitting data over networks.
● This efficiency is particularly valuable in web applications where
minimizing the size of data exchanged between the server and client is
crucial for performance.

4. Support for Nested Data Structures:

● JSON supports complex and nested data structures, allowing developers
to represent arrays, objects within objects, and other hierarchical data.
● This flexibility enables JSON to accurately model real-world data
relationships.

Example of a nested JSON object:

Common Uses of JSON:

● Web APIs: JSON is a popular format for exchanging data between web servers
and applications. APIs (Application Programming Interfaces) often use JSON to
send and receive data in a structured and efficient way.
● Configuration Files: JSON can store application settings or configuration data
in a human-readable format that's easy to modify.
 ● Data Interchange: JSON is a versatile format for transferring data between
different systems and applications, regardless of programming language.
● Database Communication: Some NoSQL databases use JSON-like document
structures, making it a natural fit for storing and retrieving data.

Q3] Differentiate between ES5 AND ES6.

Ans.

Parameter ES5 ES6

It's the 5th edition of ECMA It's the 6th edition of ECMA
Edition
script script

Introduced in the year 2009 2015

It has a lower performance It has a higher performance

Performance
as compared to ES6. as compared to ES5.

Variable declaration var let, const

Scope of variables Function scoped Block scoped

Symbol is supported which

Symbols Not supported
is a type of unique identifier

Variables are hoisted and Variables are hoisted but

Hoisting
initialised with undefined not initialised

Arrow function () => {} Not supported Supported

Provide default parameter

Default parameters Not supported
values in functions

Promises Not supported Supported

Rest Parameters Not supported Supported

Q4] Describe Anonymous function along with examples.

Ans.
● An anonymous function in JavaScript is a function that is defined without a
name.
● Unlike regular functions, anonymous functions are often used in situations
where the function is used as a value or passed as an argument to other
functions.
Key Characteristics of Anonymous Functions:

1. No Name: As the name suggests, anonymous functions do not have an

identifier. They are usually assigned to a variable, passed as an argument, or
used inline.
2. Usage in Callbacks: Anonymous functions are commonly used as arguments
in higher-order functions like map, filter, reduce, forEach, etc., where they
define the operation to be performed.
3. Flexibility: Since they don't require a name, anonymous functions are
convenient for one-time use and can be defined inline where they are needed.

1. Anonymous Function Assigned to a Variable:

In this example, an anonymous function is assigned to the variable square. The

function takes a parameter x and returns its square.

2. Immediately Invoked Function Expression (IIFE):

This is an example of an IIFE, where the anonymous function is defined and

immediately invoked.

3. Arrow Function:

In modern JavaScript (ES6 and later), anonymous functions are often written using
arrow function syntax, which is more concise

Q5] Describe different types of Arrow function along with example

Ans.
● Arrow functions in JavaScript, introduced in ES6, provide a more concise
syntax for writing function expressions.
 ● Arrow functions are anonymous by nature, and they are commonly used for
callbacks, array methods, and simple operations.
● There are different variations of arrow functions depending on the number of
parameters and the complexity of the function body.

1. Basic Arrow Function (Single Parameter)

When an arrow function has a single parameter, the parentheses around the
parameter are optional.

Here, the arrow function greet takes one parameter name and returns a greeting
message. Since there is only one parameter, the parentheses are omitted.

2. Arrow Function with Multiple Parameters

If an arrow function has more than one parameter, the parameters must be enclosed
in parentheses.

In this example, the arrow function add takes two parameters, a and b, and returns
their sum. The parameters are enclosed in parentheses.

3. Arrow Function with No Parameters

When an arrow function has no parameters, an empty pair of parentheses is used.

The sayHello function doesn't take any parameters and returns a fixed string.
4. Arrow Function with a Block Body

When the function body has multiple statements or requires additional logic, curly
braces {} are used to define a block body. In this case, the return keyword is needed
to return a value.

In this example, the arrow function multiply has a block body, which allows for
multiple lines of code. The result of the multiplication is stored in a variable result,
which is then returned.

5. Returning an Object Literal

When an arrow function needs to return an object literal, the object must be
wrapped in parentheses to distinguish it from the function body.

In this case, the arrow function createUser returns an object containing the name
and age properties. The object literal is wrapped in parentheses to avoid confusion
with the block body.

Q6] Writes a stepwise process to create an app using React JS to print “Hello
World”
Ans.
Step-wise Process to Create a React App to Print "Hello World!" is given as follows
Step 1 : Prerequisite
● To create a react project, node.JS and npm must be installed in your machine.
 ● We can check if it's already installed or not by running node -v for node.JS
and npm -v for npm in your terminal.

Step 2 : New Folder

● Create a new folder named “Hello” (name can be anything) in your computer.
● Open the folder you created in your preferred code editor.

Step 3 : Create React App

● Open the terminal of the code editor and run the following code to create a
react app. npx create-react-app hello-world
● This will create a new directory named hello-world with basic react project
setup.

Step 4 : Modify app component

● Now navigate to the src/App.js inside your react project and replace the
existing code with the following code

● import React from 'react': Imports the React library, which is essential for
creating React components.
● function App() react component named App that returns a JSX element (div)
containing an h1 element displaying the "Hello World!" message.
● export default App;: Makes the App component available for use in other
parts of your React application.

Step 5 : Running the App

● Now run npm start in the terminal of your code editor. Your react project will
start running on http://localhost:3000
● Your browser should open it automatically, or you can manually navigate to
http://localhost:3000 to see "Hello World!" displayed.
By following these steps, we’ll have created a simple React application that prints
"Hello World!" to the browser. This process introduces us to the basics of setting up
and modifying a React project.
Q7] Explain the DOM model with a neat diagram.
Ans.
The Document Object Model (DOM) is a programming interface for web documents.
It represents the structure of a document (such as an HTML or XML document) as a
tree of objects, where each object corresponds to a part of the document (e.g.,
elements, attributes, text). The DOM allows developers to access and manipulate the
content and structure of web pages dynamically.

Key Points of the DOM:

1. Tree Structure: The DOM represents a document as a tree structure, where

each node is an object representing a part of the document. The root of the
tree is the document object, which represents the entire document.
2. Nodes: The DOM consists of different types of nodes, such as:
○ Element nodes: Represent HTML tags (e.g., <div>, <p>, <img>).
○ Attribute nodes: Represent the attributes of HTML elements (e.g.,
class, id).
3. Parent-Child Relationships: Nodes in the DOM tree are connected by
parent-child relationships. An element that contains other elements is
considered the parent, and the elements within it are considered its children.

2. Accessing the DOM

JavaScript provides several methods to access and interact with the DOM:

● document.getElementById(id): Selects an element by its unique ID.

● document.getElementsByClassName(className): Selects elements with a
specified class name.
● document.getElementsByTagName(tagName): Selects elements with a
specific tag name.
● document.querySelector(selector): Selects the first element matching a CSS
selector.
● document.querySelectorAll(selector): Selects all elements matching a CSS
selector.
Diagram Explanation:
Let’s consider the following HTML

The DOM tree for the above HTML would look like this: