DEV Community: Parthipan M

Props in React..

Parthipan M — Sat, 26 Sep 2026 16:45:38 +0000

In React, props (short for "properties") are used to pass information from one component to another. The main purpose of props is to allow a parent component to send data to its child components.

Props cannot be modified by the receiving component.
They are strictly for reading data and should not be altered.
Props can be updated when the parent component’s state changes.

import React from 'react';

function Greet(props) {
    return <h1>Hello, {props.name}!</h1>;
}

function App() {
    return <Greet name="React Mani" />;
}

export default App;

Output:

Hello, React Mani!

Greet Component: Accepts props and renders the value of props.name inside an <h1> tag.
App Component: Renders the Greet component and passes "React Mani" to the name prop.

Syntax

<ComponentName propName="value"/>

Working of Props in React

Props in React work by allowing data to flow from a parent component to a child component, making components dynamic and reusable.

Steps to use Props:

Define an attribute and its value (data).
Pass it to the child component by using props.
Render the props data.

Passing Multiple Props

In React, a parent component can pass multiple props to a child component, where each prop may hold a different type of data such as text, numbers, arrays, or functions.

App.js

import React from 'react';
import Parent from './Parent';

function App() {
    const appStyle = {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        margin: 0,
        fontFamily: 'Arial, sans-serif',
    };

    return (
        <div style={appStyle}>
            <Parent />
        </div>
    );
}

export default App;

Parent.js

import React from 'react';
import Child from './Child';  

function Parent() {
    const parentStyle = {
        textAlign: 'center',  
    };

    return (
        <div style={parentStyle}>
            <h1>Welcome to the Parent Component!</h1>
            <Child name="React Mani" age={21} city="India" />
        </div>
    );
}

export default Parent;

Child.js

import React from 'react';

function Child(props) {
    const childStyle = {
        marginTop: '20px',
        fontSize: '18px',
        color: '#333',
    };

    return (
        <div style={childStyle}>
            <h2>Hello, {props.name}!</h2>
            <p>You are {props.age} years old.</p>
            <p>You live in {props.city}.</p>
        </div>
    );
}

export default Child;

Output

Welcome to the Parent Component!

Hello, React Mani!

You are 21 Years old.

You live in India.

REACT

Parthipan M — Wed, 23 Sep 2026 10:48:14 +0000

What is React?

React is a front-end JavaScript library.
React was developed by the Facebook Software Engineer Jordan Walke.
React is also known as React.js or ReactJS.
React is a tool for building UI components.
React is a free, open-source JavaScript library used to build user interfaces (UIs), primarily for single-page web applications.

In simple words:

React helps you create web pages using small, reusable pieces called components.

Examble:

Navbar
Search bar
Form
Product cord
Button
Footer

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

Why use React?

Reusable components – Write a component once and use it many times.
Fast UI updates – React efficiently updates parts of a page when data changes.
Easy to organize – Large applications can be divided into smaller components.
JavaScript-based – You can use JavaScript logic directly with your UI.
Popular ecosystem – React is widely used for modern web applications.

React vs JavaScript

ARROW Function - JS

Parthipan M — Fri, 18 Sep 2026 14:47:51 +0000

Arrow functions in JavaScript

Arrow functions in JavaScript are a concise way to write functions using the => syntax, automatically binding this from the surrounding context.

The following code defines an arrow function that takes two numbers and returns their sum.

const add = (a, b) => a + b;
console.log(add(5, 3));

Syntax:

const functionName = (parameters) => { // function body return result;};

const: declares the function as a constant variable.
functionName: name of the arrow function.
(parameters): inputs to the function.
=>: arrow showing it’s an arrow function (replaces function keyword).
{ ... }: function body where code runs.
return result; : explicitly returns a value.

1. Arrow Function without Parameters

An arrow function without parameters is defined using empty parentheses (). This type of function is useful when no input values are needed, such as for callbacks, timers, or simple operations.

const gfg = () => {
    console.log( "Hi from GeekforGeeks!" );
}
gfg();

2. Arrow Function with Single Parameters

When an arrow function has only one parameter, parentheses around the parameter can be omitted, making the syntax shorter and cleaner. This is commonly used in callbacks, array methods, or simple operations.

const square = x => x*x;
console.log(square(4));

Arrow Function with Multiple Parameters

Arrow functions with multiple parameters, like (param1, param2) => { }, simplify writing concise function expressions in JavaScript, useful for functions requiring more than one argument.

const gfg = ( x, y, z ) => {
    console.log( x + y + z )
}
gfg( 10, 20, 30 );

4. Arrow Function with Default Parameters

Arrow functions support default parameters, allowing predefined values if no argument is passed, making JavaScript function definitions more flexible and concise.

const gfg = ( x, y, z = 30 ) => {
    console.log( x + " " + y + " " + z);
}
gfg( 10, 20 );

5. Return Object Literals

In JavaScript, returning object literals within functions is concise: () => ({ key: value }) returns an object { key: value }, useful for immediate object creation and returning.

const makePerson = (firstName, lastName) =>
({first: firstName, last: lastName});
console.log(makePerson("Pankaj", "Bind"));

Async Arrow Functions

Arrow functions become asynchronous by adding the async keyword.

Allows the use of await to wait for a Promise to resolve
Makes asynchronous code easier to read and manage

const fetchData = async () => {
    const data = await fetch('https://api.example.com/data');
    return data.json();
};

The async keyword marks the function as asynchronous.
await can be used inside the function to wait for Promises.
Returns a Promise automatically.
Useful for handling API calls, timers, or any asynchronous operations.

Arrow Functions vs. Regular Functions

Here is the detailed Comparison between Arrow Functions and Regular Functions:

JS - Promise

Parthipan M — Thu, 17 Sep 2026 14:29:14 +0000

A Promise in JavaScript is an object representing the eventual completion or failure of an asynchronous operation.

The Three States of a Promise

A Promise always exists in one of three mutually exclusive states:

Pending: The initial state. The asynchronous operation is still running, and the promise is neither fulfilled nor rejected.
Fulfilled: The operation completed successfully. The promise now holds a resulting value.
Rejected: The operation failed. The promise now holds a reason (usually an error) for the failure.

Once a promise is either fulfilled or rejected, it becomes settled and its state can never change again.

Basic Syntax

Here is how you create and consume a basic Promise:

1. Creating a Promise

You use the new Promise constructor, which takes a function (called the executor) with two arguments: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  let success = true; // Simulating the outcome of an operation

  if (success) {
    resolve("The operation was successful!");
  } else {
    reject("Something went wrong.");
  }
});

2. Consuming a Promise

To handle the results of a promise, you use the .then(), .catch(), and .finally() methods:

myPromise
  .then((value) => {
    // Runs if the promise is fulfilled
    console.log(value); 
  })
  .catch((error) => {
    // Runs if the promise is rejected
    console.error(error); 
  })
  .finally(() => {
    // Runs no matter what, after the promise has settled
    console.log("Operation finished.");
  });

Modern Alternative: Async/Await

In modern JavaScript, you will often see the async and await keywords. This is built directly on top of Promises and allows you to write asynchronous code that looks and behaves like synchronous code:

async function executeTask() {
  try {
    const data = await fetchData(); // Waits until the promise resolves
    const processed = await processData(data);
    console.log(processed);
  } catch (error) {
    console.error("Caught an error:", error);
  }
}

Promise in JS

Parthipan M — Tue, 08 Sep 2026 16:06:49 +0000

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

To learn about the way promises work and how you can use them, we advise you to read Using promises first.

A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

A promise is said to be settled if it is either fulfilled or rejected, but not pending.

For Example:

new Promise((resolveOuter) => {
  resolveOuter(
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);
    }),
  );
});

Promise itself has no first-class protocol for cancellation, but you may be able to directly cancel the underlying asynchronous operation, typically using

Chained Promises

The promise methods then(), catch(), and finally() are used to associate further action with a promise that becomes settled.

The then() method takes up to two arguments; the first argument is a callback function for the fulfilled case of the promise, and the second argument is a callback function for the rejected case.
The catch() and finally() methods call then() internally and make error handling less verbose.
For example, a catch() is really just a then() without passing the fulfillment handler. As these methods return promises, they can be chained.

For example:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then(handleFulfilledA, handleRejectedA)
  .then(handleFulfilledB, handleRejectedB)
  .then(handleFulfilledC, handleRejectedC);

Promise concurrency

The Promise class offers four main static methods to facilitate async task

Promise.all()
Fulfills when all of the promises fulfill; rejects when any of the promises rejects.
Promise.allSettled()
Fulfills when all promises settle.
Promise.any()
Fulfills when any of the promises fulfills; rejects when all of the promises reject.
Promise.race()
Settles when any of the promises settles. In other words, fulfills when any of the promises fulfills; rejects when any of the promises rejects.

Constructor

Promise()

Creates a new Promise object. The constructor is primarily used to wrap functions that do not already support promises.

Static properties

Promise[Symbol.species]

Returns the constructor used to construct return values from promise methods.

Function In JS

Parthipan M — Mon, 07 Sep 2026 14:26:18 +0000

Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. They can take inputs, perform actions, and return outputs.

Understanding Functions

In functions, parameters are placeholders defined in the function, while arguments are the actual values you pass when calling the function.

Example:

function greet(name) {   // 'name' is a parameter
  console.log("Hello " + name);
}

greet("Alice");  // "Alice" is the argument

Parameter: name (placeholder inside the function).
Argument: "Alice" (real value given at call time).

Default Parameters :

Default parameters are used when no argument is provided during the function call.
If no value is passed, the function automatically uses the default value.

For Examble :

function greet(name = "Guest") {
  console.log("Hello, " + name);
}

greet();
greet("Aman");

Return Statement

The return statement is used to send a result back from a function.
When return executes, the function stops running at that point.
The returned value can be stored in a variable or used directly.

For Example:

function add(a, b) {
  return a + b; // returns the sum
}

let result = add(5, 10);
console.log(result);

Types of Functions

Here are all the main types of functions in JavaScript:

1. Named Function

A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

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

2. Anonymous Function

An anonymous function is a function defined without an explicit name. It is commonly used as a callback or assigned to a variable.

const greet = function() {
  return "Hi there!";
};
console.log(greet());

3. Function Expression

A function expression is a function created as part of an expression and assigned to a variable or passed to another function. It can be named or anonymous.

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3));

4. Arrow Function (ES6)

A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

const square = n => n * n;
console.log(square(4));

5. Immediately Invoked Function Expression (IIFE)

IIFE functions are executed immediately after their definition. They are often used to create isolated scopes.

(function () {
    console.log("This runs immediately!");
})();

6. Callback Functions

A callback function is passed as an argument to another function and is executed after the completion of that function

function num(n, callback) {
    return callback(n);
}

const double = (n) => n * 2;

console.log(num(5, double));

7. Constructor Function

A special type of function used to create multiple objects with the same structure. It’s called with the new keyword.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const user = new Person("Neha", 22);
console.log(user.name);

8. Async Function

Functions that handle asynchronous tasks. Declared with async, they return a Promise, and you can use await inside them to pause until another Promise resolves.

async function fetchData() {
  return "Data fetched!";
}
fetchData().then(console.log);

9. Generator Function

Declared with an asterisk *, these functions can pause execution using yield and resume later. Useful for lazy loading values or handling iterators.

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();
console.log(gen.next().value); 
console.log(gen.next().value);

10. Recursive Function

A function that calls itself until a condition is met. Very useful for problems like factorial, Fibonacci, or tree traversals.

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5));

11. Higher-Order Function

A function that either takes another function as a parameter or returns another function. These are common in JavaScript (e.g., map, filter, reduce).

function applyOperation(a, b, operation) {
    return operation(a, b);
}
function add(x, y) {
    return x + y;
}
console.log(applyOperation(2, 3, add));

applyOperation() is a higher-order function because it accepts another function (add) as an argument.
The passed function is executed inside applyOperation()

12. Nested Functions

Functions defined within other functions are called nested functions. They have access to the variables of their parent function.

function outerFun(a) {
    function innerFun(b) {
        return a + b;
    }
    return innerFun;
}

const addTen = outerFun(10);
console.log(addTen(5));

13. Pure Functions

Pure functions return the same output for the same inputs and do not produce side effects. They do not modify state outside their scope, such as modifying global variables, changing the state of objects passed as arguments, or performing I/O operations.

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

console.log(pureAdd(2, 3));

14. Rest Parameter Function

Uses the ... syntax to collect remaining arguments into an array. Useful when the number of arguments is unknown.

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4));

DOM in Java Script

Parthipan M — Thu, 03 Sep 2026 11:24:51 +0000

Document Object Model

The Document Object Model (DOM) is a programming interface provided by web browsers that represents an HTML or XML document as a tree of objects, allowing JavaScript to dynamically access, modify, and interact with the page's content, structure, and style.

Example:

<html>
  <body>
    <h1>Hello Parthipan</h1>
  </body>
</html>

The DOM Tree Structure:

The Document: The root or "owner" of the entire tree. In JavaScript, you access this via the global document object.
Elements: The HTML tags themselves (like <body>, <div>, <h1>, or <button>).
Attributes: Properties inside those tags (like href, src, or class).
Text: The actual text written inside your tags (e.g., "Click Me").

Accessing HTML Elements:

The HTML DOM can be used to access HTML elements.

The most common way to access an HTML element is to use the id of the element:

Example:

<html>
<body>
    <h1 id="head">DOM</h1>
    <div class="para">parthipan</div>
    <div class="para">Tony</div>
    <div class="para">antony</div>
    <div class="para">antony</div>
    <button onclick="changeContent()">changeContent</button>
    <script>
    // const changeContent = () => {
    //     document.getElementById("head").textContent = "Hello parthipan"
    //     document.getElementById("head").textContent = "Hello tony"
    //     document.getElementById("head").textContent = "Hello antony"
    //     document.getElementById("head").textContent = "Hello jaisuriya"
    // };
    // console.log(document.getElementById("head").textContent);
const divs = document.getElementsByClassName("para")
for (let i=0; i<divs.length; i++){
    divs[i].style ="color:red";
}

    </script>

</body>
</html>

In the example above, thegetElementById method used id="head" to find the element.

id="head" is an HTML property
getElementById() is a DOM Method
innerHTML is a DOM Property

Array in Javascript...

Parthipan M — Thu, 03 Sep 2026 10:27:06 +0000

An array in JavaScript is a special variable that can hold multiple values in a single variable, instead of storing just one value like a normal variable does.

Basic Example:

let Phones = ["Vivo", "Oppo", "Samsung"];

console.log(fruits[0]); // Vivo
console.log(fruits[1]); // Oppo
console.log(fruits[2]); // Samsung

Key Points:

Index starts at 0 - First item is array[0], not array[1]
Can hold any data type - Numbers, strings, booleans, objects, even other arrays
.length - Gives the total number of items
Dynamic size - You can add/remove items anytime

Mixed Array:

A mixed array is just an array that stores different data types together in a single array, instead of only numbers or only strings.

Example:

let mixedArray = ["Messi", 22, true, ["Tamil", "English"], { city: "Chennai" }];

Responsive Design

Parthipan M — Thu, 06 Aug 2026 07:54:51 +0000

Responsive in HTML

Responsive in HTML refers to Responsive Web Design (RWD), an approach where a single website dynamically alters its layout, images, and content to look good and function properly across all device sizes.

1. The Viewport Meta Tag

This is the most critical HTML component. Without it, mobile browsers will render the page at a desktop width and zoom out, making the text unreadably small. You must include this tag inside the section of your HTML document:

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

width=device-width: Sets the page width to follow the screen-width of the device.
initial-scale=1.0: Sets the initial zoom level when the page is first loaded by the browser

2. Responsive Layouts with CSS

While HTML structures the content, CSS controls the responsive layout using flexible structures.

Relative Units: Avoid fixed pixel (px) values for widths. Instead, use relative units like percentages (%), vw (viewport width), or vh (viewport height) so elements scale proportionally.
Flexbox and CSS Grid: These modern layout modules make it easy to create fluid grids that rearrange automatically. For example, elements aligned horizontally on a desktop can stack vertically on a smartphone screen.

3. CSS Media Queries

Media queries allow you to apply specific CSS rules only when certain conditions are met, such as maximum or minimum screen widths.

 /* Default styles for mobile devices */
body {
  background-color: lightblue;
}

/* Styles applied only when the screen width is 768px or wider (Tablets/Desktops) */
@media (min-width: 768px) {
  body {
    background-color: lightgreen;
  }
}

4. Responsive Images

Images should never overflow their containers or use fixed dimensions. You can make images responsive in two ways:

The CSS Rule: Applying max-width: 100%; and height: auto; ensures the image shrinks if the container gets smaller than the image's original size.
The HTML Element: For advanced optimization, you can use the to serve completely different image files tailored to specific screen resolutions.

PICTURE IN HTML

Parthipan M — Mon, 03 Aug 2026 18:33:18 +0000

picture tag in html

The HTML <picture> tag is a media wrapper element that allows developers to provide multiple image sources for different display scenarios, such as varying screen sizes, pixel densities, or image formats.

The browser will parse the child <source> elements and select the closest matching resource based on media queries or type attributes, falling back to the standard <img>tag if no matches are found or if the browser doesn't support the element.
Example:

<picture>
  <source media="(min-width: 1024px)" srcset="large-hero.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="medium-hero.jpg">
  <img src="small-fallback.jpg" alt="A descriptive fallback image" loading="lazy">
</picture>

Core Components

Core Components: The outer wrapper that acts as a decision engine for the browser.
: Contains the alternative image assets. You can use multiple source tags, and the browser will read them from top to bottom, picking the first one that evaluates to true.
media: Accepts media queries (e.g., max-width, orientation) to swap images based on device screen size.
srcset: Defines the path to the image file (or files, if using pixel density descriptors like 2x).
type: Defines the MIME type (e.g., image/webp, image/avif), allowing you to serve modern, highly compressed formats while providing fallback formats for older browsers.
<img>: Strictly required as the final child element. The <picture> tag itself does not display anything; it merely feeds a source URL to this inner <img>tag. It also ensures backwards compatibility for older browsers and holds vital attributes like alt and loading.

Bootstrap

Parthipan M — Sun, 02 Aug 2026 04:57:47 +0000

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

To include Bootstrap in an HTML file, you typically use a Content Delivery Network (CDN) link in the <head> for CSS and a <script> tag before the closing </body> for JavaScript.
For Bootstrap 5 (the current standard), the framework uses vanilla JavaScript and no longer requires jQuery. Include the following in your index.html:

CDN links

As reference, here are our primary CDN links.

CSS

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js

How to use bootstrap grid system ?

The Bootstrap grid system is a mobile-first, flexbox-based layout structure that divides the page width into 12 columns. To use it effectively, you must follow a specific hierarchy: Containers → Rows → Columns.

Example:

<div class="container">
  <div class="row">
    <div class="col-8">Wide Column (8/12)</div>
    <div class="col-4">Narrow Column (4/12)</div>
  </div>
</div>

Responsive Breakpoints:

Bootstrap uses six responsive breakpoints to adapt layouts to different screen sizes. Column classes follow the format .col-{breakpoint}-{number}. Because Bootstrap is mobile-first, a class like .col-md-6 applies to medium screens and all larger screens (lg, xl, xxl), while the element remains full-width on smaller screens unless specified otherwise.

Key Features:

Auto-layout: Using just .col without a number allows columns to automatically divide the available space equally.
Gutters: Space between columns is handled by gutters (padding on columns and negative margins on rows). You can customize these using classes like .g-3 (standard gap), .gx-4
(horizontal only), or .g-0 (no gap).
Row Columns: Instead of defining width on every column, you can set the number of columns on the parent row using .row-cols-1, .row-cols-md-3, etc., to automatically force child columns into that layout.

FORM IN HTM

Parthipan M — Sun, 02 Aug 2026 03:53:55 +0000

what is a form ?

A from is an HTML elements used to collect data from the user like login,registration,feedback,etc.

<form> – the container tag that wraps all form elements
<input> – for text, password, email, checkbox, radio, file, submit, etc.
<lable> _ describes/name an input field
<textarea> _ for multi-line text input
<select> _ creates a dropdown list
<option> – defines each item inside a <select>
<optgroup> – groups related s together
<button>– clickable button (submit, reset, or custom)
<fieldset>– groups related form elements together visually
<legend> – gives a caption/title to a

What this includes:

Text, email, and phone input fields
A dropdown (select) menu
A multi-line text area
Basic CSS styling (rounded corners, shadow, button hover effect)

Key Components and Attributes:

Structure: Forms rely on the <form> tag to wrap input elements like <input>,<textarea>, and <button>.
Action: The action attribute specifies the URL or server-side script where the submitted data is sent.
Method: The method attribute defines how data is transmitted, typically using GET (data in URL) or POST (data in request body) HTTP methods.
Purpose: Common uses include user registration, login, search queries, and feedback submissions, enabling dynamic interaction between the user and the website.