DEV Community: Saravanan s

spring boot annotation

Saravanan s — Fri, 20 Mar 2026 10:13:35 +0000

Spring Boot uses annotations to reduce boilerplate code and make development faster. Instead of writing XML configuration, we use simple annotations to configure our application ..

Types of annotation

@SpringBootApplication
@RestController
@RequestMapping
@GetMapping
@PostMapping
@PutMapping
@DeleteMapping
@pathvariables

*@SpringBootApplication *

SpringBootApplication is the main annotation used to start a Spring Boot application.

@RestController

@RestController is used to create RESTful web services (APIs).

*@RequestMapping *

Maps HTTP requests to a class or method; used to define a base URL or endpoint

@GetMapping

Handles HTTP GET requests to retrieve data from the server.

@PostMapping

Handles HTTP POST requests to create new data on the server.

@PutMapping

Handles HTTP PUT requests to update existing data.

@DeleteMapping

Handles HTTP DELETE requests to remove data from the server

** @PathVariable**

Used to extract values from the URL and pass them as method parameters

Quick One-Line Summary

@SpringBootApplication → Start & configure app

@RestController → Create REST APIs

@RequestMapping → Define URL path

@GetMapping → Read data

@PostMapping → Create data

@PutMapping → Update data

@DeleteMapping → Delete data

@PathVariable → Get value from URL

Inheritance in Java

Saravanan s — Wed, 18 Feb 2026 07:38:01 +0000

Inheritance in Java

Inheritance is one of the most important features of Object-Oriented Programming (OOP) in Java. It allows one class to acquire the properties and behaviors of another class. This helps in code reuse, better organization, and easier maintenance.

What is Inheritance?

Inheritance is a mechanism where a child class (subclass) inherits variables and methods from a parent class (superclass).

Why Use Inheritance?

Inheritance provides many benefits:

Code Reusability – Write code once and use it multiple times

Method Overriding – Achieve runtime polymorphism

Improved Maintainability – Changes in parent class reflect in child class

class Parent {
    void show() {
        System.out.println("This is parent class");
    }
}

class Child extends Parent {
    void display() {
        System.out.println("This is child class");
    }
}

public class Main {
    public static void main(String[] args) {
        Child obj = new Child();
        obj.show();
        obj.display();
    }
}

output

This is parent class
This is child class

Features of Java

Saravanan s — Wed, 18 Feb 2026 06:48:21 +0000

Features of Java

Java is one of the most popular programming languages in the world. It is widely used for building web applications, mobile apps, desktop software, and enterprise systems. The main reason for Java’s popularity is its powerful and user-friendly features.

Simple

Java is easy to learn and understand. Its syntax is similar to C and C++, but it removes complex features like pointers and multiple inheritance, making it beginner-friendly.

Object-Oriented

Java follows Object-Oriented Programming (OOP) concepts such as:

Class

Object

Inheritance

Polymorphism

Encapsulation

Abstraction

This helps in creating reusable, secure, and well-structured programs.

Platform Independent

Java follows the principle “Write Once, Run Anywhere” (WORA).
Java programs are compiled into bytecode, which can run on any operating system (Windows, Linux, macOS) that has a Java Virtual Machine (JVM).

Secure

Java provides strong security features:

No use of pointers

Bytecode verification

Security manager

These features protect systems from viruses and unauthorized access.

Robust

Java is a robust language because:

It has strong memory management

Automatic garbage collection

Exception handling

These features help prevent crashes and errors during program execution.

Multithreaded

Java supports multithreading, which allows multiple tasks to run at the same time.
This improves application performance, especially in games, web servers, and real-time systems.

High Performance

Java uses Just-In-Time (JIT) Compiler, which improves execution speed by converting bytecode into machine code at runtime.

Distributed

Java supports distributed computing using technologies like RMI and web services, making it suitable for large-scale network applications.

Dynamic

Java is dynamic in nature. It can load classes at runtime and supports dynamic memory allocation, which makes applications flexible and scalable.

Portable

Java programs are portable because they are not tied to any specific hardware or operating system.

introduction of java

Saravanan s — Wed, 18 Feb 2026 05:42:53 +0000

Java is a high-level, object-oriented programming language that is widely used to build reliable, secure, and scalable software applications. It was developed by Sun Microsystems in 1995 and is now maintained by Oracle.

Java is used in many real-world applications such as:

Web applications

Mobile applications (especially Android apps)

Desktop applications

Enterprise-level systems

Banking and financial software

Because of its wide usage and strong community support, Java is one of the most in-demand programming languages and a great choice for beginners as well as experienced developers.

React Router

Saravanan s — Wed, 08 Oct 2025 07:10:25 +0000

what is 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:

react routre intallation

npm install react-router-dom

Components for Navigation

 <BrowserRouter>, <Routes>, <Route>, <Link>, and <NavLink> to enable navigation and define routing logic.

type of ract router

BrowserRouter: The BrowserRouter is the most commonly used router for modern React applications.

HashRouter: The HashRouter is useful when you want to use a URL hash (#) for routing, rather than the HTML5 history API.

MemoryRouter: The MemoryRouter is used in non-browser environments, such as in React Native or when running tests.

REACT ROUTER

* 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

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

Uses of React Router

Navigation and Routing
Dynamic Routing
URL Management
Component-Based Approach
Handling Nested Routes

Features of React Router

Declarative Routing
Nested Routes:
Programmatic Navigation
Route Parameters

mproved TypeScript Suppor

This is a react router in react the way of i understant the router in react

usecontext and what is prop drilling in react

Saravanan s — Fri, 03 Oct 2025 07:21:03 +0000

what is usecontex
the useContext hook in React provides a way to consume values from a React Context within functional components.
It is a powerful tool for sharing data across the component tree without the need for "prop drilling,"
where props are manually passed down through multiple levels of nested components.

Create a Context: First, you need to create a Context object using React.createContext(). This object will hold the data you want to share.


// MyContext.js
import React, { createContext } from 'react';

export const MyContext = createContext('default value'); 
// You can provide a default value here, which will be used if no Provider is found.

2. Provide the Context Value:

        Wrap the parent component (or the part of your component tree) that needs access to the context with MyContext.Provider. 
The value prop of the provider will be the data th3. Consume the Context Value:at child components can consume.

3. Consume the Context Value:
any child component (even deeply nested ones) that needs to access the context data,
import useContnext and the MyContext object. Then,
call useContext(MyContext) to retrieve the value.

what is prop drilling
the process in React and similar frameworks where data is passed down through multiple nested components
, even if those intermediate components don't need the data themselves
, to reach a deeply nested child component that does

how to use prop drilling
ass props down through intermediate components that don't need them, creating a direct line from a parent component to a deeply nested grandchild component that does need the data.

THIS IS THE MY UNDERSTAND OF THE USECONTEXT AND PROP DRILLING

Using Tailwind CSS with React.js

Saravanan s — Thu, 02 Oct 2025 16:46:33 +0000

what is tailwind
Tailwind CSS is a utility-first CSS framework that enables developers to quickly build modern and responsive user interfaces. When combined with React.js, a popular JavaScript library for building user interfaces, the two technologies synergize to streamline the development process. In this article, we'll explore how to integrate Tailwind CSS seamlessly into a React.js project.

Step 1: Create a React App

If you haven't already set up a React app, use the following commands to create one:

npx create-react-app my-tailwind-app
cd my-tailwind-app

Step 2: Install Tailwind CSS

Next, install Tailwind CSS and its dependencies usingnpm:

npm install tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

Create a tailwind.config.jsfile in the root of your project and configure it:

Import Tailwind CSS in your styles

Open the src/index.css file and import Tailwind CSS

src/index.css 
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Run your React App

Finally, start your React app to see the integration in action:

npm start

Visit http://localhost:5173in your browser, and you should see your React app with Tailwind CSS styles applied.

My Java Full Stack Journey Learning (Props Drilling) in React JS

Saravanan s — Wed, 01 Oct 2025 09:36:57 +0000

What is Props Drilling:

Props drilling happens when you need to pass data from a parent components to a deeply nested child component,but that child is not directly connect to the parent

the data is passed from a parent component to a child components using props

but you may need to pass data through many layers of components even if the middle components don't actually use the data .

This is baseic of props drillin and this is my understanding of props deilling

My Java Full Stack Journey Learning (Props) in React JS

Saravanan s — Wed, 01 Oct 2025 09:32:46 +0000

WHAT IS PROPS

Props are like arguments you pass to a function but there you pass them to a components .

they allows to send parent components to child components.

Props are read only - the child components cannot change.

why:
To reuse components with
different data
To make components dynamic instead of hardcoding values (change output based on input)

When:
when a child components needs data from its parents components
when you want to reuse a component with different data
when your ui should change dynamically based on inputs

MY JAVA FULL STACK My Java Full Stack Journey Learning (react installation)

Saravanan s — Wed, 01 Oct 2025 09:24:10 +0000

What is components in react.s?:
*Components is a resuable piece of UI like (button,card,navbar,form).
*Component is a building block of a React application.
*Components can be reused anywhere in the app.
*Two types of components functional and class components.
*Each components can handle its own logic,styling,and state.
*Javascript function or class that returns HTML like JSX

There are Types of Components:

Functional Components (it is morden version)
Class Components (older, less used now)

Functional Components example:
Is this function returns JSX

function message(){
retun(
<h1> Hi Lakshmi!..</h1>;
)

}

Class Components example:
Written as a JavaScript class.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Why do we use Components?:

Reuse code (write ones, use multiple times ).
Readable(code is easier to mange).
UI can be separated into smaller parts.
Composability small components combine in to

MY JAVA FULL STACK My Java Full Stack Journey Learning (react)

Saravanan s — Wed, 01 Oct 2025 09:03:15 +0000

what is react
React is a JavaScript library created by Facebook for building user interfaces. It helps developers build single-page applications (SPAs) where the page doesn’t reload but updates instantly when data changes.

Why React?
Reusable Components – Build once, use everywhere.

Fast Rendering – React uses a Virtual DOM to update only what’s needed.

Easy to Learn – Simple to pick up if you know HTML, CSS, and JavaScript.

Large Community – Lots of libraries, tutorials, and support.

Used by Big Companies – Facebook, Instagram, Netflix

**Use of React (with Example Code)

import React, { useState } from "react";

function Counter() {
  // useState hook to store the counter value
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: "center", marginTop: "20px" }}>
      <h1>React Counter App</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

Conclusion
React is one of the most popular libraries for front-end development.
It’s fast, flexible, and makes building interactive UIs much easier.

Closure, Fetch, and Axios in JavaScript

Saravanan s — Thu, 04 Sep 2025 17:13:59 +0000

what is axios
1 It is open source library for making the HTTP request to the server

2 It Handling the error better than the fetch()

3 It automatically transforming the request in to json formate.

Example

axios.get("https://fakestoreapi.com/products"")
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });

How to install the axios
In linux

CODE
*

        npm install axios

Fetch() function in ja
The fetch() API in JavaScript provides a modern and promise-based way to make network requests, such as fetching data from a server or submitting form data. It offers a more flexible and powerful alternative to the older XMLHttpRequest (XHR) method

Example

<script>
fetch("https://fakestoreapi.com/products")
.then((res)=> res.json())
.then(jsonresponse)=>console.log(jsonresponse)
.catch((rej)=>rej.json())
</script>

Fetch function arguments
The fetch() function takes one mandatory argument, the URL of the resource to fetch, and returns a Promise that resolves to a Response object.
JavaScript

Closure in js
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives a function access to its outer scope. In JavaScript, closures are created every time a function is created, at function creation

Example

<script>
function account(amount){
let balance = amount;
function deposite(amt){
balance=balance+amt;
console.log(balance);}

return deposite;
}
const deposit1 = account(1000);
deposit1.deposite(500);
</script>

And I also knowledge about the JSON function in js JSON-JavaScript Object Notation

What is JSON
JSON, or JavaScript Object Notation, is a lightweight data-interchange format that is widely used in web applications for storing and transmitting data between a server and a client