DEV Community: Dharshini E

Java Architecture

Dharshini E — Thu, 16 Oct 2025 06:50:16 +0000

What is Java Architecture?
Java architecture explains how a Java program runs — starting from source code to the final output.
It mainly involves three components: JDK (Java Development Kit), JRE (Java Runtime Environment), and JVM (Java Virtual Machine).
When we write Java code, the compiler converts it into bytecode, which is platform independent.
This bytecode is then executed by the JVM, which converts it into machine code for the specific operating system.
This is what makes Java platform-independent and portable.

What is JDK?
The Java Development Kit (JDK) is the complete software package used by developers to create, compile, and run Java programs. It includes all necessary tools such as the compiler (javac), debugger, and other utilities, along with the Java Runtime Environment (JRE).

What is JRE?
The Java Runtime Environment (JRE) provides the environment required to run Java applications. It contains the Java Virtual Machine (JVM), core class libraries, and other files that support program execution. In other words, the JRE does not help in developing programs but only in running them.

what is JVM?
The Java Virtual Machine (JVM) is the core part of Java architecture responsible for executing Java bytecode. It converts platform-independent bytecode into machine-specific code so the program can run on any operating system. The JVM also manages memory allocation, garbage collection, and provides security and exception handling. Together, the JDK, JRE, and JVM form the foundation of Java’s “write once, run anywhere” capability, making Java a truly platform-independent programming language.

JDK → Platform dependent (used for development).
JRE → Platform independent (used for running programs).
JVM → Platform independent at the bytecode level (executes Java code across all systems).

Types of Error in Java

Dharshini E — Tue, 14 Oct 2025 07:25:22 +0000

Types of Error in Java:

Syntax Errors (Compile-Time Errors)
Runtime Errors (Exceptions and Errors)
Logical Errors

1.Syntax Errors (Compile-Time Errors):

Compile Time Errors are those errors which prevent the code from running because of an incorrect syntax such as a** missing semicolon** at the end of a statement or a missing bracket, class not found, etc. These errors are detected by the java compiler and an error message is displayed on the screen while compiling. Compile Time Errors are sometimes also referred to as Syntax errors .

2.Runtime Errors (Exceptions and Errors):

Run Time errors occur or are detected during the execution of the program. Sometimes these are discovered when the user enters an invalid data or data which is not relevant .
During compilation, the compiler has no technique to detect these kinds of errors. It is the JVM (Java Virtual Machine) that detects it while the program is running. To handle the error during the run time we can put our error code inside the try block **and catch the error inside the **catch block .

3.Logical Error:

A logic error is when your program compiles and executes , but does the wrong thing or returns an incorrect result or no output when it should be returning an output. These errors are detected neither by the compiler nor by JVM.

Java

Dharshini E — Mon, 13 Oct 2025 10:04:37 +0000

1.What is Java ?

Java is a high-level, object-oriented, and platform-independent programming language. It’s widely used for developing web, mobile, and enterprise applications.
because it’s reliable, secure, and runs on any platform without modification. It also has a strong community support and is used in many real-world applications, including Android development. Learning Java helps me build a strong foundation in object-oriented concepts and prepares me for many software roles.

1.Why do you prefer Java over other languages?

Java is more stable and has strong memory management and security features compared to many other languages. It’s also in high demand in the industry, and the syntax is clean and beginner-friendly.

2.Where is Java used?

Java is used in Android app development, enterprise systems, banking software, and backend web applications using frameworks like Spring and Hibernate.

3.What is the main feature of Java?

Its main feature is platform independence — we can write code once and run it anywhere using the Java Virtual Machine (JVM).

Arrays

Dharshini E — Fri, 10 Oct 2025 02:09:07 +0000

What is Array ?
Array is a fundamental data structure that is a collection of elements stored in a single variable.
Each element in an array is assigned a unique index, typically starting from zero, which allows for direct and efficient access to any element using its index.
Why should we go for Arrays?
Without arrays, we would need separate variables for each value, which is messy and inefficient.
they make it easier to store, organize, and process large amounts of data efficiently instead of handling multiple variables separately.
what is Array in java?
An array is a container object that holds a fixed number of values of a single type. The length of an array is established when the array is created. After creation, its length is fixed.
Syntax:

Declaration of an Array: int[] arr; int arr[];
Memory Allocation (Creating an Array) After declaration, we must allocate memory using new: arr = new int[5]; // creates an array of size 5
Declaration + Allocation in One Line: int[] arr = new int[5];
Declaration + Initialization: If you already know the values, you can initialize directly: int[] arr = {10, 20, 30, 40, 50}; Why System.out.println(numbers); doesn’t print all values?

In Java, numbers is an array reference variable, not the actual values.
When you just print numbers, Java prints the memory reference (address in heap) in a default format.
That’s why you see something like:
[I@5ca881b5 //output
[ → means it’s an array
I → means it’s an array of int
@5ca881b5 → hashcode (memory reference)
Java is object-oriented at its core. An array is just another object, and printing an object without overriding toString() will never show the internal data automatically.

React Qustion and Answaer

Dharshini E — Mon, 06 Oct 2025 04:19:56 +0000

1)What is the difference between a functional component and a class component in React?

In React, both functional components and class components are used to build user interfaces, but they differ in how they are written and how they handle state and lifecycle methods.
A functional component is simply a JavaScript function that returns JSX, and with the introduction of hooks like useState and useEffect, it can now handle state and side effects in a clean and concise way.
A class component is created using ES6 classes **and **extends React. Component, where state is managed using this.state and updated with this.setState(). Class components also rely on built-in lifecycle methods such as componentDidMount and componentWillUnmount.
Functional components are generally shorter, easier to read, and are the modern standard in React development, while class components are more verbose and are mostly found in older codebases.

2)How does JSX work internally? Why do we need it instead of plain JavaScript?

JavaScript XML, is a syntax extension used in React that allows developers to write HTML-like code inside JavaScript. Internally, JSX is not understood by browsers; instead, it gets compiled by tools like Babel into plain JavaScript function calls such as React.createElement().
For example, writing
Hello
in JSX is converted into React.createElement("h1", null, "Hello"), which produces a React element that the Virtual DOM can use to update the UI efficiently.
We use JSX because it makes the code more readable, declarative, and closer to HTML, which is familiar to most web developers. Without JSX, we would have to manually call React.createElement() for every element, which becomes harder to maintain in large applications. Thus, JSX acts as a developer-friendly layer that simplifies UI building while still compiling down to efficient JavaScript.
3)Explain props vs state with an example.
In React, props and state are both used to manage data, but they serve different purposes.
Props (short for properties) are used to pass data from a parent component to a child component. They are read-only, which means a child component cannot modify the props it receives—it can only display or use them.
State, on the other hand, is data that is managed within a component itself. Unlike props, state is mutable and can change over time, usually in response to user actions.
Example:

function Counter(props) {
  const [count, setCount] = useState(props.initialValue);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Here, initialValue is passed as a prop from the parent, while count is managed as state inside the component.

4)You have a counter that should increase by 2 each time a button is clicked. Why does the following not work? How would you fix it?

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

const handleClick = () => {
  setCount(count => count + 1);
  setCount(count => + 1);
};

5)What is the difference between useRef and useState? When would you choose one over the other?
useState is used when you want React to re-render the UI whenever the value changes. useRef is used to store values that persist between renders but don’t trigger re-renders, and it’s also handy for directly accessing DOM elements. I’d use useState for things like counters shown on screen, and useRef for things like input focus, timers, or values I don’t want to cause a re-render.

6)How can you use useRef to focus an input field when a button is clicked?
The useRef hook allows you to get a reference to a DOM element **in functional components. You can then **call methods on that element, like .focus().
You can use useRef to get a reference to the input element, and then call .focus() on it inside a function that runs on button click. This allows the input field to gain focus programmatically without causing a re-render.

7)Does changing the value of a useRef variable cause re-render? Why?

useRef returns a mutable ref object with a .current property.
React does not track changes to .current for rendering purposes.
Updating ref.current does not tell React to re-render the component because refs are meant to store values that persist across renders without affecting the UI. No, changing a useRef value does not cause re-render because React does not track the .current property for UI updates. It’s mainly used to store persistent values or references to DOM elements without affecting rendering.

8)How would you use useRef to store the previous render’s value of a state?
You can use useRef to store the previous value of a state by updating the ref inside a useEffect that runs after each render. The ref persists across renders without triggering a re-render, so it effectively lets you track the previous state value.

React - Hook

Dharshini E — Wed, 01 Oct 2025 09:25:07 +0000

what is Hook?
Hooks are special functions in React that let you “hook into” React features like state and lifecycle methods—without writing a class.
Before React 16.8, if you wanted to manage state or handle lifecycle events, you had to use class components. Hooks changed that by giving functional components the same powers.

Why Were Hooks Introduced?

Hooks solve several problems that developers faced with class components:

Complexity – Class components often became messy when dealing with multiple states and lifecycle methods.
Code Reuse – Sharing stateful logic between components was hard. Developers had to rely on patterns like higher-order components (HOCs) or render props.
Readability – Class components required this keyword, which confused many beginners.
With hooks, React made state management and side effects easier and more intuitive.

Built-in Hooks:
React provides several built-in Hooks for common use cases:

useState()
useEffort()
useRef()
useContext()
useReducer()
useMemo()
useCallback()

React-json

Dharshini E — Wed, 01 Oct 2025 09:06:39 +0000

what is json ?

JSON stands for JavaScript Object Notation.
JSON is a plain text format for storing and transporting data.
JSON is similar to the syntax for creating JavaScript objects.
JSON is used to send, receive and store data. Example: {"name":"Dharshini", "age":21, "car":null} why json ?

JSON is used because it's a lightweight, human-readable, and language-independent data format ideal for exchanging structured data between servers and web/mobile applications, as well as for configuration files and storing data in NoSQL databases.

syntax:
JSON syntax is derived from JavaScript object notation syntax:

Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays

Tailwind - CSS style

Dharshini E — Fri, 19 Sep 2025 04:39:58 +0000

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to style elements directly in their HTML using small, reusable classes. Instead of relying on pre-built UI components, Tailwind provides utility classes such as text-center, p-4, m-2, and bg-blue-500, which can be combined to build completely custom user interfaces. This approach speeds up development and reduces the need for switching between HTML and CSS files.

Why Choose Tailwind Over Other Frameworks?

Flexibility and Customization
Tailwind does not lock you into predefined styles. Developers can create unique and modern UIs without overriding default styles, unlike Bootstrap where many sites often look similar.
Faster Development
Utility classes make it easy to prototype and build responsive designs directly in HTML.
Consistency
Since spacing, typography, and colors are controlled through a centralized configuration, projects stay consistent.
Optimized Performance
Tailwind automatically removes unused CSS in production, resulting in smaller file sizes and faster load times.
Responsive and Mobile-First
Tailwind comes with built-in responsive utilities (sm:, md:, lg:) that make mobile-friendly development seamless.
Popular CSS Frameworks
Bootstrap → Most popular, comes with ready-made UI components.
Bulma → Flexbox-based, simple and modern.
Foundation → Responsive and accessible, developed by Zurb.
Materialize → Based on Google’s Material Design.
UIKit → Lightweight, modular framework.

React - Components and props

Dharshini E — Fri, 19 Sep 2025 04:27:48 +0000

Components :

In react , components is a reusable and independent piece of UI .
Think of its like a function or building block that return html with javascript logic.
Components make your code modular , reusable and easy to maintain.
Types of components :
functional components
class components

Example:

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


function App() {
  return (
    <div>
      <Welcome name="Dharshini" />
      <Welcome name="Ramya" />
      <Welcome name="Arun" />
    </div>
  );
}

Props:

props stands for properties.
they are like function parameters in javascript
props are used to pass data from parent componts to child component.
props are read-only .child can not modify them.

Example:

function Child(props) {
  return <h2>My favorite color is {props.color}</h2>;
}

function Parent() {
  return <Child color="Blue" />;
}

React - XML , JSX & Babel

Dharshini E — Mon, 15 Sep 2025 01:41:41 +0000

What is XML?

XML - extensionble Markup Laguage.
its a Markup Laguage like HTML but it mainly used for store and transport the data but not it display.
it ueses custom tags but you define insead of using fixed tags like <p> ,<h1> in html .
it is both human readable and mechine readable.

Example:

<student>
<name>dharshini</name>
<age>21</age>
</student>

what is JSX?

JSX - Javascript XML.
JSX is a syntax extension for javascript used in react.
it allow you to write HTML like code in react.
JSX let us to write UI code but look like HTML which easy to read but browser doesnot understand ,a tool called babel it translate into normal javascript that browser can run.

Different b/w javascript and javascript XML:
Javascript is a main programming language but jsx is syntax extension let us write UI code like HTML in react . JSX was introduced because write UI code in plain javascript is diffuclt and messy so jsx made it easier ,more readable and developer-friendly .jsx get complied to plain javascript using babel.
what is babel?

Babel is a javascript complier or transpiler.
it is used to convert mordern javascript into plain javascript ** that all **browser can **understand.
**
Browser doesnot understand the jsx or some modern javascript features like let ,const,arrow function ext...
Babel translate that code into an older version of javascript so it works every where.

React Introduction

Dharshini E — Sat, 13 Sep 2025 03:42:11 +0000

What is react ?

React is a javascript library used to build the UI(user interfaces) especially single-page applications(SPAs)
where content updates dynamically without reloading the page.
React focuses only on the ** view layer** (UI rending) and makes it easy to build reusable,component-based UIs.
React follows a component-based architecture, meaning the UI is divided into ** small, reusable pieces** called components.
It uses a Virtual DOM (Document Object Model) for faster rendering and better performance.
React is declarative, meaning you describe what you want the UI to look like, and React updates the** real DOM** for you.

*Why React? *

Reusable Components
Write once, reuse anywhere → saves time and effort.
Virtual DOM = Faster Performance
React only updates the parts of the page that change, not the entire page.
Component-Based Architecture
Easier to develop, maintain, and scale large applications.
Strong Community & Ecosystem
Backed by Facebook and has a huge developer community, with many libraries/tools.
Cross-Platform Development
With React Native, you can build mobile apps using the same React concepts.
SEO Friendly
React supports server-side rendering, which helps in better search engine optimization.
Easy to Learn for JavaScript Developers
If you know JavaScript + ES6, you can quickly pick up React.

Difference between Library and frameworks:
Library:
library is a set of read-made function **that I can call when I **need them, so I control the flow **.
**frameworks:
A framework already has a structure and controls the flow of the application — I just follow its rules.

Javascript-fetch()

Dharshini E — Sat, 13 Sep 2025 03:27:23 +0000

What is fetch()?

fetch() is used to request data from a server (GET, POST, etc.).

It returns a Promise that resolves to a Response object.
example:

let response = fetch("https://jsonplaceholder.typicode.com/posts");
console.log(response); // Promise { <pending> }

Why Promise with fetch()?

Because fetching data from a server takes time (network delay).

Promise allows JS to continue running other code until the response arrives.

Example with .then() handling:

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())  // Convert response to JSON
  .then(data => console.log(data))    // Handle the data
  .catch(error => console.log("Error:", error));

Common Use Cases

Fetching user data from APIs.
Sending form data to a server.
Handling errors (like 404 or network failure).