DEV Community: Lokesh

useState in React

Lokesh — Sun, 01 Nov 2026 11:26:21 +0000

What Is `useState`?

useState is a React Hook that allows us to add and manage state in a functional component.

In simple words, useState helps us store a value and update it when needed.

For example, we can use state to store:

A counter value
User input
A selected product
A login status
Data from an API

How to Import `useState`

First, we need to import it from React.

import { useState } from "react";

Basic Syntax

const [state, setState] = useState(initialValue);

Here:

state → stores the current value.
setState → updates the value.
initialValue → the starting value.

Simple Counter Example

import { useState } from "react";

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

    function increment() {
        setCount(count + 1);
    }

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

export default Counter;

When the button is clicked:

The increment() function runs.
setCount(count + 1) updates the state.
React re-renders the component.
The updated value appears on the screen.

Another Example: Updating Text

import { useState } from "react";

function App() {
    const [name, setName] = useState("");

    return (
        <div>
            <input
                type="text"
                onChange={(event) => setName(event.target.value)}
            />

            <h2>Hello, {name}</h2>
        </div>
    );
}

export default App;

As the user types in the input field, the name state is updated and displayed on the screen.

Why Do We Use `useState`?

useState helps us create interactive React applications.

It can be used for:

Counters
Forms
Dropdown menus
Show/hide content
Shopping carts
Product selections

What Is React?

Lokesh — Sun, 01 Nov 2026 11:23:00 +0000

What Is React?

React is a JavaScript library used to build user interfaces (UI).

It is mainly used to create interactive and dynamic web applications.

For example, websites and applications often have:

Buttons
Forms
Navigation bars
Product cards
User profiles
Interactive pages

React helps developers build and manage these user interfaces more easily.

Why Do We Use React?

When building a large website using only HTML, CSS, and JavaScript, managing the code can become difficult.

React helps by dividing the user interface into smaller, reusable parts called components.

For example:

Website
   │
   ├── Navbar
   ├── Product List
   │      ├── Product Card
   │      ├── Product Card
   │      └── Product Card
   │
   └── Footer

Each part can be created as a separate component.

What Are Components?

A component is a reusable piece of the user interface.

For example:

function Welcome() {
    return <h1>Hello, World!</h1>;
}

This creates a simple React component.

We can use components to build different parts of a website.

React Uses JSX

React commonly uses JSX.

JSX allows us to write HTML-like code inside JavaScript.

Example:

function App() {
    return <h1>Hello, React!</h1>;
}

Although it looks similar to HTML, JSX is written inside JavaScript.

React Can Update the UI

React helps update the user interface when data changes.

For example, if a user clicks a button and a value changes, React can update the relevant part of the screen.

This makes it useful for building interactive applications.

Popular Uses of React

React can be used to build:

E-commerce websites
Social media applications
Dashboards
Portfolio websites
Single-page applications
Interactive web applications

REST API

Lokesh — Sun, 01 Nov 2026 11:18:43 +0000

What Is an API?

API stands for Application Programming Interface.

In simple terms, an API allows different applications to communicate with each other.

For example, a frontend application can send a request to a server and receive data in return.

What Is a REST API?

REST stands for Representational State Transfer.

A REST API is a common way for applications to communicate over the internet using HTTP.

For example, an e-commerce application may use an API to:

Get all products.
Get a single product.
Add a new product.
Update a product.
Delete a product.

HTTP Methods

REST APIs commonly use different HTTP methods to perform different operations.

1. GET

GET is used to retrieve data.

Example:

GET /products

This can be used to get a list of products.

fetch("https://dummyjson.com/products")
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    });

2. POST

POST is used to send new data to the server.

For example, we can use it to create a new product or user.

POST /products

3. PUT

PUT is commonly used to replace or update a resource.

Example:

PUT /products/1

4. PATCH

PATCH is used to partially update a resource.

For example, we may only want to update a product's price.

PATCH /products/1

5. DELETE

DELETE is used to remove data.

Example:

DELETE /products/1

What Is an Endpoint?

An endpoint is a specific URL used to access a resource through an API.

For example:

/products

This endpoint may be used to access product data.

Another example:

/products/1

This endpoint may be used to access a specific product.

REST API and JSON

REST APIs commonly send and receive data in JSON format.

Example:

{
    "id": 1,
    "name": "Laptop",
    "price": 50000
}

The frontend can receive this data and display it to the user.

Simple Example

Imagine an e-commerce website.

The frontend sends a request:

GET /products

The server responds with product data:

[
    {
        "id": 1,
        "name": "Laptop"
    },
    {
        "id": 2,
        "name": "Mobile"
    }
]

The frontend can then display these products on the webpage.

Important REST API Concepts

Here are some important things to remember:

API – Allows applications to communicate.
REST – A common architectural style for designing web APIs.
Endpoint – A URL used to access a resource.
GET – Retrieves data.
POST – Creates new data.
PUT – Replaces or updates a resource.
PATCH – Partially updates a resource.
DELETE – Removes data.
JSON – A common format for exchanging data.

REST APIs are an important part of modern web development. They allow frontend and backend applications to communicate with each other.

JSON in JavaScript

Lokesh — Sun, 01 Nov 2026 11:15:53 +0000

What Is JSON?

JSON stands for JavaScript Object Notation.

JSON is a simple format used to store and exchange data.

It is commonly used when sending data between a server and a web application.

For example, when we fetch data from an API, the data is often sent in JSON format.

Example of JSON

{
    "name": "Lokesh",
    "age": 22,
    "course": "Java Full Stack"
}

JSON stores data using key-value pairs.

For example:

"name" is a key.
"Lokesh" is its value.

JSON vs JavaScript Object

JSON looks similar to a JavaScript object, but there are some differences.

JavaScript Object

let user = {
    name: "Lokesh",
    age: 22
};

JSON

{
    "name": "Lokesh",
    "age": 22
}

One important difference is that JSON requires property names to be written with double quotes.

JSON.stringify()

JSON.stringify() converts a JavaScript object into a JSON string.

let user = {
    name: "Lokesh",
    age: 22
};

let jsonData = JSON.stringify(user);

console.log(jsonData);

Output:

{"name":"Lokesh","age":22}

This is useful when we need to send JavaScript data in JSON format.

JSON.parse()

JSON.parse() converts a JSON string into a JavaScript object.

let jsonData = '{"name":"Lokesh","age":22}';

let user = JSON.parse(jsonData);

console.log(user.name);

Output:

Lokesh

Now, we can access the data like a normal JavaScript object.

JSON and APIs

JSON is commonly used with APIs.

For example:

fetch("https://dummyjson.com/products")
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    });

Here:

fetch() requests data from the API.
response.json() reads and parses the JSON response.
We can then use the data in JavaScript.

Important Points to Remember

JSON stands for JavaScript Object Notation.
JSON is used to store and exchange data.
JSON uses key-value pairs.
JSON.stringify() converts a JavaScript value into a JSON string.
JSON.parse() converts a JSON string into a JavaScript value.
JSON is commonly used when working with APIs.

JavaScript Closures

Lokesh — Fri, 23 Oct 2026 16:01:06 +0000

Let's learn what closures are and how they work!

1. What Is a Closure?

A closure happens when a function remembers variables from the scope where it was created, even after the outer function has finished executing.

In simple words, a function can remember the variables around it.

2. Understanding Closures with an Example

function outer() {
    let message = "Hello";

    function inner() {
        console.log(message);
    }

    inner();
}

outer();

Output:

Hello

Here, the inner() function can access the message variable because it is inside the outer() function.

But what happens if we return the inner function instead?

3. A Real Closure Example

function outer() {
    let message = "Hello";

    function inner() {
        console.log(message);
    }

    return inner;
}

const myFunction = outer();

myFunction();

Output:

Hello

Let's understand what happens:

outer() creates the message variable.
The inner function is returned and stored in myFunction.
The outer() function finishes executing.
We call myFunction().
The inner function still remembers the message variable.

This is a closure!

The inner function remembers the variables from its surrounding scope, even after the outer function has finished executing.

4. Closures Can Remember Changing Values

Let's look at another example.

function counter() {
    let count = 0;

    return function () {
        count++;
        console.log(count);
    };
}

const myCounter = counter();

myCounter();
myCounter();
myCounter();

Output:

1
2
3

Why does this happen?

Initially, count is 0.
Each time we call myCounter(), count increases by 1.
The function remembers the same count variable between calls.

This is one of the most common examples of closures in JavaScript.

5. Why Are Closures Useful?

Closures are useful for:

Remembering data between function calls.
Creating counters.
Keeping variables private.
Maintaining state without using global variables.

For example, the count variable in our counter example cannot be accessed directly from outside the function.

console.log(myCounter.count);

Output:

undefined

The variable is not a property of myCounter. It remains in the surrounding lexical environment that the closure can access.

Conclusion

Closures are easier to understand when you remember one important idea:

A function can remember variables from the scope where it was created, even after that scope's outer function has finished executing.

Keep practising closures with small examples like counters and private variables. They will help you understand more advanced JavaScript concepts and React.

Happy Coding! 🚀

Async/Await in JavaScript

Lokesh — Fri, 23 Oct 2026 15:59:16 +0000

Async/await makes working with Promises easier and helps us write asynchronous code in a clean, readable way.

Let's understand it with simple examples!

1. What Is Async/Await?

async and await are JavaScript keywords used to work with asynchronous operations.

async is used to declare an asynchronous function.
await waits for a Promise to settle before continuing the execution of that async function.

2. Understanding `async`

When we use async before a function, that function always returns a Promise.

async function greet() {
    return "Hello, JavaScript!";
}

greet().then((message) => {
    console.log(message);
});

Output:

Hello, JavaScript!

Even though we return a normal string, the async function returns a Promise that fulfills with that string.

3. Understanding `await`

The await keyword waits for a Promise's result before continuing inside the async function.

function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data received!");
        }, 2000);
    });
}

async function displayData() {
    const result = await getData();
    console.log(result);
}

displayData();

Output after approximately two seconds:

Data received!

Here, await waits for the Promise returned by getData() to fulfill before assigning its value to result.

Note: await pauses the async function, not the entire JavaScript application.

4. Using Async/Await with Fetch API

We often use async/await when fetching data from an API.

async function getProducts() {
    const response = await fetch(
        "https://fakestoreapi.com/products"
    );

    const products = await response.json();

    console.log(products);
}

getProducts();

Let's understand the code:

fetch() requests product data from the API.
await waits for the response.
response.json() reads and parses the response body.
await waits for the parsed data.
console.log() displays the products.

5. Handling Errors with Try/Catch

Sometimes, an API request may fail. We can use try...catch to handle errors.

async function getProducts() {
    try {
        const response = await fetch(
            "https://fakestoreapi.com/products"
        );

        if (!response.ok) {
            throw new Error("Failed to fetch products");
        }

        const products = await response.json();

        console.log(products);
    } catch (error) {
        console.log("Error:", error.message);
    }
}

getProducts();

The try block contains the code we want to execute. If an error is thrown or an awaited Promise rejects, the catch block handles it.

Checking response.ok is important because fetch() does not automatically throw an error for HTTP responses such as 404 Not Found.

6. Async/Await vs. Then/Catch

Both approaches can handle Promises.

Using .then():

fetch("https://fakestoreapi.com/products")
    .then((response) => response.json())
    .then((products) => console.log(products))
    .catch((error) => console.log(error));

Using async/await:

async function getProducts() {
    try {
        const response = await fetch(
            "https://fakestoreapi.com/products"
        );

        const products = await response.json();

        console.log(products);
    } catch (error) {
        console.log(error);
    }
}

getProducts();

Both approaches work with Promises. Many developers prefer async/await because it can make asynchronous code easier to read.

Conclusion

Async/await is an important JavaScript concept, especially when working with APIs and modern frameworks like React.

Remember:

async makes a function return a Promise.
await waits for a Promise's result inside an async function.
try...catch helps handle errors.
Async/await makes asynchronous code easier to read.

Keep practising these examples to improve your JavaScript skills.

Happy Coding! 🚀

JavaScript Promises

Lokesh — Fri, 23 Oct 2026 15:55:31 +0000

A Promise in JavaScript is used to handle operations that take time to complete, such as fetching data from an API.

Let's understand Promises with simple examples!

1. What Is a Promise?

A Promise represents the result of an operation that may be available now or in the future.

A Promise has three states:

Pending: Waiting for the result.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

For example, when you order food online, your order is pending while being prepared, fulfilled when delivered, or rejected if it fails.

2. Creating a Promise

We can create a Promise using new Promise().

const myPromise = new Promise((resolve, reject) => {
    let success = true;

    if (success) {
        resolve("Task completed successfully!");
    } else {
        reject("Task failed!");
    }
});

Here:

resolve() is called when the operation succeeds.
reject() is called when the operation fails.

3. Using `.then()`

We use .then() to handle a successful result.

myPromise.then((result) => {
    console.log(result);
});

Output:

Task completed successfully!

The value passed to resolve() is received by the callback inside .then().

4. Using `.catch()`

We use .catch() to handle a rejected Promise.

const myPromise = new Promise((resolve, reject) => {
    reject("Something went wrong!");
});

myPromise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

Output:

Something went wrong!

This helps us handle errors without leaving them unhandled.

5. Promise with `setTimeout()`

Let's create a Promise that completes after two seconds.

const myPromise = new Promise((resolve) => {
    setTimeout(() => {
        resolve("Data received!");
    }, 2000);
});

myPromise.then((result) => {
    console.log(result);
});

After approximately two seconds, the output is:

Data received!

The Promise remains pending until resolve() is called.

6. Using Promises with Fetch API

Promises are commonly used to get data from APIs.

fetch("https://fakestoreapi.com/products")
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.log("Error:", error);
    });

Here:

fetch() sends a request to the API.
The first .then() converts the response body into JSON.
The second .then() receives the product data.
.catch() handles errors such as network failures.

Note that fetch() does not automatically reject for HTTP errors like 404. In real projects, you should also check response.ok.

Conclusion

Promises make asynchronous operations easier to manage in JavaScript.

Remember these important points:

resolve() represents successful completion.
reject() represents failure.
.then() handles successful results.
.catch() handles errors.
Promises are widely used with APIs and async/await.

Asynchronous JavaScript

Lokesh — Fri, 23 Oct 2026 15:52:47 +0000

In JavaScript, some operations take time to complete, such as fetching data from an API or waiting for a timer.

Asynchronous JavaScript allows JavaScript to handle these operations without blocking other work.

Let's understand it with simple examples!

1. Synchronous JavaScript

Synchronous code runs one line at a time, in order.

console.log("First");
console.log("Second");
console.log("Third");

Output:

First
Second
Third

Each statement runs before the next one.

2. Asynchronous JavaScript

Asynchronous operations allow JavaScript to continue other work while waiting for an operation to finish.

console.log("First");

setTimeout(() => {
    console.log("Second");
}, 2000);

console.log("Third");

Output:

First
Third
Second

Why?

"First" prints immediately.
setTimeout() schedules the callback to run after approximately two seconds.
"Third" prints without waiting for the timer.
"Second" prints when the timer finishes and its callback can run.

This is a simple example of asynchronous JavaScript.

3. Where Do We Use Asynchronous JavaScript?

Asynchronous JavaScript is commonly used for:

Fetching data from APIs.
Loading products in an e-commerce website.
Sending login details to a server.
Uploading files.
Communicating with databases through a backend.

For example, we can fetch products from an API:

fetch("https://fakestoreapi.com/products")
    .then((response) => response.json())
    .then((products) => {
        console.log(products);
    })
    .catch((error) => {
        console.log("Error:", error);
    });

Fetch API in JavaScript

Lokesh — Mon, 12 Oct 2026 11:28:24 +0000

What Is Fetch API?

The Fetch API is used to send requests to a server and receive data from it.

For example, when we open a website that displays weather information or product details, the website may fetch data from an API.

JavaScript's fetch() method helps us retrieve this data and use it on a webpage.

1. What Is an API?

API stands for Application Programming Interface.

In simple terms, an API allows different software applications to communicate with each other.

For example, a website can use an API to retrieve a list of products from a server instead of storing all the product information directly in its HTML file.

2. Basic Fetch Example

Let's fetch some sample data from a public API.

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.log("Error:", error);
    });

Here is how it works:

fetch() sends a request to the API.
response.json() reads the response body and converts the JSON data into a JavaScript value.
then(data => ...) receives the converted data.
catch() handles errors such as network failures.

The request is asynchronous, so JavaScript can continue doing other work while waiting for the response.

3. Displaying API Data on a Webpage

We can use the fetched data to update HTML elements.

HTML:

<h2 id="title">Loading...</h2>
<p id="body"></p>

JavaScript:

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        document.getElementById("title").textContent = data.title;
        document.getElementById("body").textContent = data.body;
    })
    .catch(error => {
        console.log("Error:", error);
    });

Here, the post title and body are displayed on the webpage using the DOM.

4. Where Is Fetch API Used?

The Fetch API is commonly used to:

Retrieve product details from a server.
Display posts and comments.
Get weather information.
Load user details.
Send data to a server.

DOM in JavaScript for Beginners

Lokesh — Mon, 12 Oct 2026 11:22:43 +0000

What Is DOM?

DOM stands for Document Object Model. It allows JavaScript to access and change HTML elements on a webpage.

Using the DOM, we can change text, add new elements, delete elements, change styles, and respond to button clicks.

1. Accessing Elements

We can use getElementById() to select an HTML element using its ID.

<h1 id="title">Hello World!</h1>

let heading = document.getElementById("title");

console.log(heading);

Here, JavaScript selects the heading whose ID is title.

2. Updating Elements

We can use textContent to change the text of an element.

heading.textContent = "Welcome to JavaScript!";

Now, the heading displays the new text.

We can also change its style:

heading.style.color = "blue";

This changes the heading's text color to blue.

3. Creating Elements

We can create new HTML elements using createElement().

let paragraph = document.createElement("p");

paragraph.textContent = "This is a new paragraph.";

document.body.appendChild(paragraph);

Here, JavaScript creates a paragraph, adds text to it, and places it inside the webpage's body.

4. Deleting Elements

We can remove an HTML element using the remove() method.

<p id="message">Hello World!</p>

let paragraph = document.getElementById("message");

paragraph.remove();

The paragraph will be removed from the webpage.

Important DOM Methods and Properties

getElementById() — selects an element by ID.
querySelector() — selects the first matching element.
textContent — changes or reads text.
createElement() — creates a new element.
appendChild() — adds an element inside another element.
remove() — removes an element.
addEventListener() — responds to user actions.

Callback Functions in JavaScript.

Lokesh — Mon, 12 Oct 2026 11:13:24 +0000

What Is a Callback Function?

A callback function is a function that is passed as an argument to another function and can be called inside that function.

In simple words, we give one function to another function so it can execute it when needed.

Let's understand this with a simple example.

1. A Simple Callback Example

function greet() {
    console.log("Hello!");
}

function welcome(callback) {
    callback();
}

welcome(greet);

Output:

Hello!

Let's understand what happens:

greet() is a function that prints "Hello!".
welcome() accepts a function through its callback parameter.
welcome(greet) passes the greet function to welcome.
callback() executes the function it received.

Notice that we pass greet without parentheses because we are passing the function itself, not calling it immediately.

2. Callback Functions with Parameters

We can also pass data to a callback function.

function calculate(a, b, callback) {
    let result = a + b;
    callback(result);
}

function display(value) {
    console.log(value);
}

calculate(10, 20, display);

Output:

Here, calculate() adds two numbers and passes the result to the display() callback.

This allows us to separate the calculation from displaying the result.

3. Using an Anonymous Callback

We don't always need to create a separate named function for a callback. We can pass an anonymous function directly.

function greet(callback) {
    callback();
}

greet(function() {
    console.log("Welcome to JavaScript!");
});

Output:

Welcome to JavaScript!

The function passed directly to greet() is the callback.

4. Callback Functions with Array Methods

Callbacks are commonly used with JavaScript array methods such as forEach(), map(), and filter().

For example, using forEach():

let fruits = ["Apple", "Banana", "Mango"];

fruits.forEach(function(fruit) {
    console.log(fruit);
});

Output:

Apple
Banana
Mango

Here, the function passed to forEach() is a callback. JavaScript calls it for each element in the array.

Why Are Callback Functions Important?

Callback functions help us:

Reuse functions in different situations.
Pass behavior from one function to another.
Work with array methods.
Handle events and delayed operations.
Understand asynchronous JavaScript.

Array Iteration in JavaScript.

Lokesh — Mon, 12 Oct 2026 11:09:54 +0000

What Is Array Iteration?

Array iteration means going through the elements of an array one by one to perform an operation.

For example, if we have a list of fruits, we can use array iteration to display each fruit without writing separate code for every item.

Let's look at some common ways to iterate through arrays in JavaScript.

1. Using a for Loop

A for loop allows us to access array elements using their index.

let fruits = ["Apple", "Banana", "Mango"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Output:

Apple
Banana
Mango

Here, i starts at 0 and increases until it reaches the array's length. We use fruits[i] to access each element.

2. Using for...of

The for...of loop lets us access each value directly without using an index.

let fruits = ["Apple", "Banana", "Mango"];

for (let fruit of fruits) {
    console.log(fruit);
}

This prints each fruit on a separate line.

It is a simple and readable way to iterate through array values.

3. Using forEach()

The forEach() method executes a function for every element in an array.

let numbers = [10, 20, 30];

numbers.forEach(function(number) {
    console.log(number);
});

Here, the function runs once for each number in the array.

We can also write it using an arrow function:

numbers.forEach(number => console.log(number));

4. Using map()

The map() method creates a new array by transforming each element.

let numbers = [1, 2, 3];

let doubled = numbers.map(number => number * 2);

console.log(doubled);

Output:

[2, 4, 6]

Here, every number is multiplied by two, and the results are stored in a new array.

5. Using filter()

The filter() method creates a new array containing only the elements that satisfy a condition.

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(number => number > 20);

console.log(result);

Output:

[25, 30]

Here, only numbers greater than 20 are included in the new array.

Difference Between These Methods

for loop: Useful when we need control over the index and loop execution.
for...of: Useful when we want to access each array value directly.
forEach(): Useful when we want to perform an action for each element.
map(): Useful when we want to transform elements and create a new array.
filter(): Useful when we want to select elements that match a condition.

Why Is Array Iteration Important?

Array iteration is useful when working with:

Lists of products in an online store.
Student marks and records.
Data received from APIs.
Filtering and displaying information.
Calculating totals and processing collections of values.

DEV Community: Lokesh

useState in React

What Is useState?

How to Import useState

Basic Syntax

Simple Counter Example

Another Example: Updating Text

Why Do We Use useState?

What Is React?

What Is React?

Why Do We Use React?

What Are Components?

React Uses JSX

React Can Update the UI

Popular Uses of React

REST API

What Is an API?

What Is a REST API?

HTTP Methods

1. GET

2. POST

3. PUT

4. PATCH

5. DELETE

What Is an Endpoint?

REST API and JSON

Simple Example

Important REST API Concepts

JSON in JavaScript

What Is JSON?

Example of JSON

JSON vs JavaScript Object

JavaScript Object

JSON

JSON.stringify()

JSON.parse()

JSON and APIs

Important Points to Remember

JavaScript Closures

1. What Is a Closure?

2. Understanding Closures with an Example

3. A Real Closure Example

4. Closures Can Remember Changing Values

5. Why Are Closures Useful?

Conclusion

Async/Await in JavaScript

1. What Is Async/Await?

2. Understanding async

3. Understanding await

4. Using Async/Await with Fetch API

5. Handling Errors with Try/Catch

6. Async/Await vs. Then/Catch

Conclusion

JavaScript Promises

1. What Is a Promise?

2. Creating a Promise

3. Using .then()

4. Using .catch()

5. Promise with setTimeout()

6. Using Promises with Fetch API

Conclusion

Asynchronous JavaScript

1. Synchronous JavaScript

2. Asynchronous JavaScript

3. Where Do We Use Asynchronous JavaScript?

Fetch API in JavaScript

What Is Fetch API?

1. What Is an API?

2. Basic Fetch Example

3. Displaying API Data on a Webpage

4. Where Is Fetch API Used?

DOM in JavaScript for Beginners

What Is DOM?

1. Accessing Elements

2. Updating Elements

3. Creating Elements

4. Deleting Elements

Important DOM Methods and Properties

Callback Functions in JavaScript.

What Is a Callback Function?

What Is `useState`?

How to Import `useState`

Why Do We Use `useState`?

2. Understanding `async`

3. Understanding `await`

3. Using `.then()`

4. Using `.catch()`

5. Promise with `setTimeout()`