Overview of JSX (JavaScript XML)

 JSX (JavaScript XML) is a syntax extension for JavaScript commonly

used with React to describe what the UI should look like.
 It allows developers to write HTML-like code within JavaScript, which
then gets transpiled into JavaScript by tools like Babel.
 JSX provides a more readable and intuitive way to build React
components, making it easier to visualize the structure of a component's
UI.
 Instead of using React.createElement() for every UI element, JSX lets
you write declarative code that closely resembles HTML, which is easier
to understand and maintain.

Key Features of JSX

1. HTML-like Syntax in JavaScript: JSX allows you to write HTML-like

code in your JavaScript files. This improves the clarity of component
structures.
2. JavaScript Expressions: You can embed JavaScript expressions inside
JSX using curly braces {}. This includes variables, functions, and
expressions.
3. JSX is Transpiled to React.createElement: Although JSX looks like
HTML, it's not natively understood by browsers. A tool like Babel
transpiles JSX into React.createElement() calls.
4. Self-closing Tags: JSX supports self-closing tags for void elements (like
<img />, <input />, <br />, etc.).
5. Props and Children: JSX allows you to pass props to components, and
children can be embedded inside JSX tags.
 6. Component-Based: JSX is heavily integrated into React, which follows a
component-based architecture. Components are reusable, modular units
of code that define how the UI should appear and behave.

Syntax of JSX

1. Basic JSX Syntax

JSX looks very similar to HTML, but there are some important differences:

 You must close all tags, even if they are self-closing.

 Attribute names are written in camelCase, e.g., className instead of
class, htmlFor instead of for.
 JavaScript expressions are placed within curly braces {}.

const element = <h1>Hello, World!</h1>;

In this example, the JSX element <h1>Hello, World!</h1> will be transpiled

into a React.createElement() call.

2. Embedding JavaScript Expressions

You can embed JavaScript expressions inside JSX by wrapping them in curly
braces {}.

const name = 'Alice';

const element = <h1>Hello, {name}!</h1>;

This will render the text Hello, Alice!, with the JavaScript expression {name}
being evaluated and inserted into the output.

3. Attributes in JSX
In JSX, attributes are written in camelCase. For example, instead of class, you
use className, and instead of for, you use htmlFor.

const element = <div className="container" htmlFor="input-id">Text</div>;

JSX uses the className attribute because class is a reserved keyword in

JavaScript.

4. JSX Children

JSX elements can have children, just like HTML elements.

const element = <button onClick={() => alert('Clicked!')}>Click Me</button>;

In this example, the button has a click event handler, and its text (Click Me) is
passed as a child.

5. Conditional Rendering with JSX

You can use JavaScript expressions such as ternary operators or logical && for
conditional rendering within JSX.

const isLoggedIn = true;

const element = (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
</div>
);

Or with &&:

const isLoggedIn = true;

const element = <div>{isLoggedIn && <h1>Welcome back!</h1>}</div>;
6. Rendering Arrays of Elements

JSX can render an array of elements, which is useful for dynamic lists.

const items = ['Apple', 'Banana', 'Cherry'];

const element = (
<ul>
{items.map(item => <li key={item}>{item}</li>)}
</ul>
);

Here, we are mapping over the items array and returning a list item for each
element.

7. JSX Fragment

If you need to return multiple elements without adding extra nodes to the DOM,
you can use React.Fragment or shorthand <>...</>.

const element = (
<>
<h1>Hello, World!</h1>
<p>This is a JSX fragment example.</p>
</>
);

Fragments allow you to return multiple elements without introducing a wrapper

node.

Rendering Lists with JSX:

You can render lists dynamically by using JavaScript's array methods like
.map(). Each element in the list must have a unique key attribute for React to
efficiently update the DOM.

Example:

const items = ['Apple', 'Banana', 'Cherry'];

const element = (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);

Transpiling JSX

JSX is not understood by browsers directly, so it must be transpiled to regular

JavaScript. This process is handled by tools like Babel.

For example, the JSX code:

const element = <h1>Hello, World!</h1>;

is transpiled into:

javascript
Copy code
const element = React.createElement('h1', null, 'Hello, World!');
This means that JSX gets converted into React.createElement() calls, which
React uses to create elements in the virtual DOM.

1. map() in JSX

The map() function is one of the most commonly used array methods in JSX. It
creates a new array by applying a function to each element in the original array.
In React, map() is often used to dynamically render lists of components or
elements.

 Syntax:

const newArray = array.map(callback(currentValue, index, array) => {

// return transformed value for each element
});

 Use Case in JSX: Dynamically render a list of elements from an array.

Example:

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li> // Rendering each fruit as a list item
 ))}
</ul>
);
}

export default FruitList;

 Explanation:
o We use the map() function to loop through the fruits array.
o For each item in the array, a <li> element is returned, which is
rendered in the <ul> element.
o The key={index} is added to each list item to help React identify
each element uniquely, which improves performance when
updating the list.

2. filter() in JSX

The filter() function creates a new array that contains only the elements that
satisfy a given condition. It’s useful for conditionally rendering items based on
specific criteria.

 Syntax:

const newArray = array.filter(callback(currentValue, index, array) => {

return condition;
});

 Use Case in JSX: Filter items based on a condition and render them.

Example:

import React from 'react';

function EvenNumberList() {
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Use filter to get only even numbers

const evenNumbers = numbers.filter(number => number % 2 === 0);

return (
<ul>
{evenNumbers.map((number, index) => (
<li key={index}>{number}</li> // Rendering even numbers only
))}
</ul>
);
}

export default EvenNumberList;

 Explanation:
o The filter() method filters the numbers array to include only even
numbers (number % 2 === 0).
o The filtered array, evenNumbers, is then mapped over to render
each even number in a <li> element.

3. reduce() in JSX

The reduce() function is used to apply a function to each element in an array,

accumulating a single result (such as a sum, product, or transformed value).

 Syntax:
 const result = array.reduce(callback(accumulator, currentValue, index,
array) => {
return newAccumulator;
}, initialAccumulatorValue);

 Use Case in JSX: Calculate a summary, like the total of a list of

numbers, or combine values into a single result.

Example:

import React from 'react';

function TotalPrice() {
const prices = [10, 20, 30, 40, 50];

// Use reduce to calculate the total price

const totalPrice = prices.reduce((total, price) => total + price, 0);

return (
<div>
<h1>Total Price: ${totalPrice}</h1>
</div>
);
}

export default TotalPrice;

 Explanation:
o The reduce() function is used to sum up all the prices in the prices
array.
 o total is the accumulator that starts at 0, and price is the current
element in the array. After each iteration, total is updated to include
the new price.
o The final result is displayed in the component.

Combining map, filter, and reduce in JSX

You can combine these array methods in more complex scenarios to transform
and display data in your JSX components.

Example: Rendering a filtered and mapped list with a calculated total:

import React from 'react';

function CartSummary() {
const cartItems = [
{ id: 1, name: 'Apple', price: 10, quantity: 2 },
{ id: 2, name: 'Banana', price: 5, quantity: 5 },
{ id: 3, name: 'Orange', price: 8, quantity: 3 },
{ id: 4, name: 'Grapes', price: 20, quantity: 1 },
];

// Filter items where quantity is greater than 2

const filteredItems = cartItems.filter(item => item.quantity > 2);

// Map over filtered items to render them

const itemList = filteredItems.map(item => (
<li key={item.id}>
 {item.name} - ${item.price} x {item.quantity} = ${item.price *
item.quantity}
</li>
));

// Calculate total price using reduce

const totalPrice = filteredItems.reduce(
(total, item) => total + item.price * item.quantity,
0
);

return (
<div>
<h1>Cart Summary</h1>
<ul>{itemList}</ul>
<h2>Total: ${totalPrice}</h2>
</div>
);
}

export default CartSummary;

 Explanation:
o Step 1: Use filter() to get only the items with a quantity greater
than 2.
o Step 2: Use map() to render each item in the filtered list, showing
the name, price, quantity, and total cost for each item.
o Step 3: Use reduce() to calculate the total price of the filtered
items.
Summary

 map(): Transforms an array by applying a function to each element. It's

frequently used in React to render lists of components.
 filter(): Filters an array to only include elements that meet certain criteria.
Often used to conditionally render items in React.
 reduce(): Accumulates values from an array into a single result (like a
sum, object, or concatenated string). It’s useful for performing
calculations or aggregating values.

What Are Arrow Functions?

Arrow functions are a concise way of writing functions. They use the => syntax
and have a few important differences compared to traditional function
expressions:

 No this binding: Arrow functions don’t have their own this. They inherit
this from the parent scope (lexical scoping), which is useful in React
when handling events.
 Concise syntax: Arrow functions are often used for single-expression
functions, making the code more compact and readable.
 Implicit return: If the function body is a single expression, the return
keyword can be omitted.

Syntax of an Arrow Function:

const functionName = (parameter1, parameter2) => {

// function body
};

const simpleFunction = (parameter1) => parameter1 * 2; // implicit return

Basic Comparison: Regular Function vs. Arrow Function

Regular Function:

function add(a, b) {
return a + b;
}

Arrow Function:

javascript
Copy code
const add = (a, b) => a + b; // implicit return

Arrow Functions in JSX: Common Use Cases

1. Event Handlers

Arrow functions are often used to define event handlers in JSX. Using
arrow functions ensures that the this keyword inside the function refers to
the current instance of the React component.

Example:

import React, { useState } from 'react';

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

// Arrow function for event handling

const incrementCount = () => {
setCount(count + 1);
 };

return (
<div>
<h1>Count: {count}</h1>
<button onClick={incrementCount}>Increase Count</button>
</div>
);
}

export default ClickCounter;

Explanation:

o The incrementCount function is defined using an arrow function.

o When the button is clicked, incrementCount is called, updating the
state and re-rendering the component.
2. Inline Event Handlers

Arrow functions are also used directly inside JSX as inline event
handlers. This is especially useful for quick actions.

Example:

import React, { useState } from 'react';

function Greeting() {
const [message, setMessage] = useState('Hello');

return (
<div>
 <h1>{message}</h1>
<button onClick={() => setMessage('Hello, World!')}>Change
Message</button>
</div>
);
}

export default Greeting;

Explanation:

o The onClick event handler is an inline arrow function that updates

the state when the button is clicked.
o This syntax eliminates the need for a separate function definition.
3. Rendering Lists with map()

Arrow functions are often used within map() when rendering lists in JSX.
This is a common pattern when working with dynamic data.

Example:

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Orange'];

return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li> // Arrow function inside map
))}
 </ul>
);
}

export default FruitList;

Explanation:

o The arrow function fruit => <li key={index}>{fruit}</li> is passed

to the map() method to render each fruit as a list item.
o The key={index} is used to ensure each element in the list is
uniquely identified.
4. Passing Arrow Functions as Props

Arrow functions can also be passed as props to child components. This is

often done to handle events or pass data from a parent to a child
component.

Example:

import React, { useState } from 'react';

function Child({ onButtonClick }) {

return <button onClick={onButtonClick}>Click Me</button>;
}

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

const increment = () => setCount(count + 1);

 return (
<div>
<h1>Count: {count}</h1>
<Child onButtonClick={increment} />
</div>
);
}

export default Parent;

Explanation:

o The increment arrow function is passed as a prop onButtonClick to

the Child component.
o When the button in the Child component is clicked, the arrow
function is invoked, which updates the state in the Parent
component.
5. Using Arrow Functions with Conditional Rendering

Arrow functions are useful for simplifying conditional rendering,

especially when you need to define small inline functions.

Example:

import React, { useState } from 'react';

function ToggleButton() {
const [isToggled, setIsToggled] = useState(false);

return (
<div>
 <h1>{isToggled ? 'On' : 'Off'}</h1>
<button onClick={() => setIsToggled(!isToggled)}>
Toggle
</button>
</div>
);
}

export default ToggleButton;

Explanation:

o The arrow function () => setIsToggled(!isToggled) is used to

toggle the state value of isToggled.
o The h1 element conditionally renders "On" or "Off" based on the
isToggled state.

Advantages of Using Arrow Functions in JSX

1. Concise Syntax: Arrow functions provide a more compact syntax, which

is especially helpful when writing inline functions or simple event
handlers in JSX.
2. No Need for .bind(): When using regular functions in React components,
you often need to use .bind() to bind the correct context (this) inside event
handlers. Arrow functions automatically bind this to the parent scope,
eliminating the need for .bind().
3. Lexical this: Arrow functions don't create their own this. They inherit
this from the surrounding context, which is particularly useful in React
components when accessing state or methods within event handlers.
 4. Readability: Arrow functions improve the readability of code, especially
when used in inline event handlers or when rendering dynamic lists in
JSX.

Important Considerations

1. Performance: Defining arrow functions inside JSX (especially in props

or event handlers) can sometimes cause performance issues due to the
fact that a new function is created on every render. However, this is
typically a minor concern unless you are rendering large lists or have
complex components. Using useCallback() in functional components or
shouldComponentUpdate() in class components can help mitigate this.
2. Debugging: While arrow functions are compact and convenient, they can
sometimes be harder to debug, especially when used inline. In these
cases, it might be helpful to extract the function to a separate method or
use console.log() for debugging.

What Are Lambda Expressions?

In functional programming, a lambda expression is a function defined without

a name. Lambda expressions are typically used for short-lived functions that are
not reused in other parts of the code.

They are useful for passing a block of code as an argument to higher-order

functions, such as map(), filter(), or reduce().

Lambda Expressions in JavaScript

JavaScript’s arrow functions are essentially lambda expressions. They are used
to define anonymous functions, and they have the following key characteristics:

 Concise syntax: Shorter function definitions.

 No this binding: In JavaScript, arrow functions inherit the this value
from the surrounding context, which makes them particularly useful in
React (see arrow functions in JSX).
 Implicit return: When the function body has a single expression, the
return keyword is implicit.

Syntax of Lambda Expressions (Arrow Functions)

General Syntax:

// Basic Lambda (Arrow) function

const functionName = (parameter1, parameter2) => {
// function body
};

// With implicit return (if there's only one expression)

const functionName = (parameter1, parameter2) => expression;

For a function with multiple parameters and a block body:

const add = (a, b) => {

return a + b;
};

For a function with a single expression (implicit return):

const add = (a, b) => a +b

Examples of Lambda Expressions in JavaScript

1. Basic Lambda Expression

Here's a simple lambda expression that adds two numbers:

const add = (a, b) => a + b;

console.log(add(2, 3)); // Output: 5

2. Lambda Expression with Multiple Parameters

If the function has multiple parameters, you can still define it concisely:

const multiply = (a, b, c) => a * b * c;

console.log(multiply(2, 3, 4)); // Output: 24

3. Lambda Expression with Implicit Return

For functions that only return a single expression, you can omit the return
keyword:

const square = (x) => x * x;

console.log(square(5)); // Output: 25

4. Lambda Expressions as Arguments to Higher-Order Functions

Lambda expressions are often used when passing functions as arguments to

higher-order functions, such as map(), filter(), and reduce():

const numbers = [1, 2, 3, 4, 5];

// Using map to create a new array with each number squared

const squares = numbers.map(x => x * x);
console.log(squares); // Output: [1, 4, 9, 16, 25]
Lambda Expressions in JSX and React

In React, arrow functions (lambda expressions) are extremely useful for writing
event handlers, inline functions, and rendering dynamic lists. They are typically
used when:

 You need a function in JSX for event handling (e.g., onClick, onChange).
 You need to define small functions to map, filter, or reduce arrays in JSX
rendering.
 You need to pass functions as props.

1. Using Lambda Expressions for Event Handling

Arrow functions are commonly used in JSX to handle events because they
preserve the this context of the surrounding scope (the React component).

import React, { useState } from 'react';

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

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
</div>
);
}

export default Counter;

  Explanation:
o The arrow function () => setCount(count + 1) is passed directly to
the onClick event handler.
o This allows setCount to use the count state value from the parent
scope.

2. Rendering Dynamic Lists Using Lambda Expressions

Lambda expressions are useful when rendering lists dynamically, particularly

when transforming data using methods like map().

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry'];

return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}

export default FruitList;

 Explanation:
 o The map() method uses an arrow function fruit => <li
key={fruit}>{fruit}</li> to generate each list item from the fruits
array.

3. Lambda Expressions as Props

You can pass lambda expressions as props to child components, especially

when you need to handle events in a child component.

import React, { useState } from 'react';

function Button({ onClick }) {

return <button onClick={onClick}>Click me</button>;
}

function Parent() {
const [message, setMessage] = useState("Hello!");

const handleClick = () => setMessage("Hello, World!");

return (
<div>
<h1>{message}</h1>
<Button onClick={handleClick} />
</div>
);
}

export default Parent;

  Explanation:
o The handleClick function is passed as a prop to the Button
component.
o When the button is clicked, handleClick updates the message state
in the parent component.

4. Conditional Rendering Using Lambda Expressions

Lambda expressions are also useful when handling conditions in JSX,

especially for inline conditional rendering.

import React, { useState } from 'react';

function Toggle() {
const [isToggled, setIsToggled] = useState(false);

return (
<div>
<h1>{isToggled ? "On" : "Off"}</h1>
<button onClick={() => setIsToggled(!isToggled)}>
Toggle
</button>
</div>
);
}

export default Toggle;

 Explanation:
 o The arrow function () => setIsToggled(!isToggled) is used to
toggle the state between true and false.
o The conditional rendering (isToggled ? "On" : "Off") displays the
current state.

Key Differences Between Lambda Expressions and Arrow Functions in

JavaScript

Arrow Functions (in

Feature Lambda Expressions
JavaScript)

A specific implementation of
A general programming concept
Concept lambda expressions in
(e.g., in Python, Java, C#).
JavaScript (introduced in ES6).

Depends on the language. For

The => syntax is used, like (x,
Syntax example, in Python: lambda x: x
y) => x + y.
+ 1.

In some languages like Python, JavaScript arrow functions

Return
lambda automatically returns the implicitly return a value if there
Keyword
expression result. is a single expression.

Depends on the language. In Arrow functions lexically bind

Binding of some languages, lambda this from the surrounding
this expressions inherit the context, context. They do not have their
while in others they don't. own this.

In some languages like Python, Arrow functions do not have

Arguments
lambda expressions do not have their own arguments object.
 Arrow Functions (in
Feature Lambda Expressions
JavaScript)

Object their own arguments object. They inherit it from the parent
scope.

REST (Representational State Transfer): Overview, Principles, and Usage

REST (Representational State Transfer) is an architectural style for

designing networked applications. It is often used in the context of web
services, especially in the design of APIs (Application Programming Interfaces)
that allow communication between different systems over the HTTP protocol.

REST emphasizes a stateless, client-server architecture and is built around the

idea of making system resources available via URLs (Uniform Resource
Locators), which clients can interact with using standard HTTP methods like
GET, POST, PUT, DELETE, etc.

REST is not a protocol but an architectural style, which means it outlines a set
of guidelines that a system should follow to be considered RESTful.

Key Principles of REST

REST is based on the following core principles, often referred to as

constraints:

1. Statelessness:
 o Every request from a client to a server must contain all the
information the server needs to fulfill the request. The server does
not store any information about the client between requests.
o Each request is independent and isolated, meaning there is no
session or memory of previous requests.
o This makes RESTful services scalable and easier to maintain.

Example: If a client wants to fetch user data, the request should include
all necessary parameters (e.g., authentication tokens) since the server
does not retain any information about previous requests.

2. Client-Server Architecture:
o REST architecture follows a client-server model, where the client
is responsible for the user interface and user experience, while the
server is responsible for processing the requests, managing
resources, and handling business logic.
o Clients and servers can evolve independently, as long as the
communication between them is maintained according to the REST
constraints.
3. Uniform Interface:
o REST requires that the interface between the client and server is
consistent and uniform, ensuring that resources are identifiable and
accessible in the same way regardless of which resource or service
is being interacted with.
o This makes it easier for developers to work with multiple RESTful
services, as the structure remains the same.

Key elements of a uniform interface:

o Resources are identified by URLs.

 o Standard HTTP methods (GET, POST, PUT, DELETE) are used
to operate on resources.
o Representations of resources are returned (e.g., JSON, XML).
4. Stateless Communication:
o Every HTTP request is independent, meaning no information about
the client's previous requests is stored by the server.
o This ensures that each request is isolated, which simplifies scaling
and ensures that each request has the same probability of success.
5. Cacheability:
o Responses from the server can be explicitly labeled as cacheable or
non-cacheable. If responses are cacheable, the client can reuse the
response for identical requests in the future, which can improve
performance and reduce load on the server.
o Cacheable data improves scalability and responsiveness.
6. Layered System:
o A RESTful system can be composed of multiple layers, each of
which has a specific responsibility. For example, a client can
interact with an intermediate proxy or load balancer, which
interacts with a server without knowing about the internal workings
of the server.
o This decouples the client from the server's architecture and allows
the system to scale more efficiently.
7. Code on Demand (optional):
o The server can provide executable code (e.g., JavaScript) to be
executed by the client. This is an optional constraint and is rarely
used, but it can allow clients to extend their functionality
dynamically.
RESTful HTTP Methods

In RESTful APIs, resources are manipulated using standard HTTP methods.

Here are the most common HTTP methods used in RESTful design:

1. GET (Retrieve):
o Used to retrieve data from the server. It is a safe and idempotent
method, meaning that it does not modify any data on the server and
can be called multiple times without changing the state of the
resource.
o Example: GET /users/123 to fetch user with ID 123.
2. POST (Create):
o Used to create a new resource on the server. The request body
typically contains the data to be created.
o Example: POST /users to create a new user. The request body
might contain { "name": "John Doe", "email":
"[email protected]" }.
3. PUT (Update):
o Used to update an existing resource. The request body contains the
updated data for the resource. PUT is idempotent, meaning that
calling it multiple times will not result in different outcomes.
o Example: PUT /users/123 to update the user with ID 123.
4. DELETE (Delete):
o Used to delete a resource on the server.
o Example: DELETE /users/123 to delete the user with ID 123.
5. PATCH (Partial Update):
o Used to apply a partial update to a resource. Unlike PUT, which
replaces the entire resource, PATCH only modifies the parts of the
resource that are specified in the request body.
 o Example: PATCH /users/123 to update some fields of the user
with ID 123, like their email or phone number.

Resources and URIs

In REST, resources are the core concept, and each resource is identified by a
URI (Uniform Resource Identifier) or URL (Uniform Resource Locator). A
resource could be a user, a product, a blog post, etc.

 Resource URLs: Each resource should have a unique URL.

 Example:
o User resource: GET /users/{userId}
o Product resource: GET /products/{productId}
o Blog post: GET /posts/{postId}

RESTful API Example

Consider a simple API for managing users:

HTTP
URL Action Example Request Body Description
Method
Fetch
Returns a list
GET /users all -
of all users.
users
Fetch a Returns
GET /users/{userId} single - details of a
user user with a
HTTP
URL Action Example Request Body Description
Method
specific
userId.
Creates a
Create new user
{ "name": "Alice", "email":
POST /users a new with the
"[email protected]" }
user provided
data.
{ "name": "Alice Updated",
Update Updates the
"email":
PUT /users/{userId} user user with the
"[email protected]"
details given userId.
}
Deletes the
Delete
DELETE /users/{userId} - user with the
a user
given userId.

Example API Request (using cURL):

# GET request to fetch user with ID 123

curl -X GET http://example.com/users/123

# POST request to create a new user

curl -X POST http://example.com/users -d '{"name": "Bob", "email":
"[email protected]"}'

Benefits of RESTful APIs

 1. Simplicity: REST APIs are simple to design and use, especially when
compared to more complex protocols like SOAP (Simple Object Access
Protocol).
2. Scalability: Statelessness and caching enable better scalability as systems
do not need to retain session data.
3. Flexibility: REST APIs can be used across different platforms and
devices. REST is based on widely adopted HTTP, which is supported by
nearly every programming language and platform.
4. Cacheability: REST allows responses to be explicitly marked as
cacheable or non-cacheable, which improves performance for repeated
requests.
5. Wide Adoption: REST has become the de facto standard for most
modern web APIs, especially in web and mobile applications.

Challenges with REST

1. Over-fetching/Under-fetching Data: If the API does not properly design

the endpoints, clients may receive more data than they need (over-
fetching) or not enough data (under-fetching).
2. No Standard for Query Parameters: While REST has guidelines,
there’s no strict standard for how query parameters should be structured.
This can lead to inconsistencies.
3. Limited Functionality: REST is great for simple CRUD operations, but
for more complex queries (e.g., nested relationships, aggregation), it
might require more complex query structures or additional endpoints.
4. Versioning: As REST APIs evolve, handling versioning can become a
challenge. There are different strategies, like versioning in the URL (e.g.,
/v1/users) or through headers.