Web resources:

Dribbble.com – for prototype development of a website.

Balsamiq.cloud – for pencil paper prototype design development.

Colour Theory:
Typography: exx - Stangith for the titles And Sofia pro for body text.
User Interface Design:
Example using Promise
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.htm");
req.onload = function() {
if (req.status == 200) {
myResolve(req.response);
} else {
myReject("File not Found");
}
};
req.send();
});

myPromise.then(
 function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);

Example
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {

let x = 0;

// The producing code (this may take some time)

if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});

myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);

Using Promise response and reject for waiting for response of API call:
Using Async and await to wait until we get data then console log the data.

Making API request using Axios npm Package:

Making API request using fetch method:

Export
Modules with functions or variables can be stored in any external file.

There are two types of exports: Named Exports and Default Exports.

Named Exports
Let us create a file named person.js, and fill it with the things we want to
export.

You can create named exports two ways. In-line individually, or all at once at
the bottom.

In-line individually:
person.js

export const name = "Jesse";

export const age = 40;

All at once at the bottom:

person.js

const name = "Jesse";

const age = 40;

export {name, age};

Default Exports
Let us create another file, named message.js, and use it for demonstrating
default export.

You can only have one default export in a file.

Example
message.js

const message = () => {

const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;

Import
You can import modules into a file in two ways, based on if they are named
exports or default exports.

Named exports are constructed using curly braces. Default exports are not.

Import from named exports

Import named exports from the file person.js:

import { name, age } from "./person.js";

Import from default exports

Import a default export from the file message.js:

import message from "./message.js";

JavaScript Callbacks
A callback is a function passed as an argument to another function.

Using a callback, you could call the calculator function ( myCalculator) with
a callback (myCallback), and let the calculator function run the callback after
the calculation is finished:

Example
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {

let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

In the example above, myDisplayer is a called a callback function.

It is passed to myCalculator() as an argument.

Note
When you pass a function as an argument, remember not to use parenthesis.

Right: myCalculator(5, 5, myDisplayer);

Wrong: myCalculator(5, 5, myDisplayer())myCalculator(5, 5, myDisplayer());

How to use insert css in react

Use of map in List

State in React is like a variable which can change for example:

const [count, setCount] = useState(0);

return (
 <div className="App">
<button onClick={() => {setCount(count + 1)}}>Increase</button>
<button onClick={() => {setCount(count - 1)}}>Decrease</button>
<button onClick={() => {setCount(0)}}>Set to Zero</button>
{count}
</div>
);
Here count is an example of state.

Lifecycle of React Component:

1) Mounting – Time when the component first appear in UI or screen.
2) Updating – Updating the component in this phase.
3) Unmounting – Disappearance of component from the UI or screen.

Every React component goes through the same lifecycle:

 A component mounts when it’s added to the screen.

 A component updates when it receives new props or state, usually in

response to an interaction.

 A component unmounts when it’s removed from the screen.

Custom Hooks:
Use Object {} : When we want to have predefined variables name then return
state in form of Object.
Use Array [] : When we do not want variable name to be predefined and we
can change variables name then we should return state in the array.
Types of Hook: 1) UseState:

2) UseReducer Hook: If we want to perform multiple actions on some event for

example change count and toggle text on clicking of button.
3) UseEffect: It is called when page renders first time so it manage state at the
first time when page loads, for example: API call for fetching data for the first
time.

4) UseRef: It is used to manipulate DOM to add some functionality, for ex: If

we want to focus or clear the data in the input field when a button is clicked.

5) useLayout: It is similar to useEffect but it is change the state or data before

printing of the UI whereas useEffect change or fetch the data after priting of
UI. In other way it is faster to get data then useEffect.

6) useImperativeHandle: It is used if we want to access the functions or change

the state of Child Component from the parent Component.
7) useContext: It is used when we want to share multiple states and functions
to all the child components from the parent component without using props in
such cases useContext is best way to pass those states and functions.

To start a new Create React App project with TypeScript, you can
run:

npx create-react-app my-app --template typescript

To add TypeScript to an existing Create React App project, first

install it:
npm install --save typescript @types/node @types/react @types/react-dom
@types/jest
TypeScript – used to define type of variables, state and prop.
Enums in TypeScript: It is a way of defining the types of options we can have.
Command for using Redux-Toolkit:

Next.js:
Features which are different from the react:
1) Enhance SEO – by using the concept of server-side rendering we can load
the html and css at server side then browser can open the web page without
processing the html and css at client side which improves SEO(ranking or
website).
2) Routing – In react we use additional package known as react-router-dom for
routing purpose but the next.js uses file-based routing system which help us
simplifying routing.
3) Ability to create full Stack web application – next.js has a new feature known
as API routes enabling the creation of serverless functions to handle the API
requests. Serverless APIs in Next.js is a way of creating API endpoints without
any need for a traditional server. For creating an API endpoint for a particular
route just create a file route.js for a particular folder.

4) Automatic code splitting:

Code Splitting is a technique that break down large bundles of JavaScript code
into smaller, more manageable chunks that can be loaded as needed.
This reduces the initial load time of a website and optimizes the user’s
experience while browsing.
In react code splitting is done manually. For example, we use lazy function and
Suspense component to do it.
In Next.js code splitting is completely automatic.
Q. What are the core components of an HTTP request?
Method: GET, POST, PUT/PATCH, DELETE
URI: used for identifying the resource typically using url
HTTP version: http version used i.e., http 1.1 or http 2.0
Request Header: contains the meta data of request which can be message
format, cache settings, content format, etc.
Request Body(Optional): this contains the content or data that been send.
Q. What are the core components of an HTTP response?
Status Code: Status code represent success or failure of request ex: 200, 404
HTTP version: http version used i.e., http 1.1 or http 2.0
Response Header: contains the meta data of response like content type,
content length, date, etc.
Response Body: which contains the response data

1. How are REST APIs stateless?

REST (Representational State Transfer) APIs are stateless because 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 client
context between requests, meaning it doesn't retain any information about
previous interactions. This statelessness allows REST APIs to scale easily and
handle large volumes of requests because the server treats each request
independently.
2. Explain the HTTP methods
 GET: Retrieves data from the server. It is safe, idempotent, and can be
cached.
 POST: Sends data to the server to create a new resource. It is not
idempotent.
 PUT: Updates an existing resource on the server. It is idempotent.
 DELETE: Removes a resource from the server. It is idempotent.
  PATCH: Partially updates a resource on the server. It is not necessarily
idempotent.
 HEAD: Similar to GET, but it only retrieves the headers of the resource,
not the body.
 OPTIONS: Describes the communication options for the target resource.
 CONNECT: Establishes a tunnel to the server identified by the target
resource.
 TRACE: Performs a message loop-back test along the path to the target
resource.
3. Explain the HTTP codes
 1xx Informational: Request received and understood.
o 100 Continue, 101 Switching Protocols
 2xx Success: The request was successfully received, understood, and
accepted.
o 200 OK, 201 Created, 204 No Content
 3xx Redirection: Further action needs to be taken to complete the
request.
o 301 Moved Permanently, 302 Found, 304 Not Modified
 4xx Client Errors: The request contains incorrect syntax or cannot be
fulfilled.
o 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not
Found
 5xx Server Errors: The server failed to fulfill a valid request.
o 500 Internal Server Error, 502 Bad Gateway, 503 Service
Unavailable
4. What is a URI?
A URI (Uniform Resource Identifier) is a string of characters that identifies a
particular resource. It can be further classified into URLs (Uniform Resource
Locators), which provide the means to access the resource (e.g.,
http://example.com/resource), and URNs (Uniform Resource Names), which
identify the resource by name.
5. Best practices in making URI for RESTful web services
 Use nouns to represent resources, not verbs (e.g., /users instead of
/getUsers).
 Use lowercase letters and hyphens to separate words (e.g., /user-
profiles).
 Use plural nouns to represent collections (e.g., /users for a collection of
users).
 Avoid using file extensions in URIs (e.g., /users instead of /users.json).
 Use query parameters for filtering, sorting, and searching (e.g., /users?
sort=desc).
 Maintain consistency in naming conventions across the API.
6. Differences between REST and SOAP
 Protocol: REST is an architectural style, while SOAP (Simple Object
Access Protocol) is a protocol.
 Data Format: REST typically uses JSON or XML, while SOAP exclusively
uses XML.
 Transport: REST can use multiple protocols like HTTP, while SOAP
primarily relies on HTTP or SMTP.
 Complexity: REST is simpler and faster, while SOAP is more complex and
has built-in WS-* standards for security, transactions, etc.
 Statelessness: REST is stateless, whereas SOAP can be either stateless or
stateful.
 Performance: REST generally performs better due to its lightweight
nature, while SOAP is more resource-intensive.
7. Differences between REST and AJAX
 Purpose: REST is an architectural style for designing networked
applications, while AJAX (Asynchronous JavaScript and XML) is a
technique for creating dynamic and asynchronous web applications.
  Scope: REST is used for communication between client and server over
HTTP, while AJAX is used to update parts of a web page without
reloading it.
 Data Format: REST APIs often use JSON for data exchange, while AJAX
can work with various data formats including JSON, XML, and HTML.
8. Tools to develop and test REST APIs
 Postman: A popular API testing tool that allows users to create, share,
test, and document APIs.
9. Real-world examples of REST APIs
 Twitter API: Allows developers to interact with Twitter data, including
tweets, user profiles, and trends.
 GitHub API: Provides access to GitHub repositories, issues, pull requests,
and user data.
 Google Maps API: Offers various services like geocoding, directions, and
place searches.
 Stripe API: Facilitates payment processing for e-commerce applications.
10. Pros and cons of RESTful web services
 Pros:
o Simplicity: REST APIs are easy to understand and use.
o Scalability: Statelessness and separation of client and server
promote scalability.
o Flexibility: Supports multiple formats like JSON, XML, and HTML.
o Performance: REST APIs are lightweight and can be cached,
leading to better performance.
 Cons:
o Security: REST APIs rely on HTTP, which might need additional
layers of security.
o Overhead: For some complex operations, REST might introduce
additional overhead.
 o Statelessness: While it enhances scalability, it might complicate
client-server interactions.
11. What is a payload in the context of a REST API?
A payload refers to the data sent in an HTTP request or response body. In a
POST request, the payload contains the data to be processed by the server
(e.g., JSON data in a POST request body). In a response, it’s the data returned
by the server.
12. What is a REST message?
A REST message consists of:
 HTTP Request: Sent from the client to the server, consisting of a method
(GET, POST, etc.), a URI, headers, and an optional payload.
 HTTP Response: Sent from the server to the client, consisting of a status
code, headers, and an optional payload.
13. What are the core components of an HTTP request?
 Method: The action to be performed (e.g., GET, POST).
 URI: The resource identifier (e.g., /api/users).
 Headers: Metadata about the request (e.g., content type, authorization).
 Body: The payload of the request, used in methods like POST or PUT.
14. What are the core components of an HTTP response?
 Status Code: Indicates the result of the request (e.g., 200 OK, 404 Not
Found).
 Headers: Metadata about the response (e.g., content type, cache
control).
 Body: The payload of the response, containing the requested data or
error information.
15. What is an idempotent method and why are they important?
An idempotent method is an HTTP method that can be called multiple times
without different outcomes. Methods like GET, PUT, and DELETE are
idempotent because no matter how many times they are called, the result will
be the same. Idempotency is important because it ensures that repeated
requests do not cause unintended side effects, making operations predictable
and reliable.
16. What's the difference between idempotent and safe HTTP methods?
 Idempotent Methods: Can be called multiple times with the same effect
(e.g., GET, PUT, DELETE).
 Safe Methods: Do not modify resources on the server, only retrieve data
(e.g., GET, HEAD).
17. Explain caching in a RESTful architecture?
Caching in RESTful architecture involves storing copies of responses for
requests so that the same request can be served more quickly in the future.
HTTP headers like Cache-Control, ETag, and Expires are used to manage
caching behavior. Caching improves performance by reducing server load and
decreasing response times for clients.
18. Best practices in developing a RESTful web service
 Use nouns for resource names: Represent resources as nouns in URIs.
 Version your API: Include a version number in the URI (e.g., /v1/users).
 Use HTTP status codes appropriately: Return the correct HTTP status
code for each response.
 Secure your API: Implement authentication and authorization, and use
HTTPS.
 Handle errors gracefully: Provide meaningful error messages and
appropriate status codes.
 Document your API: Use tools like Swagger to provide clear API
documentation.
 Optimize performance: Use techniques like caching, pagination, and
data compression.
 Keep it stateless: Ensure each request contains all the necessary
information to be processed independently.