DEV Community: M Ramavel

Hooks

M Ramavel — Fri, 22 Aug 2025 09:30:23 +0000

UseState

The useState hook is used to declare state variables in functional components. It allows us to read and update the state within the component.

Syntax

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

state: The current value of the state.
setState: A function used to update the state.
initialState: The initial value of the state, which can be a primitive type or an object/array

useEffect:

The useEffect hook in React is used to handle side effects in functional components. It allows you to perform actions such as data fetching, DOM manipulation, and setting up subscriptions, which are typically handled in lifecycle methods like componentDidMount or componentDidUpdate in class components.

Syntax

useEffect(() => {
    // Side effect logic here
}, [dependencies]);
useEffect(() => { ... }, [dependencies]);

runs side effects after rendering.
The effect runs based on changes in the specified dependencies.

UseContext

The useContext hook in React is a powerful and convenient way to consume values from the React Context API in functional components. It allows functional components to access context values directly, without the need to manually pass props down through the component tree

const contextValue = useContext(MyContext);

The useContext hook takes a context object (MyContext) as an argument and returns the current value of that context.
The contextValue will hold the value provided by the nearest <MyContext.Provider> in the component tree.

UseRef

The useRef Hook allows you to persist values between renders.
It can be used to store a mutable value that does not cause a re-render when updated.
It can be used to access a DOM element directly.

useRef() only returns one item. It returns an Object called current.

When we initialize useRef we set the initial value: useRef(0)

Props

M Ramavel — Fri, 22 Aug 2025 09:15:15 +0000

Props Stand's for Properties
Props are used to pass data one Component to another
Allow Data from parent to child component

Create the React App

M Ramavel — Fri, 08 Aug 2025 16:57:40 +0000

A new React application can be created using the create-react-app tool, which is a command-line utility. This tool automates the setup of a new React project, including the necessary file structure, configuration files, and build scripts.

To create a new React app, follow these steps:

Install Node.js and npm (Node Package Manager): If not already installed, download and install Node.js from the official website, which includes npm.
Open a terminal or command prompt.
Execute the create-react-app command:

npx create-react-app my-react-app

Replace my-react-app with the desired name for the application. Navigate into the project directory.

cd my-react-app

Start the development server.

npm start

Explaining Key Files
After creating a new React app, the project directory contains several important files and folders:
public/index.html:
This is the main HTML file of the application. It serves as the single entry point for the React app, and the React components are rendered into a div element within this file (usually with the ID root).
src/index.js:
This file is the JavaScript entry point for the React application. It imports the main App component and renders it into the root element defined in public/index.html.
src/App.js:
This file defines the primary React component of the application, typically named App. This component serves as the root of the component tree and is where the main structure and content of the application are defined.
src/App.css:
This file contains the CSS styles specifically for the App component.
src/index.css:
This file contains global CSS styles applied to the entire application.
package.json:
This file manages the project's metadata and dependencies. It lists the required packages and scripts for running, building, and testing the application.
node_modules/:
This directory contains all the third-party libraries and packages required by the project, installed by npm.

React Introduction..

M Ramavel — Thu, 07 Aug 2025 12:50:53 +0000

React

React is a JavaScript library for building user interfaces.React is used to build single-page applications.React allows us to create reusable UI components.

Components

React components are independent, reusable building blocks that define what gets displayed on the user interface in a React application. They serve a similar purpose to JavaScript functions but are specifically designed for rendering UI elements.

Virtual DOM

The React Virtual DOM (Document Object Model) is a lightweight, in-memory representation of the actual DOM. It is a key concept that enables React's efficient UI updates and performance.

Promise JS

M Ramavel — Mon, 04 Aug 2025 17:17:39 +0000

A Promise in JavaScript is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

It helps you handle asynchronous operations like data fetching, file reading, or timers — without deeply nested callbacks (callback hell).

Syntax

let promise = new Promise(function(resolve, reject) {
  if (/* success */) {
    resolve(result);  // Success
  } else {
    reject(error);    // Error
  }
});

Promise States

Pending – Initial state, neither fulfilled nor rejected.
Fulfilled – Operation completed successfully.
Rejected – Operation failed

Fetch API

M Ramavel — Mon, 04 Aug 2025 17:02:43 +0000

The Fetch API provides a JavaScript interface for making HTTP requests and processing the responses

Using the Fetch API

With the Fetch API, you make a request by calling fetch(), which is available as a global function in both window and worker contexts. You pass it a Request object or a string containing the URL to fetch, along with an optional argument to configure the request.

The fetch() function returns a Promise which is fulfilled with a Response object representing the server's response. You can then check the request status and extract the body of the response in various formats, including text and JSON, by calling the appropriate method on the response.

Here's a minimal function that uses fetch() to retrieve some JSON data from a server:

Syntax:

fetch(url)
  .then
    (res=> res.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Error:", error);
  });

GET - Get data from server
POST - Send data to server
PUT - Update full resource
DELETE - Delete a resource

GET Request to Retrieve Data

fetch() sends the GET request to the specified URL.
The response.json() method parses the JSON response.
.then() logs the list of items once they are fetched

.fetch('https://fakestoreapi.com/products/1')
    .then(response => response.json())
    .then(items => console.log(items))

*POST Request to Submit Data
*

The method: 'POST' tells Fetch to send data to the server.
The headers include the Content-Type to indicate we are sending JSON.
The body contains the data to be sent, which is stringified using JSON.stringify().

const data = { name: 'Pranjal', age: 25 };
fetch('https://fakestoreapi.com/products', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
})
    .then(response => response.json())
    .then(result => console.log(result));

*PUT Request to Update Data
*

const updatedData = { id: 1, price: 300 };

fetch('https://fakestoreapi.com/products/1', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(updatedData)
})
    .then(response => response.json())
    .then(result => console.log(result));

The method: 'PUT' indicates we are updating data.
The body sends the updated data, converted to JSON.
The response is parsed as JSON, and the updated result is logged.

DELETE Request to Remove Data

fetch('https://fakestoreapi.com/products/1', {
    method: 'DELETE'
  })
    .then(response => response.json())
    .then(result => console.log('Deleted:', result));

method: 'DELETE' indicates that we want to delete the specified resource.
The response is parsed as JSON to confirm the deletion.
The result is logged to indicate the operation was successful.

Types of Scope in JavaScript

M Ramavel — Wed, 16 Jul 2025 15:01:40 +0000

✅ 1. Global Scope

Declared outside of any function or block.

Can be accessed anywhere in the code.

let name = "Ram";  // Global scope

function greet() {
  console.log(name);  // ✅ Accessible
}

greet();

✅ 2. Function Scope

Variables declared with var, let, or const inside a function.

Accessible only within that function.

function test() {
  let x = 10;     // Function scope
  console.log(x); // ✅ Accessible
}

test();
// console.log(x); ❌ Not accessible outside

✅ 3. Block Scope (ES6)

Variables declared with let or const inside {} (if, loop, etc.).

Not accessible outside the block.

{
  let a = 5;
  const b = 10;
  console.log(a, b); // ✅ Accessible
}

// console.log(a, b); ❌ Not accessible outside the block

JavaScript Loop

M Ramavel — Mon, 14 Jul 2025 15:37:30 +0000

Loops in JavaScript are used to reduce repetitive tasks by repeatedly executing a block of code as long as a specified condition is true. This makes code more concise and efficient.

Suppose we want to print 'Hello World' five times. Instead of manually writing the print statement repeatedly, we can use a loop to automate the task and execute it based on the given condition.

For loop

for (initialization; condition; increment/decrement)
{
    // Code to execute
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while-loop

The while loop executes as long as the condition is true. It can be thought of as a repeating if statement.

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

Do While loop

The do-while loop is similar to while loop except it executes the code block at least once before checking the condition.

let i = 0;
do {
    console.log("Iteration:", i);
    i++;
} while (i < 3);

do { // Code to execute } while (condition);

Conditional Statements

M Ramavel — Fri, 11 Jul 2025 15:43:29 +0000

conditional statements are used to perform different actions based on different conditions. Here's a breakdown of the most common types conditional statements

🟩 1. if Statement

Executes a block of code if a specified condition is true.

let age = 18;
if (age >= 18) {
  console.log("You are an adult.");
}//You are an adult

🟨 2. if...else Statement

Executes one block of code if the condition is true, and another if it's false.

let age = 16;
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}//You are a minor

🟦 3. if...else if...else Statement

Checks multiple conditions in sequence.

let score = 75;
if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B");
} else {
  console.log("Grade: C or below");
}//Grade B

Switch Statement

The switch statement is used to perform different actions based on different conditions
Syntax

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

Operators

M Ramavel — Thu, 10 Jul 2025 08:59:40 +0000

Arithmetic Operators

A typical arithmetic operation operates on two numbers.

Adding
The addition operator (+) adds numbers:

let x = 5;
let y = 2;
let z = x + y;

\Output 7

Subtracting
The subtraction operator (-) subtracts numbers.

let x = 5;
let y = 2;
let z = x - y;

\Output 3

Multiplying
The multiplication operator (*) multiplies numbers.

let x = 5;
let y = 2;
let z = x * y;

\Output 10

Dividing
The division operator (/) divides numbers.

let x = 5;
let y = 2;
Console.lof("x / y");

\Output 2

Remainder
The modulus operator (%) returns the division remainder.

let x = 5;
let y = 2;
Let z =x%y;

\Output 1

Incrementing
The increment operator (++) increments numbers.

let x = 5;
x++;
let z = x;

\Output 6
Decrementing
The decrement operator (--) decrements numbers.

let x = 5;
x--;
let z = x;

\Output 4

JavaScript Variable's

M Ramavel — Wed, 09 Jul 2025 12:48:02 +0000

Variable

In JavaScript, a variable is a named container used to store data values

Using var
Using let
Using const

Var:
The var keyword is used to declare a variable. It was the original way to declare variables in JavaScript and has specific characteristics

var x = 10;
var y= 20;
console.log(x); 
// Output: 10

Let

The let keyword was introduced in ES6 (2015)
Variables declared with let have Block Scope
Variables declared with let must be Declared before use
Variables declared with let cannot be Redeclared in the same scope

{
  let x = 2;
Console.log(x)
}
// x can NOT be used here

Const

The const keyword was introduced in ES6 (2015)
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope

{
    const x = 10;
    console.log(x); 
// Output: 10
}
console.log(x);
 // ReferenceError: x is not defined

What is The Viewport?🤔

M Ramavel — Thu, 03 Jul 2025 12:39:46 +0000

The viewport is the user's visible area of a web page.👩‍💻
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size

Viewport
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

You should include the following <meta> viewport element in the <head> section of all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).📱
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser