DEV Community: vidhya murali

Java Syntax

vidhya murali — Thu, 06 Aug 2026 09:34:06 +0000

public class Main {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}

Every line of code that runs in Java must be inside a class. The classname should always start with an uppercase first letter.

In our example, we named the class Main.

Note: Java is case-sensitive. MyClass and myclass would be treated as two completely different names.

The name of the Java file must match the class name. So if your class is called Main, the file must be saved as Main.java. This is because Java uses the class name to find and run your code. If the names don't match, Java will give an error and the program will not run.

When saving the file, save it using the class name and add .java to the end of the filename

The main Method

The main() method is required in every Java program. It is where the program starts running:

public static void main(String[] args)

Any code placed inside the main() method will be executed.

main() is the starting point of every Java program.

System.out.println()

Inside the main() method, we can use the println() method to print a line of text to the screen:

public static void main(String[] args) {
  System.out.println("Hello World");
}

Note: The curly braces {} mark the beginning and the end of a block of code.

System.out.println() may look long, but you can think of it as a single command that means: "Send this text to the screen."

Here's what each part means):

System is a built-in Java class.

out is a member of System, short for "output".
println() is a method, short for "print line".

Finally, remember that each Java statement must end with a semicolon (;).

JAVA day-1

vidhya murali — Thu, 06 Aug 2026 09:21:18 +0000

Java is a popular and powerful programming language, created in 1995.

It is owned by Oracle, and more than 3 billion devices run Java.

It is used for:

Mobile applications (specially Android apps)
Desktop applications
Web applications
Web servers and application servers
Games
Database connection And much, much more!

Why Use Java?

Java works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc.)
It is one of the most popular programming languages in the world
It has a large demand in the current job market
It is easy to learn and simple to use
It is open-source and free
It is secure, fast and powerful
It has huge community support (tens of millions of developers)
Java is an object oriented language which gives a clear structure to programs and allows code to be reused, lowering development costs
As Java is close to C++ and C#, it makes it easy for programmers to switch to Java or vice versa

public class Main {
  public static void main(String[] args) {
    String name = "Vidhya";
    System.out.println("Hello " + name);
  }
}

Database Basics

vidhya murali — Thu, 06 Aug 2026 08:11:44 +0000

What is Data?

Data refers to raw, unorganized facts and figures that can be processed to generate meaningful information. A database is a structured system used to store, manage, and retrieve data efficiently for multiple users and applications.

It's important due to following features:

Scalability: Handles large volumes of data efficiently.
Data Integrity: Maintains accuracy using rules and constraints.
Security: Protects data through controlled access and permissions.
Analytics: Helps analyze data to support better decision-making.

Working of Databases

Databases work by organizing and storing information in a structured or unstructured format, allowing easy access, retrieval, and modification. At the core of every database system is the Database Management System (DBMS)- a software layer that acts as an intermediary between users and the raw data.

The DBMS handles tasks like querying, updating, deleting and managing access permissions, without requiring users to know the physical details of where data is stored.
When a user submits a request (such as a search or update), the DBMS processes the query, locates the relevant data, and returns results in a structured format.
DBMSs provide features like backup, recovery, performance optimization and data security to ensure the system runs efficiently and reliably.

Components of a Database
Databases consist of several critical components that work together to store, organize and retrieve data effectively. Here is a detailed explanation of each component:

Data: The actual information stored in the database, such as text, numbers, images, or files.
Schema: The structural blueprint that defines how data is organized—tables, fields, data types, and relationships.
DBMS: The software that manages database operations like storage, retrieval, and security (e.g., MySQL, Oracle).
Queries: Instructions (usually SQL) used to retrieve or manipulate data within the database.
Users: People or systems that interact with the database, each with specific roles and access permissions

Types of Databases

Databases can be classified into two primary types Relational (SQL) and NoSQL Databases. NoSQL is then further divided into four types: Document-oriented, Key-Value, Wide-Column, and Graph databases.

Relational Databases (RDBMS)

Relational databases organize data into tables made up of rows (records) and columns (fields). They use schemas (blueprints) to define how data is structured and how different tables relate to each other.

Strict schema-based structure.
Primary Keys (unique IDs) and Foreign Keys (relationships between tables).
ACID compliant (ensures Atomicity, Consistency, Isolation, and Durability in transactions).
Ideal for structured data.

NoSQL Databases

"NoSQL" stands for "Not Only SQL". These databases are designed to handle unstructured or semi-structured data, such as text, images, videos or sensor data. They don’t rely on the traditional table format.

Flexible data models (no fixed schema).
Scales horizontally for high-volume data.
Often optimized for specific use cases like graphs or time-series data

Document Databases – Store data as JSON-like documents. (Example: MongoDB)
Key-Value Stores – Store simple key–value pairs for fast lookups. (Example: Redis)
Columnar Databases – Store data by columns for analytics. (Example: Apache Cassandra)
Graph Databases – Store nodes & relationships for connected data. (Example: Neo4j)

**ACID **Properties:

ACID stands for Atomicity, Consistency, Isolation, and Durability—four essential principles that ensure your database transactions are reliable, accurate, and secure.

Atomicity: Ensures transactions complete fully or not at all.
Consistency: Ensures the database moves from one valid state to another.
Isolation: Ensures that multiple transactions can happen at the same time without affecting each other.
Durability: Saves changes permanently after completion

Real-World Applications of Databases

Databases are essential part of our life. There are several everyday activities that involve our interaction with databases.

Banking: Stores transactions and account details.
Transportation: Manages bookings and schedules.
Education: Tracks student records and grades.
Retail: Handles inventory and customer orders.
Social Media: Stores user data, messages, and media.
Multimedia: Manages images, audio, and video.
Business & Data Science: Analyzes trends and supports predictions.

CRM vs ERP

vidhya murali — Thu, 06 Aug 2026 05:37:12 +0000

CRM (Customer Relationship Management)

Definition:

CRM is software used to manage interactions with customers before, during, and after a sale.

Purpose

Manage customer information.
Track leads and sales.
Handle customer support.
Improve customer satisfaction.
Features
Customer database
Lead management
Sales tracking
Email and phone communication
Customer support (tickets)

Example

A customer buys a laptop.

CRM stores:

Customer name
Phone number
Email
Purchase history
Support requests

This helps the company provide better service.

Companies using CRM

Banks
E-commerce companies
Telecom companies
Insurance companies
Popular CRM Software
Salesforce
Zoho CRM
HubSpot CRM
Microsoft Dynamics 365 CRM

ERP (Enterprise Resource Planning)

Definition:

What is an ERP system?

Enterprise Resource Planning (ERP) is a type of software used by companies of all sizes to integrate core parts of their business processes. Connecting business processes allows companies to streamline their processes and data across organizations, gaining better visibility and improving reporting and decision making. It enables automation and improves business processes resulting in increase productivity and saving costs.

ERP software is mainly focusing on back-end departments and processes of a business such as:

Finance
Purchasing
Procurement & Sourcing
Supply Chain
Manufacturing
Sales

Benefits of ERP system

Since digitalization is a big part of every industry, ERP strategy became at the heart of every company’s digital transformation regardless of the size and industry of a company.

And because ERP system can connect your business core process, it brings many benefits for your company. The primary benefits of implementing a robust ERP system are:

Improved and Speed Up Reporting: Manually pulling data from different sources and combining it not only requires a lot of your time but as your company grows it will require more workforce, thus, more prone to making mistakes and still not having all the data. ERP system centralizes your data into one database and helps you to create reports near real-time.

Streamlined Processes: Because ERP connects your departments, it helps you to streamline day-to-day business tasks easily and quickly with powerful workflows and automation. This can include common tasks such as automatic approval requests, PO to SO, and others. This is especially important when your company grows and processes become more complex.

Increased Productivity: One of the top benefits of an ERP system is increased productivity. Many employees will be able to complete their tasks using only one app, which reduces wasted time between switching the apps. It also helps automate repetitive and manual tasks and so much more.

Increase Collaboration: ERP software also improves your collaboration across departments which also results in increase productivity. Having a centralized database for your business enables employees to easily pull data and quickly share it with their coworkers. This also reduces human andmiscommunication errors.
Cost Saving: Can come in many different forms. For example, ERP can help your employees, do more with less, thus avoiding extra hires to manage the increased workload. Another great example is better inventory planning and management to ensure you always have the right amount of stock to avoid too much stock, too little stock, or a longer lead time. The cost-saving benefits are endless.
Better Inventory Management: ERP does a great job of helping with automating tedious and manual inventory tasks, predicting and planning stock orders, tracking inventory turnover, and saving business costs by better managing your entire inventory and supply chain.
Detailed Analytics & Insights: Because ERP works as a centralized database it helps provide you with detailed analytics and transform them into actionable insights with the power of AI. Thus, enabling you to collect and analyze a large amount of data across different sources and get information to make the right decisions.

Reference : https://adynamics.com.my/erp/erp-vs-crm/

Loops in Python

vidhya murali — Wed, 05 Aug 2026 13:48:47 +0000

Five students enter the classroom one after another. The first student gets roll number 1, the second gets 2, and so on. Display the assigned roll numbers.

using for Loop:

using while Loop :

2.A coach asks students to stand only at even-numbered positions in a queue. Display the first five positions.

3.A newly constructed building has a special lift that does not stop on every floor. For safety reasons, it stops only at every third floor. A person enters the lift at the ground floor and presses the "Up" button. Display the first five floors where the lift will stop

A rocket launches with a countdown using only even numbers from 10. Display the countdown.

useReducer Hook in React

vidhya murali — Mon, 03 Aug 2026 17:35:01 +0000

The useReducer hook is a state management hook in React that provides an alternative to the useState hook. It is used when the state of a component is complex and requires more than one state variable.

It allows for custom state logic.

If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be useful.

Syntax:

const [state, dispatch] = useReducer(reducer, initialState, init)

reducer: The reducer is a function responsible for defining how the state transitions from one state to another based on dispatched actions. It takes two arguments: the current state and the action being dispatched.
initialSate: initialState is the initial state value for the state managed by the reducer. It can be of any data type: object, array, number, string, etc., depending on the requirements of your application. It represents the initial state of your component before any actions are dispatched.
(optional) *init *: init is an optional initialization function that can be used to compute the initial state lazily. It is a function that returns the initial state value. If provided, it is called once during the initial render, and its return value is used as the initial state.

Example 1 :

import { useReducer, useState } from 'react'


function App() {

  let reducer=(state, action)=>{

    switch(action.type){
      case "increment" : return {...state,count:state.count+1}
      case "decrement" : return {...state,count:state.count>0? state.count-1 : state.count}
     }

  }
const[state,dispatch]=useReducer(reducer,{count:0})


  return (
    <>
     <h1>Counter App </h1>
     <h2>{state.count}</h2>
     <button  onClick={()=>dispatch({type:"increment"})}>inc</button>
     <button onClick={()=>dispatch({type:"decrement"})}>Dec</button>
    </>
  )
}

export default App

Example 2 :

import { useReducer } from 'react';
import { createRoot } from 'react-dom/client';

const initialScore = [
  {
    id: 1,
    score: 0,
    name: "John",
  },
  {
    id: 2,
    score: 0,
    name: "Sally",
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREASE":
      return state.map((player) => {
        if (player.id === action.id) {
          return { ...player, score: player.score + 1 };
        } else {
          return player;
        }
      });
    default:
      return state;
  }
};

function Score() {
  const [score, dispatch] = useReducer(reducer, initialScore);

  const handleIncrease = (player) => {
    dispatch({ type: "INCREASE", id: player.id });
  };

  return (
    <>
      {score.map((player) => (
        <div key={player.id}>
          <label>
            <input
              type="button"
              onClick={() => handleIncrease(player)}
              value={player.name}
            />
            {player.score}
          </label>
        </div>
      ))}
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Score />
);

Python Functions

vidhya murali — Sun, 02 Aug 2026 19:15:48 +0000

Python functions are reusable blocks of code used to perform a specific task. They help organize programs into smaller sections and execute the same logic whenever needed by calling the function.

Defining a Function

A function can be defined using def keyword. Below is the syntax to define a function:

Here, we define a function using def that prints a welcome message when called.

def show():
    print("Hello welcome to my blog")

Calling a Function

After creating a function, call it by using the name of the functions followed by parenthesis containing parameters of that particular function.

def show():
    print("Hello welcome to my blog")

show()

Function Arguments

Arguments are values passed to a function when it is called. They allow functions to receive input data and perform operations using those values.

Syntax :

def function_name(arguments):
    # function body
    return value

def function_name(arguments): defines a function with optional arguments.
# function body contains the statements to be executed.
return value returns a result from the function. If no return statement is used, it returns None by default.

Example: In this example, function checks whether the number passed as an argument is even or odd.

def evenOdd(x):
    if (x % 2 == 0):
        return "Even"
    else:
        return "Odd"

print(evenOdd(2))
print(evenOdd(5))

Types of Function Arguments

Python supports different types of arguments that can be passed during a function call.

Default argument: Default argument use a predefined value when no value is passed during the function call.

def myFun(x, y=12):
    print("x: ", x)
    print("y: ", y)

myFun(3)

Explanation:

y=12 sets a default value for parameter y and myFun(3) passes only one argument.
Since y is not provided, it uses the default value 12.

Keyword Arguments: pass values using parameter names, so argument order does not matter.

def student(fname, lname):
    print(fname, lname)

student(fname='vidhya', lname='murali')
student(lname='Murali', fname='Prem')

Explanation: fname and lname are passed using parameter names and arguments can be provided in any order.

Positional Arguments: values are assigned to parameters based on their order in the function call.

def nameAge(name, age):
    print("Hi, I am", name)
    print("My age is ", age)

print("Case-1:")
nameAge("vidhya", 22)

print("Case-2:")
nameAge(15, "prem")

Explanation:

In Case-1, values match the correct parameters.
In Case-2, values are swapped because the order changed.

Arbitrary Arguments: allow functions to accept multiple values. This is done using two special symbols:

*args collects extra positional arguments as a tuple.
**kwargs collects extra keyword arguments as a dictionary.

def myFun(*args, **kwargs):
    print("Non-Keyword Arguments (*args):")
    for arg in args:
        print(arg)

    print("Keyword Arguments (**kwargs):")
    for key, value in kwargs.items():
        print(f"{key} == {value}")

myFun('Hey', 'Welcome', first='Geeks', mid='for', last='Geeks')

Explanation:

*args stores extra positional arguments.
**kwargs stores extra keyword arguments. loop prints all positional and keyword values separately.

Function within Functions

A function defined inside another function is called an inner function (or nested function). It is used to organize related logic and access variables from the outer function.

def f1():
    s = 'Happy Learning'
    def f2():
        print(s)

    f2()
f1()

Return Statement

Return is used to end a function and send a value back to the caller. It can return any data type, multiple values (packed into a tuple), or None if no value is given.

Syntax

return [expression]

Parameters: expression is the value returned by the function. If no value is returned, it returns None by default

def sq_value(num):
    return num**2

print(sq_value(2))
print(sq_value(-4))

Explanation:

sq_value(num) accepts a number as input.
num**2 calculates the square of the number.
return sends the result back to the caller.

Pass by Reference and Pass by Value

Variables refer to objects. Function behavior depends on whether the object is mutable or immutable.

Mutable objects like lists can be modified inside functions.
Immutable objects like integers and strings remain unchanged.

def myFun(x):
    x[0] = 20

b = [10, 11, 12, 13]
myFun(b)
print(b)

def myFun2(x):
    x = 20

a = 10
myFun2(a)
print(a)

Explanation:

myFun(x) modifies the first element of the list and lists are mutable, so the original list changes.
myFun2(x) assigns a new value to x. Integers are immutable, so the original value of a remains unchanged.

Note: Python uses pass-by-object-reference, where functions receive references to objects instead of actual copies.

Reference : https://www.geeksforgeeks.org/python/python-functions/

My React Learning Journey: From Routing to API Integration

vidhya murali — Sat, 01 Aug 2026 19:47:01 +0000

Today, I had a great opportunity to take a React class for my friends who are learning React along with me.

Instead of just learning concepts individually, I tried to explain them with live demos and a real-world e-commerce project.

📌 Topics I Covered
I started with React Router, where I explained:

BrowserRouter
Routes
Route
Link
NavLink
Outlet
useNavigate
useParams

I also demonstrated how these concepts work together to create smooth navigation and nested routing in React applications.

🔄 State Management with useContext
Next, I explained useContext and how it helps avoid unnecessary prop drilling.

I used my recent E-commerce project as a practical example and showed how I managed the cart functionality using Context API, including the View Cart section.

🛒 E-commerce Project Overview
I gave an overview of my recent e-commerce website and explained how I implemented:

React Router for navigation
useContext for cart management
Search functionality
Product listing
View Cart
Dynamic product pages

This helped connect the theoretical concepts with a real application.

🌐 API & Data Fetching

Finally, I introduced APIs and explained how React applications communicate with external APIs.

For the live demo, I used Fake Store API and showed how to fetch product data using:

fetch()
axios

I also explained how the API response can be stored in state and displayed dynamically using .map().

💡 What I Learned

Teaching others helped me realize that explaining a concept is one of the best ways to understand it deeply.

It also improved my confidence in explaining technical concepts and connecting multiple React concepts together in a real-world project.

Learn → Build → Explain → Learn Better. 🚀

From DSA to Distributed Systems: What I Learned in the "Code on JVM" Session

vidhya murali — Sat, 01 Aug 2026 19:33:45 +0000

Code on JVM – Session

The session mainly focused on how large-scale software systems work, not just Java programming. These are concepts used by companies like Google, Amazon, Netflix, Uber, Instagram, and Discord.

What is DSA (Data Structures & Algorithms)? DSA is the study of organizing and processing data efficiently.

Imagine you're building a contact list.

If you store names randomly, searching takes longer.If you organize them properly, searching becomes much faster.
That's what DSA helps with.

Common Data Structures

Array
Linked List
Stack
Queue
Tree
Graph
HashMap
Heap
Common Algorithms
Searching
Sorting
Recursion
Dynamic Programming
Graph Algorithms

Why should Java developers learn DSA?

Because every software company asks DSA questions in interviews, and efficient code is essential for scalable applications.

Practice on:

LeetCode
HackerRank

Big O Notation Big O tells us how fast or slow an algorithm becomes as the amount of data grows.

Example:

Searching a name in a list of 10 people is easy.

Searching in a list of 10 million people is harder.

Big O measures this growth.

Complexity Meaning Example

O(1) Constant Access an array element
O(log n) Very fast Binary Search
O(n) Linear Linear Search
O(n log n) Efficient sorting Merge Sort
O(n²) Slow Bubble Sort

Abstract Syntax Tree (AST) When you write Java code,

int sum = a + b;
The compiler doesn't understand text directly.

It converts your code into a tree called an Abstract Syntax Tree (AST).

Example:

Assignment
|
Variable(sum)
|
+
/ \
a b
AST is used by:

Java Compiler

IntelliJ IDEA

Eclipse

Static code analyzers

Engineering Blocks Large applications are built using reusable components called engineering blocks.

Examples:

Database
Cache
Search
Load Balancer
CDN
Queue
Authentication
Logging

For example, when you order food on Swiggy:

Login service
Restaurant service
Payment service
Notification service
Map service

Each is an engineering block.

Bloom Filter A Bloom Filter quickly checks whether an item might exist.

Example:

Suppose a website has 100 million usernames.

Instead of checking the database every time:

Bloom Filter first checks:

Definitely not present ✅

Maybe present ✅

If it says "maybe," then the database is checked.

Benefits:

Very fast

Uses very little memory

Used in:

Google Chrome Safe Browsing

Apache Cassandra

Redis

Apache Cassandra Apache Cassandra is a NoSQL database designed for huge amounts of data.

Features:

Very fast writes

High availability

Distributed across many servers

Used by:

Discord

Netflix

Apple

Instagram (for some workloads)

HNSW Graph HNSW stands for Hierarchical Navigable Small World.

It is an algorithm for finding similar items quickly.

Example:

Search:

"White sports shoes"

Instead of exact matches, it finds:

White sneakers

Running shoes

Tennis shoes

Used in:

AI search

Image search

Recommendation systems

What is RAG? RAG stands for Retrieval-Augmented Generation.

It is not an AI model.

Instead, it is a technique that combines:

Searching for relevant information.

Giving that information to a Large Language Model (LLM).

Generating an answer based on those documents.

Example:

You ask a company's chatbot:

"What is the leave policy?"

The chatbot:

Searches company documents.

Retrieves the relevant policy.

Uses the LLM to answer.

Vector Database Normally, databases store text or numbers.

A vector database stores embeddings, which are numerical representations of data that capture meaning.

Used for:

Semantic search

AI search

Recommendation systems

RAG applications

Popular examples:

Pinecone

Milvus

Weaviate

ChromaDB

Skip List A Skip List is a faster version of a linked list.

Instead of moving one node at a time, it uses multiple levels so it can "skip" over many nodes.

Used in:

Redis Sorted Sets

Storage engines

Average search time: O(log n).

Redis Sorted Set Redis stores data in memory, making it extremely fast.

A Sorted Set stores data along with a score.

Example:

Alice 100
Bob 95
Charlie 80
Used for:

Game leaderboards

Rankings

Rate limiting

RocksDB RocksDB is a high-performance key-value database created by Meta.

Features:

Fast writes

Efficient storage

Embedded database

Used in:

CockroachDB

Caching systems

Storage engines

LSM Tree LSM stands for Log-Structured Merge Tree.

Instead of writing directly to disk every time:

Data is written to memory (MemTable).

Later, it's flushed to disk as sorted files.

Benefits:

Faster writes

Reduced disk operations

Used by:

Cassandra

RocksDB

ScyllaDB

Consistent Hashing Suppose you have 4 servers storing data.

If a 5th server is added, you don't want to move all the data.

Consistent Hashing moves only a small portion of data, making scaling much easier.

Used in:

Amazon DynamoDB

Cassandra

Discord

CDNs

CDN (Content Delivery Network) A CDN stores copies of files on servers around the world.

Example:

If you're in Chennai watching Netflix, the video is served from a nearby server instead of one in another country.

Benefits:

Faster loading

Lower latency

Examples:

Akamai

Cloudflare

Amazon CloudFront

H3 Index H3 is a geographic indexing system created by Uber.

It divides the Earth into hexagonal cells.

Why hexagons?

Better coverage than squares.

React UseRef Hook

vidhya murali — Thu, 30 Jul 2026 15:00:05 +0000

The useRef Hook lets you store a mutable value that persists across component renders. It is commonly used to access DOM elements or keep values without causing re-renders.

Returns an object with a .current property to hold any value
Updating .current does not trigger a re-render
Useful for DOM access, timers, and storing previous values

Does Not Cause Re-renders

If we tried to count how many times our application renders using the useState Hook, we would be caught in an infinite loop since this Hook itself causes a re-render.

To avoid this, we can use the useRef Hook

*Syntax *:

const refContainer = useRef(initialValue);

useRef returns an object { current: initialValue }.
The current property can be updated without re-rendering the component

Implementing the useRef hook

import { useState, useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <p>Type in the input field:</p>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

The useRef hook is used to access DOM elements and persist values across renders without triggering re-renders.

Accessing the DOM using useRef hook A ref created with useRef is attached to the textarea, allowing the click handler to access the DOM element and programmatically set focus.

import React, { Fragment, useRef } from 'react';

function App() {
    const focusPoint = useRef(null);
    const onClickHandler = () => {
        focusPoint.current.value =
            "The quick brown fox jumps over the lazy dog";
        focusPoint.current.focus();
    };
    return (
        <Fragment>
            <div>
                <button onClick={onClickHandler}>
                    ACTION
                </button>
            </div>
            <label>
                Click on the action button to
                focus and populate the text.
            </label><br />
            <textarea ref={focusPoint} />
        </Fragment>
    );
};
export default App;

useRef creates a reference focusPoint, which allows direct manipulation of the DOM element.
Clicking the "ACTION" button triggers onClickHandler, which sets text in the textarea and focuses it.
(<>...</>) is used to group multiple elements without adding extra wrappers in the DOM.

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

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

Tracking State Changes

The useRef Hook can also be used to keep track of previous state values.

This is because we are able to persist useRef values between renders.

Example:
Use useRef to keep track of previous state values:

import { useRef, useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);

This time we use a combination of useState, useEffect, and useRef to keep track of the previous state.

In the useEffect, we are updating the useRef current value each time the inputValue is updated by entering text into the input field.

Python -Keywords,Operators

vidhya murali — Wed, 29 Jul 2026 17:17:50 +0000

Keywords in Python

Keywords are special reserved words that are part of the language itself. They define the rules and structure of Python programs which means you cannot use them as names for your variables, functions, classes or any other identifier.

Getting List of all Python keywords

import keyword
print("The list of keywords are : ")
print(keyword.kwlist)

The list of keywords are: 
['False', 'None', 'True', 'and', 'as', 'assert', 'async', 'await', 'break', 'class', 'continue', 'def', 'del', 'elif', 'else', 'except', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or', 'pass', 'raise', 'return', 'try', 'while', 'with', 'yield']

Keyword-Description

and --> A logical operator
as --> To create an alias
assert --> For debugging
async --> Define an asynchronous function
await --> Wait for and get a result from an awaitable
break --> To break out of a loop
case --> Pattern in a match statement
class --> To define a class
continue --> To continue to the next iteration of a loop
def --> To define a function
del --> To delete an object
elif --> Used in conditional statements, same as else if
else --> Used in conditional statements
except -->Used with exceptions, what to do when an exception occurs
False --> Boolean value, result of comparison operations
finally --> Used with exceptions, a block of code that will be executed no matter if there is an exception or not
for --> To create a for loop
from --> To import specific parts of a module
global--> To declare a global variable
if -->To make a conditional statement
import --> To import a module
in --> To check if a value is present in a list, tuple, etc.
is --> To test if two variables are equal
lambda -->To create an anonymous function
match --> Start a match statement (compare a value against cases)
None --> Represents a null value
nonlocal--> To declare a non-local variable
not --> A logical operator
or --> A logical operator
pass --> A null statement, a statement that will do nothing
raise --> To raise an exception
return --> To exit a function and return a value
True --> Boolean value, result of comparison operations
try --> To make a try...except statement
while --> To create a while loop
with --> Used to simplify exception handling
yield -->To return a list of values from a generator

Identify Python Keywords

Ways to identify Keywords are:

With Syntax Highlighting: Most of IDEs provide syntax-highlight feature. You can see Keywords appearing in different color or style.
Look for SyntaxError: This error will encounter if you have used any keyword incorrectly. Keywords can not be used as identifiers like variable or a function name.

Keywords as Variable Names

If we attempt to use a keyword as a variable, Python will raise a SyntaxError.

Let's look at an example:

for = 10 
print(for)

Output :

Let's categorize all keywords based on context for a more clear understanding

** Keywords vs Identifiers**

Variables vs Keywords

Variables vs Identifiers in Python

They are related, but not the same.

In Python programming, data such as numbers, strings, and other values are stored in the computer’s main memory. To store this data, Python allocates sufficient memory using appropriate data types.

To process and access the data stored in memory, we must assign distinct names to these memory locations. These distinct names help us identify the stored values and are known as Identifiers.
During program execution, the values stored in these identifiers can change or vary. Because of this changing nature, identifiers are also called Variables.

👉 Hence, all types of literals must be stored in the form of variables.

In Python, every variable is treated as an Object, because Python follows an object-oriented programming model.

Definition of a Variable

A Variable is an identifier whose value can be changed during the execution of a program.

In any programming language, data processing is not possible without using variables (called objects in Python). Variables act as containers that store data and allow programs to manipulate it.

Reference :

w3schools.com

Python Keywords - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

geeksforgeeks.org

medium.com

React Router

vidhya murali — Wed, 29 Jul 2026 17:10:45 +0000

React Router

React Router is a library that provides routing capabilities for React applications.

Routing means handling navigation between different views.

React Router is the standard routing library for React applications. It enables you to:

Create multiple pages in your single-page application
Handle URL parameters and query strings
Manage browser history and navigation
Create nested routes and layouts
Implement protected routes for authentication

Without a router, your React application would be limited to a single page with no way to navigate between different views.

Install React Router

In the command line, navigate to your project directory and run the following command to install the package:

npm install react-router-dom

Wrap Your App with BrowserRouter

Your application must be wrapped with the BrowserRouter component to enable routing:

function App() {
  return (
    <BrowserRouter>
      {/* Your app content */}
    </BrowserRouter>
  );
}

To demonstrate routing,let me create three pages (or views) in our application: Home, About, and Contact:

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

Basic Routing

React Router uses three main components for basic routing:

Link: Creates navigation links that update the URL
Routes: A container for all your route definitions
Route: Defines a mapping between a URL path and a component
Let's add navigation links and routes for each link:

Example :

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation */}
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

In this example:

BrowserRouter wraps your app and enables routing functionality
Link components create navigation links
Routes and Route define your routing configuration

Nested Routes

You can have a Route inside another Route, this is called nested routes.

Nested routes allow you change parts of the page when you navigate to a new URL, while other parts is not changed or reloaded, almost like having a page within a page.

Let's use the example above, and add two new components that will be rendered inside the Products component.

One called CarProducts and one called BikeProducts:

Note that we also need to import the **Outlet **component from 'react-router-dom'.

import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function Products() {
  return (
    <div>
      <h1>Products Page</h1>
      <nav style={{ marginBottom: '20px' }}>
        <Link to="/products/car">Cars</Link> |{" "}
        <Link to="/products/bike">Bikes</Link>
      </nav> 
      <Outlet /> 
    </div>
  );
}

function CarProducts() {
  return (
    <div>
      <h2>Cars</h2>
      <ul>
        <li>Audi</li>
        <li>BMW</li>
        <li>Volvo</li>
      </ul>
    </div>
  );
}

function BikeProducts() {
  return (
    <div>
      <h2>Bikes</h2>
      <ul>
        <li>Yamaha</li>
        <li>Suzuki</li>
        <li>Honda</li>
      </ul>
    </div>
  );
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation */}
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/products">Products</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />}>
          <Route path="car" element={<CarProducts />} />
          <Route path="bike" element={<BikeProducts />} />
        </Route>
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Important notes about the example above:

Outlet:
The element in the Products component specifies where to render the child route's content.

Routes:
The Routes element contains the routes to CarProducts and BikeProducts as child routes of the Products parent route.

URL Structure:

The URL structure is relative to the parent route's path. For example:
When you navigate to '/products/car', the CarProducts component is rendered.
When you navigate to '/products/bike', the BikeProducts component is rendered.

Style Active Links [TBD]

There is a special version of the Link component called **NavLink **that knows whether the link's URL is "active" or not.

The NavLink is especially useful for:

Navigation menus
Breadcrumbs
Tabs

A NavLink is considered active if the current URL matches its to prop.

The NavLink component makes it easier to style active links.

Take the basic example from above, and add styles for active links using NavLink:

import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';

// Style function for active links
const navLinkStyles = ({ isActive }) => ({
  color: isActive ? '#007bff' : '#333',
  textDecoration: isActive ? 'none' : 'underline',
  fontWeight: isActive ? 'bold' : 'normal',
  padding: '5px 10px'
});

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation with NavLink for active styling */}
      <nav style={{ marginBottom: '20px' }}>
        <NavLink to="/" style={navLinkStyles}>Home</NavLink> |{" "}
        <NavLink to="/about" style={navLinkStyles}>About</NavLink> |{" "}
        <NavLink to="/contact" style={navLinkStyles}>Contact</NavLink>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

URL Parameters

URL parameters are variables that you can add to your route paths. They are often used to pass data between components.

In the path http://localhost:5173/customer/Tobias, the URL parameter is Tobias.

URL parameters let you create dynamic routes where part of the URL can change. Think of them as variables in your URL.

React Router provides the **useParams **hook to access these parameters in your components.

Here's a simple example with a greeting page that can say hello to different customers:

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function Info() {
  const { firstname } = useParams();
  return <h1>Hello, {firstname}!</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/customer/Emil">Emil</Link> | 
        <Link to="/customer/Tobias">Tobias</Link> |
        <Link to="/customer/Linus">Linus</Link>
      </nav>

      <Routes>
        <Route path="/customer/:firstname" element={<Info />} />
      </Routes>
    </BrowserRouter>
  );
}

In this example:

:firstname in the route path is the URL parameter
If you visit /customer/Emil, you'll see "Hello, Emil"
If you visit /customer/Tobias, you'll see "Hello, Tobias"
If you visit /customer/Linus, you'll see "Hello, Linus"
You can use any name in the URL, and the greeting will work!, try this http://localhost:5173/customer/John.

Happy Learning 😊

Github : https://shopping-time-react-e-commerce-shop.vercel.app/

Reference : https://www.w3schools.com/react/react_router.asp