DEV Community: Rakshambika

Variable in Java

Rakshambika — Wed, 04 Nov 2026 14:12:05 +0000

What is a Variable?

A variable is a named memory location used to store a value.
That value can be changed during the program execution.

Syntax:

dataType variableName = value;

Ex:

int age=10;
String animal="Tiger";

Here , age and animal are variables that contains some value.

Types of Variables:

There are mainly three types of variables:

            - Local variable
            - Instance variable
            - Static variable

Local Variable:

Variable which is declared inside a method , constructor or block is called Local Variable.
You must initialize the value for local variable, before accessing it.
These local variables can be accessed within that block only.
Local Variables don't have Default values.

ex:

class Animal
{

public void Dog()
{
int age=5;   //Local Variable
String name="Puppy";  //Local Variable
System.out.println("Name of the Dog:"+name+"\nAge of the dog:"+age);
}

public static void main (String[] args)
{

   Animal a=new Animal();
   a.Dog();
}

}

Output:

Name of the Dog:Puppy
Age of the dog:5

Here, name and age are the local variables. We can't access the local variables outside the block. If we try to access the local variables outside the block the compiler throws a compilation error.

Instance Variable:

Variable which is declared inside a class outside methods, constructor or block is called Instance Variable.
Instance variables belongs to object.
Each object has it own copy.
Instance variables have default value if they are not explicitly initialized.
We can access the instance variables using objects.

Ex:

class Animal
{
  String name="Tiger";  //Instance Variable
  int age=13;  //Instance Variable 

public static void main (String[] args)
{

   Animal a=new Animal();
   System.out.println("Animal Name:"+a.name);
   System.out.println("Animal Age:"+a.age);

}

}

Output:

Animal Name:Tiger
Animal Age:13

Static Variable:

A variable declared inside a class using the static keyword is called a static variable.
Static variables belongs to class.
Only one copy of a static variable is created and shared among all objects of that class.
Static variables have default value if they are not explicitly initialized.
We can access the static variable using its class name.

Ex:

class Birds
{
static String name="Parrot";  //static variable
static String home="Trees";   // static variable

public static void printing()
{
System.out.println("Bird name:"+name+"\nBird's Home:"+home);
}

public static void main (String[] args)
{
   System.out.println(Birds.name);
   System.out.println(Birds.home);
   Birds.printing();
}
}

Output:

Parrot
Trees
Bird name:Parrot
Bird's Home:Trees

Datatypes in Python

Rakshambika — Fri, 30 Oct 2026 15:30:00 +0000

Data types in Python define the type of value stored in a variable and determine the operations that can be performed on that data.

Numeric:

It is used to store Numeric values.
There are three numeric types in python

          *int
          *float
          *complex

Int:

-int is used to store positive , negative numbers without decimals.

Ex:

number1=15;
number2=500;
print(f"Value:{number1} Type:{type(number1)}");
print(f"Value:{number2} Type:{type(number2)}");

Output:

Value:15 Type:<class 'int'>
Value:500 Type:<class 'int'>

Float:

Float is used to store the positive or negative values with decimals.

Ex:

num1=100.256;
num2=-78.23;


print(f"Value:{num1} Type:{type(num1)}");
print(f"Value:{num2} Type:{type(num2)}");

Output:

Value:100.256 Type:<class 'float'>
Value:-78.23 Type:<class 'float'>

Complex:

Complex is used to store the value with imaginary digits.

Ex:

num=3j+1;
print(f"Value:{num} , Type:{type(num)} ");

Output:

Value:(1+3j) , Type:<class 'complex'>

Boolean:

Booleans represent one of two values: True or False.

Ex:

num1=0;
num2=1;

print(num1>num2);
print(10==10);
print(type(10=="10"));
print(3!=4);

Output:

false
True
<class 'bool'>
True

Truthy Values:

String with any values, without empty string.
Any number is true except 0 (zero).
Any list, tuple, set, and dictionary are True, except empty ones.

Falsy values:

Empty String , Set , Tuple , Dictionary.
number 0
None

Sequence Datatype:

A sequence is an ordered collection of items, which can be of similar or different data types. Elements in a sequence can be accessed using indexing.

Types:

String
List
Tuple

String:

String is used to store single or set of Characters.
String is created by single, double or triple quotes.

Ex:

name="Raksha";
bird='Parrot';
fruit="""Apple""";

print(f"Value:{name} , Type:{type(name)} ");
print(f"Value:{bird} , Type:{type(bird)} ");
print(f"Value:{fruit} , Type:{type(fruit)} ");

Output:

Value:Raksha , Type:<class 'str'>
Value:Parrot , Type:<class 'str'>
Value:Apple , Type:<class 'str'>

List:

Lists are used to store multiple items in a single variable.
Lists are created using square brackets[] .
Lists allow duplicates.
Lists are mutable.

Ex:

list_items=[10,20,"Raksha" ,10 , "Honey Bee" , 2.36 , 10];

print(list_items);
print(list_items[2]);
print(type(list_items));

Output:

[10, 20, 'Raksha', 10, 'Honey Bee', 2.36, 10]
Raksha
<class 'list'>

Tuple:

Tuple is used to store multiple items in a single variable.
Tuple is ordered.
Tuple is immutable.
Tuples are written with round bracket().

Ex:

tuple_item=("Hello" , "Byee" , 1 , "Hii");
print(tuple_item);
print(tuple_item[1]);
print(type(tuple_item));

Output:

('Hello', 'Byee', 1, 'Hii')
Byee
<class 'tuple'>

Dictionary:

Dictionaries are used to store data values in key:value pairs.
Dictionary is mutable.
Dictionary does not allow Duplicates.
Dictionary items are ordered.

Ex:

dict_items={
'name':"Cat",
'place':"Chennai",
'age':3
}

print(dict_items);
print(type(dict_items));

Output:

{'name': 'Cat', 'place': 'Chennai', 'age': 3}
<class 'dict'>

Python

Rakshambika — Thu, 29 Oct 2026 03:30:00 +0000

What is Python?

Python is a high-level, open-source, interpreted, general-purpose programming language created by Guido van Rossum.
It is known for its simple syntax, readability, and ease of learning. Python allows developers to write programs using fewer lines of code compared with many other programming languages.

Example:

print("Welcome, User!!!")

Output:

Welcome, User!!!

History of Python:

1989 - Development began - Guido van Rossum began developing Python during the Christmas holidays while working at CWI in the Netherlands.

1991 - First public release - Python's first publicly available version, Python 0.9.0, was released.

1994 - Python 1.0 - Python 1.0 was released with features such as functions, exception handling, and core data types.

2000 - Python 2.0 - Introduced features including list comprehensions and a garbage collector.

2008 - Python 3.0 - Introduced major language improvements. Python 3 is the modern version family used for current development.

Today - Widely used programming language - Python is popular in web development, automation, data science, artificial intelligence, and machine learning.

Why do we need Python?

Python is used because it makes programming easier and helps developers build different types of applications efficiently.

Major uses of Python

Web development - Python can be used to develop websites and backend applications using frameworks such as Django and Flask.
Artificial Intelligence and Machine Learning - Python is widely used to build AI applications, chatbots, prediction systems, and machine learning models.
Data science and analysis - Libraries such as Pandas, NumPy, and Matplotlib help analyze data and create visualizations.
** Automation** - Python can automate repetitive tasks, process files, rename folders, and generate reports.
Game and application development - Python can be used to create simple games, desktop applications, and prototypes.

Advantages of Python:

Easy to learn: Its syntax is simple and readable.
Less code: Many tasks can be completed with fewer lines of code.
Free and open-source: Anyone can download and use Python.
Cross-platform: Python programs can run on Windows, Linux, and macOS, subject to compatible dependencies.

Disadvantages of Python

Slower execution: Python is generally slower than compiled languages such as C and C++ for CPU-intensive tasks.
Higher memory usage: It can consume more memory than some lower-level languages.
Not ideal for every mobile application: Native languages and frameworks are often preferred for mobile app development.
Runtime errors: Some errors are detected only when the relevant code executes.
Dynamic typing risks: Incorrect data types can cause errors if they are not handled carefully.

Java

Rakshambika — Fri, 23 Oct 2026 16:40:11 +0000

Java is a high-level , object-oriented , general-purpose programming language and computing platform released by Sun Microsystems (now owned by Oracle) in 1995.

Who Created Java?

Java was created by James Gosling along with his team at Sun Microsystems (which was later acquired by Oracle Corporation in 2010). The project originally started in 1991 under the name "Green Project" and was initially named Oak before being renamed Java.

Why do we need Java?

Platform Independent:

Java is a platform Independent Language.
Java uses the "Write Once, Run Anywhere" (WORA).
Code compiled on a Windows machine generates bytecode that can run seamlessly on Mac, Linux, or Unix without any changes, as long as the device has a Java Virtual Machine (JVM).

Object-Oriented Programming (OOP):

Java organizes software design around data, or "objects," rather than functions and logic.
This makes large codebases easier to modularize, scale, and maintain.

Automatic Memory Management:

Unlike older languages like C or C++, Java automatically manages memory using a built-in Garbage Collector, which automatically deletes unused files and objects to prevent memory leaks.

Where is Java Used?

Enterprise Applications:

The backbone of major corporate backend networks, including global banking software, insurance platforms, and e-commerce giants.

Android Development:

The foundational language used to build native applications for the Android operating system.

Big Data Utilities:

The core language powering large-scale data processing systems like Apache Hadoop and Apache Spark.

Cloud Infrastructure:

Extensively used to run scalable, cloud-native microservices.

useReducer Hook in React

Rakshambika — Tue, 13 Oct 2026 14:57:12 +0000

What is useReducer?

useReducer is a built-in React Hook used to manage state in a component.
It is an alternative to the useState Hook and is especially useful when the state logic becomes complex or when multiple actions need to update the same state.
Instead of directly updating the state, useReducer uses a reducer function to determine how the state should change based on an action.

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

Here:

state – The current state value.
dispatch – A function used to send an action to the reducer.
reducer – A function that determines the next state.
initialState – The initial value of the state.

How Does useReducer Work?

The useReducer Hook follows a simple flow:

The component starts with an initial state.
An event occurs, such as clicking a button.
The dispatch function sends an action.
The reducer function receives the current state and action.
The reducer returns the new state.
React updates the component with the new state.

Example: Counter Using useReducer

import { useReducer } from "react"; 

const initialState = { count: 0 }; 

function reducer(state, action) 
{ 
switch (action.type)
 { 
case "increment": 
return { count: state.count + 1 }; 
case "decrement": 
return { count: state.count - 1 }; 
case "reset": return initialState; 
default: return state; 
}
 }

 function App() { 
const [state, dispatch] = useReducer( reducer, initialState ); 
return
 ( 
<div> 
<h2>Count: {state.count}</h2> 
<button 
onClick={() => dispatch({ type: "increment" })} > Increment </button> <button 
onClick={() => dispatch({ type: "decrement" })} > Decrement </button> <button 
onClick={() => dispatch({ type: "reset" })} > Reset </button> 
</div> 
);
} 

export default App;

function reducer(state, action) – The reducer function receives the current state and an action to decide how the state should change.
case "increment" – Increases the current count by one and returns the updated state.
case "decrement" – Decreases the current count by one and returns the updated state.
case "reset" – Resets the counter to its initial value, zero.
default: return state; – If the action type doesn't match any case, the current state remains unchanged.
const [state, dispatch] = useReducer(reducer, initialState); – Initializes the reducer and provides the current state (state) and the dispatch function used to send actions.

React Router DOM in React

Rakshambika — Fri, 09 Oct 2026 15:53:04 +0000

React Router DOM:

React Router DOM is a library used in React applications to navigate between different pages or views without reloading the entire webpage.
In a traditional website, clicking a link may load a completely new HTML page from the server. In a React single-page application (SPA), React Router DOM allows us to display different components based on the URL.

For example, an e-commerce website may contain:

/ — Home page
/products — Products page
/cart — Cart page
/login — Login page

React Router DOM helps us connect these URLs to their corresponding React components.

Why do we need React Router DOM?

React itself does not provide built-in routing for navigating between different URL paths.

Without a routing library, we would need to manage URL changes and which components to display ourselves.

React Router DOM makes this process easier by providing features such as:

Navigation: Move between pages without a full-page reload.
Routing: Display specific components based on the URL.
Dynamic routes: Pass values through URLs, such as /users/10.
Nested routes: Display child pages inside a parent layout.
Programmatic navigation: Navigate to another route using code.
Route parameters: Access dynamic values from the URL.

How to install React Router DOM?

Install React Router DOM:

npm install react-router-dom

React Router DOM components:

BrowserRouter:

BrowserRouter enables client-side routing using the browser's URL and History API.
It usually wraps the main application so that routing features are available throughout the component tree.

Routes:

Routes groups the route definitions in your application. It selects the best matching route for the current URL.

Route:

Route connects a URL path to the component that should be rendered.

For example:

<Route path="/about" element={<About />} />

When the URL matches /about, the About component is displayed.

Link:

Link is used to navigate between routes without triggering a full-page reload.

<Link to="/about">About</Link>

useNavigate:

useNavigate is a hook that allows us to navigate programmatically, such as after a successful login.

useParams:

useParams is a hook used to access dynamic route parameters.

For example, for /users/10, it can return the value "10" for the id parameter.

Tailwind CSS

Rakshambika — Thu, 08 Oct 2026 16:25:13 +0000

When building websites, CSS is used to style HTML elements. Traditionally, we create CSS classes and write styles inside a separate CSS file.

Tailwind CSS takes a different approach. It provides small, reusable utility classes that we can directly use in our HTML or JSX to style elements.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework.

Instead of writing custom CSS like:

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

We can use Tailwind utility classes:

<button className="bg-blue-500 text-white px-5 py-2 rounded-lg">
  Click Me
</button>

Each class performs a specific styling task.

For example:

bg-blue-500 → background color
text-white → text color
px-5 → horizontal padding
py-2 → vertical padding
rounded-lg → border radius

Why Do We Need Tailwind CSS?

Writing CSS for every component can become time-consuming, especially in large applications.

Tailwind helps us build interfaces faster because we can apply styles directly using predefined utility classes.

Without Tailwind

<button className="my-button">
  Login
</button>
.my-button {
  background-color: black;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
}

With Tailwind

<button className="bg-black text-white px-5 py-2 rounded-lg">
  Login
</button>

We don't need to create a separate CSS class for this button.

Responsive Design

One of the useful features of Tailwind is its responsive design system.
We can apply different styles at different screen sizes.

For example:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

This means:

grid-cols-1 → one column by default
md:grid-cols-2 → two columns on medium screens
lg:grid-cols-4 → four columns on large screens

So the same component can automatically adapt to different screen sizes.

Advantages of Tailwind CSS

1. Faster Development

We can style elements directly without creating many custom CSS classes.

2. Responsive Design

Tailwind provides responsive utility classes that make it easier to build mobile-friendly websites.

3. Consistent Design

Tailwind provides predefined spacing, colors, font sizes, and other design utilities.

4. Works Well with React

Since styles can be written directly in JSX using className, Tailwind is convenient for React applications.

5. Less Custom CSS

For many components, we can build the UI without writing separate CSS rules.

useContext Hook in React

Rakshambika — Tue, 06 Oct 2026 16:30:38 +0000

What is usecontext?

The useContext Hook is used to access data from a React Context without passing props manually through multiple levels of components.
It helps solve the problem of prop drilling, where data needs to be passed from a parent component to deeply nested child components through intermediate components.

Why use useContext?

Imagine an application where user information, theme settings, or language preferences are needed by many components.

Without useContext, you would pass these values through props at every level.

With useContext, any component can directly access the shared data from the Context.

Syntax:

import { useContext } from "react";

const value = useContext(MyContext);

Steps to Use useContext

1. Create a Context

import { createContext } from "react";

const UserContext = createContext();

2. Provide the Context Value

import { UserContext } from "./UserContext";

function App() {
  return (
    <UserContext.Provider value="Raksha">
      <Dashboard />
    </UserContext.Provider>
  );
}

3. Consume the Context Using useContext

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Profile() {
  const user = useContext(UserContext);

  return <h1>Welcome, {user}</h1>;
}

How It Works

createContext() creates a Context object.
The Provider component shares data with its child components.
useContext() reads the value from the nearest Provider.
Any component inside the Provider can access the shared data directly.

Real-World Use Cases

User authentication information
Theme switching (Dark Mode / Light Mode)
Language settings
Shopping cart data
Application-wide settings

useRef in React

Rakshambika — Mon, 05 Oct 2026 14:30:00 +0000

What is useRef?

useRef is a React Hook that allows us to create a mutable reference that persists across component re-renders.
Unlike useState, updating a useRef value does not cause the component to re-render.

Syntax

const refName = useRef(initialValue);

Importing useRef

import { useRef } from "react";

Why Do We Use useRef?

The useRef Hook is mainly used for:

Accessing and manipulating DOM elements directly.
Storing values that should persist between renders.
Keeping track of previous values.
Managing timers and intervals.

Example 1: Accessing an Input Element

import React, { useRef } from "react";

function App() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

export default App;

How it Works

useRef() creates a reference object.
The reference is attached to the input using the ref attribute.
inputRef.current points to the actual DOM element.
Calling focus() places the cursor inside the input box.

Example 2: Storing a Value Without Re-rendering

import React, { useRef } from "react";

function Counter() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current++;
    console.log(countRef.current);
  };

  return (
    <button onClick={increment}>
      Increment
    </button>
  );
}

Explanation

The value is stored in countRef.current.
Updating it does not trigger a component re-render.
Useful when a value needs to be remembered but doesn't need to be displayed on the screen.

useEffect in React

Rakshambika — Fri, 02 Oct 2026 14:30:00 +0000

What is useEffect?

useEffect is a React Hook that runs code after a component renders.

Some common use cases are:

Fetching data from an API
Updating the document title
Working with localStorage
Setting up timers
Adding event listeners

Syntax

import { useEffect } from "react";

useEffect(() => {
  // Code
}, []);

The first argument is a function containing the code we want to execute.
The second argument is called the dependency array.

useEffect with an Empty Dependency Array

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("Component with Empty Dependency Array");
  }, []);

  return <h1>Hello React</h1>;
}

Output

Component with Empty Dependency Array

This effect runs only once when the component is first rendered.

useEffect with Dependencies

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Count Changed");
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Whenever count changes, the effect runs again.

Output

Count Changed

This is useful when we want to perform an action whenever a specific state value changes.

useEffect Without Dependency Array

useEffect(() => {
  console.log("Runs After Every Render");
});

Since there is no dependency array, the effect runs after every render.

Be careful when using this because unnecessary executions can affect performance.

Local Storage in JavaScript

Rakshambika — Wed, 30 Sep 2026 16:34:17 +0000

What is Local Storage?

Local Storage is a web storage feature provided by browsers that allows websites to store data directly in the user's browser. The stored data remains available even after the browser is closed and reopened.
It is commonly used to save user preferences, theme settings, shopping cart data, form inputs, and tasks in applications such as To-Do Lists.

Why Do We Need Local Storage?

Normally, JavaScript variables lose their values when a page is refreshed or the browser is closed.

Local Storage helps us preserve data so that it remains available even after refreshing or reopening the browser.

Features of Local Storage

Stores data as key-value pairs.
Data persists even after the browser is closed.
Data is stored in the user's browser.
No expiration time.
Easy to use with JavaScript.
Supported by all modern browsers.

Local Storage Methods

1. setItem()

Used to store data.

localStorage.setItem("name", "Raksha");

Here:

"name" is the key.
"Raksha" is the value.

2. getItem()

Used to retrieve stored data.

const name = localStorage.getItem("name");
console.log(name);

Output:

Raksha

3. removeItem()

Used to remove a specific item.

localStorage.removeItem("name");

The key "name" and its value will be deleted.

4. clear()

Used to remove all data from Local Storage.

localStorage.clear();

This deletes every item stored by the website.

Limitations of Local Storage

Stores only strings.
Limited storage capacity (usually around 5–10 MB).
Not suitable for sensitive information such as passwords.
Data is accessible through browser developer tools.

Props in React

Rakshambika — Tue, 29 Sep 2026 17:13:50 +0000

Props (short for Properties) are one of the most important concepts in React. They allow us to pass data from a parent component to a child component, making components reusable and dynamic.

What are Props?

Props are read-only values passed to a component. They work similarly to function arguments in JavaScript.
Just as we pass values to a function, we can pass data to a React component using props.

Example

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

function App() {
  return <Welcome name="Raksha" />;
}

Output

Hello, Raksha

In the above example:

App is the parent component.
Welcome is the child component.
The value "Raksha" is passed as a prop named name.
The child component receives it through the props object.

Why Do We Use Props?

Reuse components with different data.
Pass information from parent to child components.
Make applications more dynamic and maintainable.
Avoid duplicating code.

Example

function Student(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.course}</p>
    </div>
  );
}

function App() {
  return (
    <>
      <Student name="Raksha" course="Java Full Stack" />
      <Student name="Ranjan" course="React" />
    </>
  );
}

The same component is reused with different data.