DEV Community: Alaguselvan T

Introduction to React.js

Alaguselvan T — Thu, 03 Sep 2026 15:38:03 +0000

1.What is React?
*React.js is a JavaScript library used to build user interfaces (UIs), especially for web applications.
*React was created by Facebook (now Meta) and is widely used for building modern, interactive websites and web applications.
*Instead of writing one large application as a single piece, React allows us to divide the UI into small, reusable parts called components.

For example, a website can have components such as:
Navbar
Header
Button
Login Form
Product Card
Footer

These components can be created once and reused wherever needed.
Components-Reusable block of code

2.Important Features of React
Some important points about React are:
React is a JavaScript library.
It is mainly used for building user interfaces.
React uses components.
Components can be reused.
React supports JSX.
React uses a Virtual DOM.
React is useful for building Single Page Applications (SPAs).
React has a large ecosystem and community.
React can be combined with other JavaScript libraries and tools.
React is commonly used for modern web application development.

3.What is JSX?
JSX stands for JavaScript XML.
It allows us to write HTML-like syntax inside JavaScript.
Exammple:
const element = <h1>Hello React!</h1>;

4.How to create react project
-Create File for the project
-Open terminal in that file
-npm install
-npm create vite@latest
-project-name(Small Letter)
-React
-Javascript
-Eslint
-Yes

rfce-Shortcut
To fill the react outline code
To use this shortcut Install extension ES7-React

Postgresql Introduction

Alaguselvan T — Sun, 09 Aug 2026 15:54:20 +0000

HISTORY-->
-PostgreSQL's history began in 1986 as a research project called POSTGRES at the University of California, Berkeley -1986 – POSTGRES Project
-The goal was to create a more advanced database system that could overcome some limitations of traditional relational databases.

1994 – SQL Support
-In 1994, two Berkeley students, Andrew Yu and Jolly Chen, added an SQL language interpreter to POSTGRES.
-The project was renamed Postgres95.

1996 – PostgreSQL ->For showing it supports Sql

What is PostgreSQL?
PostgreSQL is an open-source relational database management system (RDBMS) used to store, manage, and retrieve data.
It is commonly called Postgres.
PostgreSQL uses SQL (Structured Query Language) to communicate with the database.
ORDBMS->Object Relational Database Management System
-sending object as an argument

Database
A database is an organized collection of data.

DBMS-->Software to communnicate with database
Two Types
-RDBMS(Relational)
-NRDBMS(Non Relational )
RDBMS:
*Values stored in table formate(Rows annd columns)
Example:Mysql.Oracle
NRDBMS:
-Values stored in document .graph etc other than table
Example:MongoDB,Neo4j,Apache

INSTALLATION IN TERMINAL:

1. sudo apt update
2. sudo apt install postgresql postgresql-contrib
3. sudo systemctl status postgresql
4. sudo systemctl enable postgresql
5. sudo -i -u postgres
6.PSQL

CALLBACK FUNCTION IN JS

Alaguselvan T — Sun, 19 Jul 2026 14:53:18 +0000

DEFINITION:
A callback function is a function that is passed as an argument to another function and is executed after a specific task is completed.
or
A callback is a function that is called later by another function.

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

function sayBye() {
    console.log("Goodbye!");
}

greet("Alagu", sayBye);

Explain About code:

greet() is the main function.
sayBye() is the callback function.
After greeting, greet() calls callback().

SetTimeout:
SetTimeout() is a built-in JavaScript function that executes a function after a specified delay.
Basic:

console.log("Start");

setTimeout(function () {
    console.log("Hello, JavaScript!");
}, 2000);

console.log("End");

Explanation:
"Start" is printed.
setTimeout() starts a 2-second timer.
"End" is printed immediately.
After 2 seconds, the callback function runs and prints "Hello, JavaScript!".

Named Function:

function welcome() {
    console.log("Welcome to the Blog Platform!");
}

setTimeout(welcome, 3000);

Advantages of Callback Functions
Makes code reusable.
Helps execute code after another task finishes.
Essential for asynchronous programming.
Used in events, timers, and API requests.
Improves code organization.

Disadvantages of Callback Functions
Nested callbacks can make code difficult to read.
Too many callbacks can lead to callback hell.
Debugging nested callbacks can be harder.

ARRAY IN JS

Alaguselvan T — Sat, 18 Jul 2026 17:09:39 +0000

Definition
An array is an ordered collection of values stored in a single variable. Each value in an array is called an element, and every element has an index. Array indexing starts at 0.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits);

Why Do We Use Arrays?
Without arrays, you would need multiple variables to store similar data.

Accessing Array Elements:
Access elements using their index.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Modifying Array Elements
You can update an element by assigning a new value to its index.

const fruits = ["Apple", "Banana", "Orange"];

fruits[1] = "Mango";

console.log(fruits);

Finding the Length of an Array
Use the length property.

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits.length);

Adding Elements
push()
Adds an element to the end of the array.

const fruits = ["Apple", "Banana"];

fruits.push("Orange");

console.log(fruits);

unshift()
Adds an element to the beginning.

const fruits = ["Banana", "Orange"];

fruits.unshift("Apple");

console.log(fruits);

Removing Elements
pop()
Removes the last element.

const fruits = ["Apple", "Banana", "Orange"];

fruits.pop();

console.log(fruits);

shift()
Removes the first element.

const fruits = ["Apple", "Banana", "Orange"];

fruits.shift();

console.log(fruits);

Looping Through Arrays
Using a for Loop

const fruits = ["Apple", "Banana", "Orange"];

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

Using for...of

const fruits = ["Apple", "Banana", "Orange"];

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

Using foreach();(TBD)

const fruits = ["Apple", "Banana", "Orange"];

fruits.forEach((fruit) => {
  console.log(fruit);
});

OBJECTS IN JS

Alaguselvan T — Sat, 18 Jul 2026 16:54:03 +0000

Definition:
A JavaScript object is a collection of key-value pairs used to store related data and functionality.

const person = {
  firstName: "Alagu",
  lastName: "Selvan",
  age: 21,
  isEmployee: false
};

console.log(person);

Adding Properties:

const person = {
  name: "Alagu"
};

person.age = 21;

console.log(person);

Updating Properties:

person.age = 30;

Deleting Properties:

delete person.age;

OBJECT METHODS:
Objects can also contain functions

const person = {
  name: "Alagu",

  ak() {
    console.log("Hello ak");
  }
};

person.ak();

This Keyword:
Inside an object, this refers to the current object.

const person = {
  name: "Alagu",

  ak() {
    console.log("Hello " + this.name);
  }
};

person.ak();

NESTED OBJECTS:
Objects can contain other objects.

const employee = {
  name: "Alagu",

  address: {
    city: "Chennai",
    state: "Tamil Nadu"
  }
};

console.log(employee.address.city);

Looping statement in Javascript

Alaguselvan T — Thu, 09 Jul 2026 18:18:38 +0000

Loops are used to execute a block of code repeatedly until a condition becomes false.
It will run until the condition is true and exit when the condition is false

1. for Loop
Used when you know the number of iterations.

Syntax

for (initialization; condition; increment/decrement) {
    // code
}

Example:

for (let i = 1; i <= 5; i++) {
    console.log(i);//1 2 3 4 5
}

2. while Loop
If we dont know the iteration count then use while loop
Checks the condition first. Executes as long as the condition is true.exit when is condition is false

Syntax:

while (condition) {
    // code
}

Example:

let i = 1;

while (i <= 5) {
    console.log(i);//1 2 3 4 5
    i++;
}

Difference Between for and while loop

FUNCTIONS IN JAVASCRIPT

Alaguselvan T — Wed, 08 Jul 2026 17:57:41 +0000

Function:
-Reusable block of code to perform a specific Task
-Easy to Maintain

Declaration:

function ak(){
       console.log("Hello Ak");//Ak
}
ak()

Passing Parameters:

function ak(name){
       console.log("Name:"+name);//Name:Alagu
}
ak("Alagu");

Return Values:

function ak(a,b){
       return a+b;
}
let result=ak(10,20);
console.log(result);//30

Expression:
-Function can be stored in variable

let multiply=funtion(a,b){
          return a+b;
};
console.log(multiply(4,5)); //20

Arrow Function:
Shortest way for funtion declaration

const sub=(a,b)=>a-b;
console.log(sub(10,4);//6

Conditional Statement:

Alaguselvan T — Mon, 06 Jul 2026 17:46:32 +0000

Conditional statementsare used to make decisions in JavaScript. They execute different blocks of code depending on whether a condition is true or false.

-if Statement
Executes code only if the condition is true.

let age = 20;

if (age >= 18) {
    console.log("Eligible to vote");
}

o/p:Eligible to vote

-if...else Statement
Executes one block if the condition is true, otherwise executes another block.

let age = 16;

if (age >= 18) {
    console.log("Eligible to vote");
} else {
    console.log("Not eligible to vote");
}

O/p:Not eligible to vote

-if...else if...else Statement
Used to check multiple conditions.

let marks = 75;

if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 75) {
    console.log("Grade B");
} else if (marks >= 50) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

O/p:Grade B

-switch Statement
Used when you want to compare a single value against multiple possible values.

let day = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

    default:
        console.log("Invalid day");
}

O/p:Wednesday

-Ternary Operator (? :)
A shorthand for if...else.

let age = 20;

let result = (age >= 18) ? "Adult" : "Minor";
console.log(result);

O/p:Adult

OPERATORS IN JAVASCRIPT

Alaguselvan T — Sat, 04 Jul 2026 17:30:08 +0000

Operators:
JavaScript operators are symbols or keywords that perform operations on values (operands).

Examples:

Arithmetic Operators: Used to perform mathematical calculations.

let a = 15;
let b = 4;

console.log(a + b); // 19
console.log(a - b); // 11
console.log(a * b); // 60
console.log(a / b); // 3.75
console.log(a % b); // 3
console.log(a ** b); // 50625

String Addition:

console.log("Hello" + " World");
// Hello World

console.log("10" + 5);
// 105

console.log(10 + "5");
// 105

Assignment Operators Assign values to variables. (=,+=,-=,=,/=,%=,*=)

let x = 10;

x += 5;
console.log(x); //15

x *= 2;
console.log(x); //30

x -= 10;
console.log(x); //20

Comparison Operators Return true or false (==,===,!=,<=,>=,>,<)

console.log(5 > 3);     // true
console.log(5 < 3);     // false
console.log(5 >= 5);    // true
console.log(5 <= 4);    // false
console.log(5 != "5");  // false
console.log(5 !== "5"); // true

Logical Operators
Used with boolean values.
(AND,||,!)
And:both should be true
Or:Atleast One true
Not:Opposite !true means False
Increment and Decrement Operators
Increment (++)
Adds 1.
Pre Increment:

let x = 5;

console.log(++x); // 6 first increament

Post Increment

let x = 5;

console.log(x++);//5 use and then increase
console.log(x);//6 increased

Decrement (--) Same as Increment

SDLC - LifeCycle

Alaguselvan T — Tue, 30 Jun 2026 11:58:29 +0000

SDLC:
The Software Development Life Cycle (SDLC) is a structured process used to plan, design, develop, test, deploy, and maintain software.
To develop high-quality software efficiently.

LifeCycle:

Requirements-Gathering from Client(BRD-Business Requirement Document,FRD-Functional Requirement Document SRS-Software Requirement Service)
Analysis-Analyse the project
Design-Design the Outline of the project
Development-Develope the project
Testing-once completed the project test that project based on requirements
Deployment-Host the project
Maintenance-Customer Support and maintain tha code efficiency

Common SDLC Models:

1.Waterfall Model-each phase is completed before the next
2.Agile Model-Iterative development with frequent releases and customer feedback
3.V Model-Verification and validation activities are paired with each development phase.
4.Spiral Model-Risk-driven approach suitable for large, complex projects.
5.Iterative Model-Builds the system through repeated cycles, improving it incrementally.

Introduction - JavaScript

Alaguselvan T — Mon, 29 Jun 2026 15:54:58 +0000

History of JavaScript

JavaScript is one of the most popular programming languages in the world. It was created to make web pages interactive.
JavaScript was created in 1995.
It was developed by Brendan Eich.
He created the first version in just 10 days

Evolution of the Name
JavaScript went through three names:
Mocha (first internal name)
LiveScript
JavaScript (final name)

What is JavaScript?
-JavaScript (JS) is a high-level, interpreted, object-oriented programming language used to make websites interactive and dynamic.
-Without JavaScript, a website is mostly static.

Example
Imagine a login page:
HTML → Creates the username and password fields.
CSS → Styles the page.
JavaScript → Checks the input, validates it, and displays messages.

What is a Variable?
A variable is a named container used to store data.
Ways to Declare Variables

let (Recommended) Value can be changed. Cannot be redeclared in the same scope.
const (Recommended) Value cannot be reassigned. Must be initialized when declared.
var (Old way) Can be redeclared. Function-scoped. Avoid using it in modern JavaScript.

Data Types
A data type tells JavaScript what kind of value a variable holds.

Primitive Data Types (7)

String Stores text.
Number Stores integers and decimals.
Boolean Stores true or false.
Undefined A variable is declared but not assigned a value.
Null Represents an intentional empty value

Non-Primitive Data Type

1.Object
Objects store data as key-value pairs.
2.typeof
Check a Data Type
Use typeof.

Operators
Operators perform operations on values.

Arithmetic: +, -, , /, %, *
Assignment: =, +=, -=, *=, /=
Comparison: ==, ===, !=, !==, >, <, >=, <=
Logical: &&, ||, !
Increment/Decrement: ++, --

Keywords
Keywords have special meanings and cannot be used as variable names.

Examples:
let
const
var
if
else
for
while
return
function
class
switch

Roadmap - HTML & CSS

Alaguselvan T — Sat, 27 Jun 2026 16:57:29 +0000

HTML Fundamentals:

HTML document structure (<!DOCTYPE>, <html>, <head>, <body>)
Headings and paragraphs
Links and images
Lists
Tables
Forms
Semantic HTML (<header>, <nav>, <main>, <section>, <article>, <footer>)
Accessibility basics (labels, alt text)
Attributes

Practice projects

Personal profile page
Resume webpage
Contact form

CSS Fundamentals:

Learn how to style HTML.

Topics:

CSS syntax
Selectors
Colors
Fonts
Backgrounds
Borders
Margins and padding
Width and height
Display properties
Units (px,%,vh,vw)

Master page layouts.

Topics:

Box model
Positioning
Flexbox
CSS Grid
Overflow
Z-index

Topics:

Transitions
Animations
Transform
Pseudo-classes
Pseudo-elements
Gradients
Shadows