DEV Community: mohandass

Constructor Method in Java

mohandass — Wed, 08 Jul 2026 18:26:32 +0000

A constructor in Java is a special block of code—similar to a method—that is automatically called when an instance (object) of a class is created. Its primary purpose is to initialize the state or attributes of the newly created object.

Rule For Creating Constructor

The constructor name must match the class name precisely.
No Return Type It cannot have a return type, not even void.
It is implicitly triggered by the new keyword during instantiation.

Types of Constructor

1. Default (No-Argument) Constructor:

If you do not write any constructor in your class, the Java compiler automatically inserts an implicit no-argument default constructor.
It sets primitive variables to their defaults (e.g., 0, false) and object references to null. You can also write your own explicit no-arg constructor.

public static void main(String[] args)
{

Car model = new Car();{
System.out.println("No-Argument Constructor")
}

2.Parameterized Constructor

This type accepts arguments, allowing you to assign unique, custom values to an object's properties right at the moment of creation.

public Car(String name,int price,String color)
{

this.name = name;
this.price = price;
this.color = color;
}

3. Constructor Overloading

Java allows you to define multiple constructors in single class provided they have different parameters lists(we can use different number of parameters and different data types)
The compiler detects which one to run based on the values passed.

Overall Example


public class Car{

String name;
int price;
String color;

public Car(){

System.out.println("No-Argument Constructor");

}


public static void main(String[] args)
{

    //Explicit No-Argument Constructor
Car model = new Car();


    // Parameterized Constructor
Car model1 = new Car("Tata punch" , 500000,"gray");
Car model2 = new Car("Tata Nexon", 700000,"white");


   //Overloaded constructor
Car model3 = new Car("Tata Safari",1300000,"red");


System.out.println("CarName :" + model1.name);
System.out.println("Price :" + model1.price);
System.out.println("Color :" + model1.color);

System.out.println("CarName :" + model2.name);
System.out.println("Price :" + model2.price);
System.out.println("Color :" + model2.color);

System.out.println("CarName :" + model3.name);
System.out.println("Price :" + model3.price);
System.out.println("Color :" + model3.color);
}
public Car(String name,int price,String color)
{

this.name = name;
this.price = price;
this.color = color;
}

}

OUTPUT :

REFERENCE :

https://www.geeksforgeeks.org/java/constructor-overloading-java/

Rule for Creating a class And Data Types In java

mohandass — Wed, 08 Jul 2026 15:33:33 +0000

Rule for Creating Class

Using Class keyword to create a class.

public class Home
{


}

Give the meaningful name in class.
Class name started with uppercase.
No special characters not allow except ( _ )underscore and ($) dollor symbol.
No space allowed inbetween class name.

Data Types

Java classifies data types into two distinct groups: primitive data types which store basic values directly, and non-primitive data types which reference complex objects and structures.

Primitive Data Types

The 8 primitive data types:

Java features eight built-in primitive data types designed for high-performance memory management.

1. Numeric Integer Types (Whole Numbers)

byte: 1 byte (8 bits).Store whole numbers from - 128 to 127.
short:2 bytes (16 bits). Stores whole numbers from -32,768 to 32,767.
int: 4 bytes (32 bits). Standard choice for integers (-2 billion to 2 billion).
long: 8 bytes (64 bits). Used for huge numbers.

2. Numeric (Floating-Point)

float: 4 bytes (32 bits). Single-precision. Useful for saving memory in massive decimal arrays.
double: 8 bytes (64 bits). Double-precision. The standard default for fractional math in Java.

3. Non-Numeric

char: 2 bytes (16 bits). Stores a single Unicode character or ASCII value. Enclosed in single quotes.
boolean: 1 bit (informational size). Stores only true or false values. Primarily handles conditional logic.

Static Variable

A static variable (also known as a class variable) is a variable that belongs to the class itself rather than to any specific instance (object) of that class. When you declare a variable as static, only one single copy of that variable is created in memory and shared among all instances.
Every object of the class references the exact same memory location. If one object changes the value, it changes for all others.
Memory is allocated only once in the Metaspace (Class Area) when the Java Virtual Machine (JVM) loads the class.

public class Car{

static String name = "Tata Punch";
 static int price = 500000;

 public static void main(String[] args) {


System.out.println(Car.name);
System.out.println(Car.price);


}

}

OUTPUT

why java is Important

mohandass — Fri, 26 Jun 2026 09:05:37 +0000

Java is important because it is the one of the most widely used programing language in the world
Platform Independent- java follow the principle "Write Once,Run Anywhere"(WORA). Programs written in java can run any device that as the java virtual machine(JVM).
Used To Many Application
Web application
Android App development
Enterprise Software
Banking System
Cloud and big data applications
Object Oriented - java used object oriented programing (OOP),Which makes code easier to organize,reuse,and maintain.
Secure - java provides build-in security features making is suitable for application that handle sensitive data.
High Demand in Industry - Many companies rely on java creating numerous job opportunities for Java developers.
Large Community and Support – Java has a huge developer community, extensive documentation, and many libraries and frameworks.
Reliable and Scalable – Large organizations such as Oracle Corporation, Amazon, and Netflix use Java for building large-scale applications.

Why Learn Java for Back-End?

Java is one of the most popular back-end languages because it is:

Fast and reliable
Secure
Object-oriented
Used by many large companies
Excellent for building scalable web applications and REST APIs

A common Java back-end learning path is:

Core Java
Object-Oriented Programming (OOP)
Collections
Exception Handling
Multithreading
JDBC
SQL (MySQL or PostgreSQL)
Spring Framework
Spring Boot
REST APIs
Projects (such as an online shopping app or a student management system)

What is back-end

The back-end is the part of the website or application that works behind the scenes.It handles the business logic,stores data, and communicates with the front-end

How back-end works

User
  │

Front-End (HTML, CSS, JavaScript, React)
  │

Back-End (Java, Python, Node.js, PHP, etc.)
  │

Database (MySQL, PostgreSQL, MongoDB, Oracle)

Java-object oriented programming language(OOP)

mohandass — Thu, 25 Jun 2026 08:25:31 +0000

What is object oriented programming

Object-Oriented Programming (OOP) is a software design model that organizes code around "objects" rather than logic or functions.
It groups related data (attributes) and behaviors (methods) into single, reusable units, making it ideal for managing large, complex, and collaborative software projects.

The Main Pillars of OOP

Class - A blueprint or template for creating objects.
Object - An instance of a class.
Encapsulation - protects data from direct access
Abstraction - Hides unnecessary details
Polymorphism -Allow the same method to behave differently
Inheritance - Reuses code from exciting classes

Class

Classes are user-defined data types and serve as the template for individual objects, properties, and actions.
A Class in Java is a blueprint or template used to create objects. It defines the properties (data) and behaviors (methods) that objects of that class will have.
A class is a user-defined data type.
It contains variables (fields) and methods.
Multiple objects can be created from a single class.

Example: A Car represents a class (blueprint), while BMW, Mercedes, and Audi represent objects (instances) created from that class.

Objects

Objects are instances of a class created with specifically defined data. Objects can correspond to real-world objects or an abstract entity. When class is defined initially, the description is the only object that is defined.
- An actual instance of a class that exists in the computer's memory (e.g., your specific red sports car).

Inheritance

Inheritance is a core OOP concept in Java that allows one class to acquire the fields and methods of another class using the extends keyword. It represents an “is-a” relationship between classes.
An object of one class acting as an object of another class
Encapsulation - (TBD)
Abstraction - (TBD)
Polymorphism - (TBD)

REFERENCE :
https://www.techtarget.com/searchapparchitecture/definition/object-oriented-programming-OOP

https://www.geeksforgeeks.org/dsa/introduction-of-object-oriented-programming/

The Major Errors In Simple Java Code

mohandass — Wed, 24 Jun 2026 08:17:54 +0000

Error 1 :

Java keywords are case-sensitive. The keyword public must be written in lowercase.

If you use Public with a capital P, you'll get an error similar to:

Error 2 :

code is missing a semicolon (;) at the end of the System.out.println() statement.

In Java, most statements must end with a semicolon (;).

Error 3 :

The code has a syntax error in the System.out.println() statement.

You used a comma (,) instead of a dot (.).

Error 4 :

The Class should be lowercase. Java keywords are case-sensitive.This means Java treats Class and class as completely different words.
class - Java keyword used to define a class.
Class - Not a Java keyword. Java thinks it's the name of a type or object.

Error 5 :

The code is missing the opening curly brace { after the class declaration.

After declaring a class, Java expects a class body enclosed in braces
Without the {, the compiler doesn't know where the class begins
Every opening brace { must have a matching closing brace }.

useMemo

mohandass — Wed, 10 Jun 2026 08:41:01 +0000

useMemo is a React build-in Hook that optimizes performance by caching (memorizing) the calculated result of a function between component re-renders instead of running a piece of logic on every single render React reuse the cached value useless its specific dependencies change.

Syntax :

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

The first argument is a function that returns the computed value.
The second argument is an array of dependencies. When any of these dependencies change, the function gets re-evaluated.

PROGRAM

import { useState, useMemo } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [arr, setArr] = useState([7, 8, 9, 10])

  const showMax = useMemo(() => {

    return(Math.max(...arr))
  }, [arr])

  function addMax() {
    setArr([...arr,count + 5])
    console.log(arr);

  }
  return (
    <div>
      <h3>Count = {count}</h3>
      <button onClick={() => setCount(count + 1)}>Add</button>
      <button onClick={addMax}>Add New</button>
      <h5> Max Value = {showMax} </h5>

    </div>
  )
}

export default App

OUTPUT

useRef in React

mohandass — Mon, 01 Jun 2026 17:34:48 +0000

useRef is a build-in React Hook that returns a mutable object whose.current property persists across re-renders without triggering a component re-render when modified.It acts an "escape hatch" to store the data outside of React's standard visual render cycle.

Syntax :

import { useRef } from "react";

const ref = useRef(initialValue);

{
  current: initialValue
}

This returns a plain JavaScript object structured exactly like { current: initialValue }.
Manipulating the DOM you can directly link a ref object to an HTML node using the ref attribute. This is commonly used for managing focus, text selection, or triggering media play/pause mechanics.
Storing Mutable Variables It lets you hold variables that shouldn't reset when components re-render.
Caching Previous Props/State It allows you to preserve the historical value of state or props from the prior render cycle to run delta comparisons.

Rule

Do not read or write ref.current during rendering. Doing so makes your component impure because render operations must stay deterministic.
Only interact with refs inside event handlers or useEffect. You should update or evaluate refs within events or post-render side effects.

React Scenario Questions(useContext & useNavigate )

mohandass — Fri, 29 May 2026 05:49:46 +0000

1. 1. Login Scenario: User enters name in Login page and goes to Dashboard page. Username should be visible in Dashboard. Which hook stores the username and which hook navigates to Dashboard?

PROGRAM:

App.jsx

import { Routes, Route } from "react-router-dom"
import { createContext, useState } from "react"
import Login from "./Login"
import Dashboard from "./Dashboard"

export const nameContext = createContext()

function App() {

  const [name, setName] = useState("")

  return (
    <nameContext.Provider value={{ name, setName }}>

      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>

    </nameContext.Provider>
  )
}

export default App

Login.jsx

import { useContext } from "react"
import { useNavigate } from "react-router-dom"
import { nameContext } from "./App"

function Login() {

  const { name, setName } = useContext(nameContext)

  const navigate = useNavigate()

  function LoginPage() {
    navigate("/dashboard")
  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={LoginPage}>
        Login
      </button>

    </div>
  )
}

export default Login

Dashboard.jsx

import { useContext } from "react"
import { nameContext } from "./App"

function Dashboard() {

  const { name } = useContext(nameContext)

  return (
    <div>

      <h1>Dashboard</h1>

      <h2>Welcome {name}</h2>

    </div>
  )
}

export default Dashboard

OUTPUT :

2. Logout Scenario: User clicks Logout in Dashboard and should go back to Login page. Login data should be cleared. Which hooks will you use?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>
      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>


        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />

        </Routes>

      </BrowserRouter>
      </nameContext.Provider>

    </div>
  )
}

export default App

Login.jsx

import React, { useContext, useEffect } from 'react'
import { nameContext } from './App'
import { useNavigate } from 'react-router-dom'

function Login() {

  const { setName } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogin() {

    navigate("/dashboard")

  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type='text'
        placeholder='enter name'
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
       Login
      </button>



    </div>
  )
}

export default Login

Dashboard.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { nameContext } from './App'

const Dashboard = () => {

  const { name } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogout() {

    navigate("/")

  }

   function handleNext() {

    navigate("/profile")

  }

  return (
    <div>

      <h1>Welcome {name}</h1>

      <button onClick={handleLogout}>
        Logout  
      </button>

    </div>
  )
}

export default Dashboard

OUTPUT :

3. Name Sharing Scenario: User enters name in Home page and Profile page shows the same name. How will you share the data between pages?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>

      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>
        <Link to={"/profile"}>Profile</Link>

        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>

      </BrowserRouter>
      </nameContext.Provider>

    </div>
  )
}

export default App

Login.jsx

import React, { useContext, useEffect } from 'react'
import { nameContext } from './App'
import { useNavigate } from 'react-router-dom'

function Login() {

  const { setName } = useContext(nameContext)

  const navigate = useNavigate()

//   useEffect(() => {

//     console.log("Component Rendered")

//   }, [])

  function handleLogin() {

    navigate("/dashboard")

  }

  return (
    <div>

      <h1>Login Page</h1>

      <input
        type='text'
        placeholder='enter name'
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
       Login
      </button>



    </div>
  )
}

export default Login

Dashboard.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { nameContext } from './App'

const Dashboard = () => {

  const { name } = useContext(nameContext)

  const navigate = useNavigate()

  function handleLogout() {

    navigate("/")

  }

   function handleNext() {

    navigate("/profile")

  }

  return (
    <div>

      <h1>Welcome {name}</h1>

      <button onClick={handleLogout}>
        Logout  
      </button>
      <button onClick={handleNext}>Go To Profile</button>

    </div>
  )
}

export default Dashboard

Profile.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'

import { nameContext } from './App'

function Profile() {
    const { name } = useContext(nameContext)
    const navigate = useNavigate()

    function handelBack(){
        navigate('/')
    }
  return (

    <div>
        <h1>{name} Profile</h1>

        </div>
  )
}
export default Profile

OUTPUT :

4. Button Navigation Scenario: User clicks Next button in Home page and About page should open. Which hook will you use?

PROGRAM:

App.jsx

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"

function App() {

  return (

    <Routes>

      <Route path="/" element={<Home />} />

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

    </Routes>

  )
}

export default App

Home.jsx

import { useNavigate } from "react-router-dom"

function Home() {

  const navigate = useNavigate()

  function NextPage() {

    navigate("/about")

  }

  return (

    <div>

      <h1>Home Page</h1>

      <button onClick={NextPage}>
        Next
      </button>

    </div>

  )
}

export default Home

About.jsx



function About() {

  return (

    <div>

      <h1>About Page</h1>

    </div>

  )
}

export default About

OUTPUT :

5. Back Navigation Scenario: User moves from Home page to Details page and clicks Back button to return Home. How will you implement navigation?

PROGRAM:

App.jsx

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
import Login from './Login'
import Dashboard from './Dashboard'
import { createContext, useState } from 'react'
import Profile from './Profile'
export const nameContext = createContext()
function App() {
  const [name, setName] = useState("")
  return (
    <div>

      <nameContext.Provider value={{ name, setName }}>
       <BrowserRouter>

        <Link to={"/"}>Login</Link>
        <Link to={"/dashboard"}>Dashboard</Link>
        <Link to={"/profile"}>Profile</Link>

        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>

      </BrowserRouter>
      </nameContext.Provider>
      {/* <Login /> */}
    </div>
  )
}

export default App

Profile.jsx

import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'

import { nameContext } from './App'

function Profile() {
    const { name } = useContext(nameContext)
    const navigate = useNavigate()

    function handelBack(){
        navigate('/')
    }
  return (

    <div>
        <h1>{name} Profile</h1>
       <button onClick={handelBack}>Back</button>
        </div>
  )
}
export default Profile

OUTPUT :

BrowserRouter

mohandass — Wed, 27 May 2026 19:40:33 +0000

A BrowserRouter is the built-in context provider component from the `react-router-dom library that enables client-side routing web application.It acts as the orchestration engine for your app's navigation, allowing the user interface to sync seamlessly with the browser's address bar without triggering a full page refresh.
BrowserRouter utilizes the native HTML5 History API (pushState, replaceState, and the popstate event) to dynamically manipulate the URL path. When a user triggers a route change:
If the React is not supported for BrowserRouter.So open the Terminal and use this comment npm install react-router-dom
Router (): This acts as the parent container that wraps your entire application. It monitors changes in the browser's address bar using the HTML5 History API.
Routes (): This works as a central switchboard container. It scans through all defined child options to find the single closest path match for the active URL.
Route (): This defines an individual path mapping. It accepts a path property (the target URL string) and an element property (the exact component layout to render).

Example:

Can we use the Link only using inside the BrowserRouter

useNavigate()

The useNavigate hook in react-router-dom returns a function that allows you to change routes programmatically inside your React components. It is primarily used for imperative navigation, meaning you change the URL in response to specific code logic or events (like form submissions, button clicks, or authentication status changes) rather than relying on a static link.
To use it, import it from react-router-dom and initialize it inside your functional component

Example:

Reference:https://www.geeksforgeeks.org/reactjs/browserrouter-in-react/

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

React Hooks

mohandass — Mon, 18 May 2026 16:43:15 +0000

React hooks are function that allow you to "hook into" React state And lifecycle from function components. Introduced React 16.8,they Eliminated the need for complex class components for most use cases,Making code more readable and reusable.

Most Frequently Used Hooks

useState
useEffect
useContext
useRef
useMemo
useCallback
useReducer

1. useState

useState is hooks in React used to create and manage state inside functional components.State means data that can change over time.

Common Data Types in used to useState()

String - useState("")
Number - useState(0)
Boolean - useState(false)
Array - useState([])
Object - useState({})

What is real DOM ?

The real DOM(Document Object Model ) is the actual structural representation of a webpage provided by the browser. It organized the HTML into a tree of object, allowing programing language like javaScript to dynamically read,style and alter the page's content,structure,and attributes.
Every changes made the Real DOM directly translates to visual updates on the user's screen.
The Heavy process in Real DOM. Modifying the Real DOM is relatively slow and resource heavy.Because the browser recalculate the CSS style, page layouts,and repaint the screen with every tiny changes updating it frequently can cause performance lag in complex with web application.

What is virtual DOM ?

The virtual DOM(VDOM) is a lightweight, in memory representation of the Real Document Object Model (DOM) used by React to optimized UI rendering.Instead of directly updating the slow browser DOM for every change,the system update the VDOM,compares it to a previous snapshot(diffing) and only update the necessary changes to the Real DOM.

How it's Works

Render: When data changes, the entire UI is re-rendered in the Virtual DOM representation.
Diffing: The framework compares the new VDOM with a snapshot of the old VDOM taken just before the update.
Update: The framework calculates the minimal set of changes needed and applies only those changes to the real DOM.
Lightweight Representation: It is a JavaScript object tree that represents what the user interface should look like, making it fast to create and manipulate in memory.

What is Components in React

mohandass — Thu, 14 May 2026 16:30:47 +0000

1. What is Components in React ?

A react, Components are the independent and reusable building block Used to create user interfaces(UI). They Function similarly to JavaScript functions but operate in isolation To return JSX (JavaScript XML), which describes what should appear on The screen. You build small parts Separately then combine them to create a full website or app.

Examples:

Button
Navbar
Card
Footer
Product Box
Login From

Each of these can be a separate React component.

Simple Example
Normal HTML like:
<button>welcome!</button>

React Component

function Button() {
  return <button>Welcome!</button>;
}

export default Button;

-Button is the component name
-Component names must start with CAPITAL letters
-Component must return one parent element
-It's return UI using JSX
-You can reuse it anywhere

Types of Components

There are two primary ways to define a components in React

Functional Component (Most Common)
Class Component (Old Method)

2. What is React Folder Structure ?

A React folder structure is they way files and folders are organized inside the React project.

If you create a project using Vite

npm create vite@latest

You'll get somethings like this :

Important Folders & Files

1. node_modules/

Contains:

Installed packages
React library
Dependencies

Example:

-React
-React DOM
-Vite packages

If you Never edit this folder manually.

2. public/

Stores static files:

Images
Fonts
Videos
Icons

3. src/ (Most Important)

This is where most contains React code is written.

Usually contains :

Components
Hooks
pages
CSS
API calls

4. assets/

It's stores projects assets.

Images
Icons
Videos

5. styles

CSS files.

Navbar.css
home.css
globle.css

6. App.jsx

Main component.

function App() {
  return <h1>Hello React</h1>;
}

export default App;

This is control application UI.

7. main.jsx

Entry point of the app.

8. index.html

Main HTML file.

<div id="root"></div>

React renders insides this root div.

8. package.json

Project information and dependencies.

contains:

Scripts
Packages
Versions

What is React.js

mohandass — Wed, 13 May 2026 16:50:36 +0000

1. What is React j.s
React is a free and open source JavaScript library. It's used for Building user interfaces(UIs) specifically for single-page Applications(SPA). Created by Facebook(now meta) in 2013,it's allows Developers create large web application that can change data without Reloading the page.

React helps developers create:

Websites
Single Page Applications (SPA)
Dashboards
E-commerce apps
Social media apps
Mobile apps (with React Native)

Why React was Created

React was created to solve problems developers faced while building larger and dynamic web applications.

Before React, developers updated HTML manually using JavaScript.

Example:
document.getElementById("title").innerHTML = "welcome";

When the application become larger:

Code became messy
Updating UI became difficult
Performance issues happened

React solving this by introducing :

Components,Virtual DOM,State management,Reusable UI

2. What is the different between library and Framework ?

The primary difference between a library and a framework is Inversion of Control(IOC) in short, When you use a library, your are the in charge; When you use a framework, the framework is in charge.

Use a library when:

You need flexibility
Small project
Specific feature only
Want custom architecture

Use a framework when:

Building large applications
Need standard structure
Team collaboration
Faster large-scale development

Simple Concept

Library = Helper-(It helps your code)

Framework = Foundation-(Your app runs inside it)

3. What is Build Tool

A build tool is a software utility that automates the process of converting source code.which typically includes JSX, modern JavaScript (ES6+), and CSS—into a optimized, production-ready format that web browsers can understand

Why Build Tools Are Needed

Modern web applications use:

Multiple files
React components
TypeScript
SCSS
Images
APIs
Modules

Browsers cannot directly understand everything.

For example:

-Browsers do not understand JSX directly
-Browsers do not understand TypeScript directly

Build tools convert them into normal JavaScript, HTML, and CSS.

Common Examples by Language

Java - Apache Maven, Gradle
JavaScript - npm,webpack,vite
C/C++ - Make, CMake
Python - Poetry, pip

4. What is vite

Vite (pronounced “veet”) is a modern frontend build tool used to create fast web applications.It offers instant server startup and lightning-fast Hot Module Replacement (HMR), making it a popular replacement for tools like Create React App.

Why Vite Was Created

Older build tools like:

Webpack

became slow for large applications.

Problems:

-Slow startup
-Slow rebuilds
-Slow hot reload

Vite was created to solve these speed problems.

Vite helps developers:

-Start projects quickly
-Run development servers
-Bundle files
-Optimize applications