DEV Community: P Mukila

Java Core Concepts...

P Mukila — Thu, 31 Jul 2025 13:04:00 +0000

1.Class

A class is a user-defined blueprint or prototype from which objects are created. It contains fields (variables) and methods to define the behavior of objects.

Why:
Classes provide a structured way to group related data and behavior. It promotes reusability and modularity in code.

class Car {
    String color;
    void drive() {
        System.out.println("Car is driving");
    }
}

2.Global and Local Variables

Global Variable (Instance Variable): Declared inside the class but outside any method. Accessible to all methods of the class.

Local Variable: Declared inside a method or block. Limited scope to that block.

Why:

Global variables maintain object state.

Local variables support temporary operations.

class Test {
    int globalVar = 10;
    void show() {
        int localVar = 5;
        System.out.println(globalVar + localVar);
    }
}

3.Data Types

Specify the type of data a variable can hold.

Primitive: byte, short, int, long, float, double, char, boolean.

Non-Primitive: String, Array, Class, Interface.

Why:
To define memory size and the type of operation allowed on the data.

int age = 25;
float weight = 68.5f;
char grade = 'A';
boolean isValid = true;

4.Package

A package is a namespace that organizes a set of related classes and interfaces.

Why:
Avoids name conflicts and helps manage classes efficiently.

package mypackage;
import java.util.Scanner;

5.Object
An object is an instance of a class.

Why: To access the fields and methods defined in the class.

Car myCar = new Car();
myCar.drive();

6.Constructor
A special method that initializes objects. It has the same name as the class and no return type.

Why: To set initial values for object fields.

class Bike {
    Bike() {
        System.out.println("Bike created");
    }
}

7.Constructor Chaining

Calling one constructor from another in the same class using this() or from superclass using super().

Why: Reuse code and ensure consistent initialization.

class Car {
    Car() {
        this(100);
        System.out.println("Default constructor");
    }
    Car(int speed) {
        System.out.println("Speed: " + speed);
    }
}

8.Inheritance
Mechanism where a new class acquires the properties and behaviors of a parent class using extends.

Why: Code reuse and hierarchical classification.

class Animal {
    void eat() {
        System.out.println("Eating...");
    }
}
class Dog extends Animal {
    void bark() {
        System.out.println("Barking...");
    }
}

9.Abstraction

Hiding implementation details and showing only the functionality.

Why: Increases code security and reduces complexity.
Using abstract class or interface.

abstract class Shape {
    abstract void draw();
}

10.Polymorphism
Ability of an object to take many forms. Two types: compile-time (method overloading) and run-time (method overriding).

Why: Flexibility and dynamic behavior.

class Animal {
    void sound() {
        System.out.println("Animal sound");
    }
}
class Dog extends Animal {
    void sound() {
        System.out.println("Dog barks");
    }
}

11.Encapsulation
Binding data (variables) and methods into a single unit (class).

Why: Protects data from outside interference and supports data hiding.

class Person {
    private int age;
    public void setAge(int a) { age = a; }
    public int getAge() { return age; }
}

12.Interface

A reference type in Java, similar to a class, that can contain only abstract methods (Java 8+ allows default/static methods).

Why: To achieve full abstraction and multiple inheritance.

interface Animal {
    void eat();
}
class Dog implements Animal {
    public void eat() {
        System.out.println("Dog eats");
    }
}

13.this vs super

this: Refers to the current class object.

super: Refers to the immediate parent class object.

Why: Resolve naming conflicts, call parent class methods or constructors.

class A {
    int x = 10;
}
class B extends A {
    int x = 20;
    void display() {
        System.out.println(this.x);  // 20
        System.out.println(super.x); // 10
    }
}

14.this() vs super()

this(): Calls a constructor in the same class.

super(): Calls a constructor in the parent class.

Why: Constructor reuse and initialization.

class Parent {
    Parent() {
        System.out.println("Parent constructor");
    }
}
class Child extends Parent {
    Child() {
        super();
        System.out.println("Child constructor");
    }
}

15.final Keyword

Used to make a variable constant, prevent method overriding, or inheritance.

Why: Enforce immutability and restriction.

final int x = 100; // can't be changed
final void show() {} // can't be overridden
final class A {} // can't be extended

16.static vs non-static

static: Belongs to class, not object. Shared across all instances.

non-static: Belongs to individual objects.

Why: To share common data or methods.


class Demo {
    static int count = 0;
    int id;
    Demo(int id) {
        this.id = id;
        count++;
    }
}

Introduction to Java

P Mukila — Thu, 10 Jul 2025 17:49:21 +0000

Java

Java is a popular programming language.
Java is used to develop mobile apps, web apps, desktop apps, games and much more.

Features of Java:

Platform Independence

Simple and Familiar

Multithreading

High Performance

Portable

Object Oriented

Robust and Secure

Dynamic

Distributed

Platform Independence:

Java is bytecode can be executed on any platform with the appropriate JVM.

Object Oriented:

Java follows the object-oriented programming paredigm, encapsulation, ingeritance,and polymarphism.

Simple:

Java is syntax is inspired by C++ and C ,making it familiar to may programmers.

Robust and Secure:

Java has feature like memory management, strong type checking, and
exception handling to ensure robust and secure programs.

Multithreading:

Java supports multithreading, allowing multiple tasks to be executed concurrently.

Dynamic:

Java supports dynamic memory allocation and garbage collection, simplifying memory management.

High Performance:

While java programs might not be as fast as compiled languages like C++, javas performance has improved over time,thanks to JVM optimizations.

Distributed:

Java "write once,run anywhere"capability makes it highly portable.

Architecture of Java:

Compiler: Compiler can convert java code to byte code (.java file to .class file) with help of Java development kit(JDK). It translate entire code of the program.

Interpreter: In Java, an interpreter is a program that executes Java bytecode instructions line by line. It's a key component of the Java Virtual Machine (JVM).

JavaScript String Methods

P Mukila — Thu, 03 Jul 2025 18:49:05 +0000

Javascript strings are primitive and immutable: All string methods produce a new string without altering the original string.

Converting to Upper and Lower Case

A string is converted to upper case with toUpperCase():

A string is converted to lower case with toLowerCase():

toUpperCase():

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Methods</h1>
<p>Convert string to upper case:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo">Hello World!</p>

<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.toUpperCase();
}
</script>

</body>
</html>

toLowerCase():

string to Lowercase
   <h1>String Lowercase</h1> 
   <p>Convert string to lower case:</p>
   <button onclick="myFunction()">Try it</button>
   <p id="demo">Hello World</p>
   <script>
   function myFunction(){
   let text = document.getElementById("demo").innerHTML;
   document.getElementById("demo").innerHTML =          text.toLowerCase();
     }

JavaScript String concat():

concat() joins two or more strings

<h1>String concat</h1>
<p>concat() joins two or more strings:</p>
<p id="click"></p>
<script>
    let text1 = "Hello";
    let text2 = "World!";
    let text3 = text1.concat(" ",text2);
    document.getElementById("click").innerHTML = text3;


</script>

JavaScript String trimStart():

The trimStart() method works like trim(), but removes whitespace only from the start of a string.

<h1>Trimstart javascript</h1>
<p>The trimStart() method works like trim(), but removes whitespace only from the start of a string.
</p>
<p id="change"></p>
<script>
    let text1 = "     Hello    World"
    let text2 = text1.trimStart();
    document.getElementById("change").innerText = 

    "Length.text1 = " + text1.length + "<br>Length.text2 = " + text2.length;

</script>

JavaScript String trimEnd()

The trimEnd() method works like trim(), but removes whitespace only from the end of a string.

<h1> trimend javascript</h1>
<p>The trimEnd() method works like trim(), but removes whitespace only from the end of a string.</p>
<p id="change"></p>
<script>
    let text1 = "     Hello World             ";
    let text2 = text1.trimEnd();
    document.getElementById("change").innerHTML = 
    "Length.text1 = "+ text1.length + "<br>length.text2 = " + text2.length; 
 </script>

JavaScript String padStart():

The padStart() method pads a string from the start.

It pads a string with another string (multiple times) until it reaches a given length.

<h1>string padstart</h1>
    <p>The padStart() method pads a string from the start.</p>
    <p id="change"></p>
<script>
    let element = "6";
    element = element.padStart(4,"0");
    document.getElementById("change").innerHTML =  element;

</script>

JavaScript String padEnd():

The padEnd() method pads a string from the end.

It pads a string with another string (multiple times) until it reaches a given length.

<h1>String padend</h1>
<p>It pads a string with another string (multiple times) until it reaches a given length.</p>
<p id="click"></p>
<script>

    let text = "5";
    text = text.padEnd(4,"0");
    document.getElementById("click").innerHTML = text;
</script>

Today new thing learn from Linux Commands...

P Mukila — Wed, 02 Jul 2025 17:32:22 +0000

Today, my classmates presented a PPT on Linux commands. It was very useful, and we learned a lot from the session. Our teaching style was clear and effective.

They covered many important Linux topics, and our teacher also explained them during the session. For me, there were some commands I didn’t know before, so I kept watching closely to understand better. I already knew a few commands, but I learned even more today.

They gave examples and explained topics like:

Files & Directory Management:


• - ls: List files and directories
• - cd: Change directory
• - pwd: Show current directory path
• - mkdir: Create directory
• - rmdir: Remove empty directory
• - touch: Create empty file
• - cp: Copy files/directories
• - mv: Move/rename files
• - rm: Remove files/directories

Viewing & Editing Files:

• - cat: View file content
• - less/more: Paginate file output
• - head: Show first 10 lines
• - tail: Show last 10 lines (tail -f for live logs)
• - nano/vim: Terminal-based text editors

File Permissions:


• - chmod: Change file permissions

• - chown: Change file ownership
• - ls -l: Detailed file info including permissions

Searching Files:


• - find: Locate files (find . -name "file.txt")
• - grep: Search inside files (grep "text" filename)
• - locate: Fast file searching

Process Management:


• - ps: List running processes
• - top/htop: Monitor processes and resources
• - kill: Terminate process by PID
• - killall: Kill processes by name

Networking:


• - ping: Test network connectivity
• - curl: Access URLs/APIs
• - wget: Download files
• - netstat: Network connections info
• - ssh: Remote server access

Disk & Space Management:


• - df -h: Show disk usage
• - du -sh: Show directory size

Package Management(Ubuntu/Debian):


• - apt update: Update package lists
• - apt upgrade: Upgrade packages
• - apt install: Install new packages
• - apt remove: Remove packages
• - tar -czf: Compress files to .tar.gz
• - tar -xzf: Extract .tar.gz files
• - zip/unzip: Handle .zip files

Version Control (Git Basics):


• - git init: Initialize repo
• - git clone: Clone repository
• - git add: Stage changes
• - git commit: Commit changes
• - git push/pull: Push/Pull code
• - git status: Repo status
• - git log: Commit history

Miscellaneous Useful Commands:


• - echo: Print text
• - history: Show previous commands
• - clear: Clear terminal
• - alias: Set command shortcuts

It was a very informative presentation, and it helped deepen my understanding of Linux commands.

Today i Learned - fetch, async & await, axios...

P Mukila — Tue, 01 Jul 2025 18:14:17 +0000

fetch
The fetch() API in JavaScript provides a modern and flexible interface for making network requests, primarily designed to replace the older XMLHttpRequest. It allows you to fetch resources like JSON data, HTML, images, and more from a server.

Basic Syntax

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // Do something with the data
  })
  .catch(error => {
    // Handle any errors
  });

Parameters

url: The URL to which the request is sent.
options (optional): An object that allows you to configure the request (method, headers, body, etc.).

Key Points

fetch returns a Promise.
It won’t reject on HTTP errors like 404 or 500 — you have to check response.ok.

Example:

function getWeather() {
             const apiKey = "2a50fd8aa879e6af857307fdc1a16bc6";
             const url = `http://api.openweathermap.org/data/2.5/      weather?q=${city}&appid=${apiKey}&units=metric`;

             fetch(url)
                 .then((res) => {
                    return res.json();
                 }).then((data) => {
                     console.log(data.main.feels_like);
                  result.innerHTML = `Temperature : ${data.main.temp}`
              }).catch((error) => {
                  console.log(error);

async:

A function declared with async always returns a Promise.

async function getData() {
  return "Hello";
}

Calling getData() returns a Promise that resolves to "Hello".
await:
You use await inside async functions to pause the code until a Promise is resolved.

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}

Axios:

Axios is a promise-based HTTP client for browsers and Node.js. It simplifies making requests to APIs and handling responses.

Installing Axios:

Use npm or yarn:

npm install axios

Or use a CDN in your HTML:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Or with async/await:

async function fetchPosts() {
  try {
    const res = await axios.get('https://api.example.com/posts');
    console.log(res.data);
  } catch (err) {
    console.error('Axios error:', err);
  }
}

Promise in Javascript ...

P Mukila — Mon, 30 Jun 2025 16:56:25 +0000

What is Promise?
In JavaScript, a Promise is an object representing the eventual completion or failure of an asynchronous operation. It acts as a placeholder for a value that is not yet known but will be available at some point in the future. Promises provide a structured and cleaner way to handle asynchronous code compared to traditional callback functions, which can lead to "callback hell" in complex scenarios.

A Promise can exist in one of three states:

Pending: The initial state.
Fulfilled (or Resolved): The operation completed successfully.
Rejected: The operation failed.

Creating a Promise:
A new Promise is created using the Promise constructor. This executor function receives two arguments: resolve andreject.

Handling Results:

.then(): Used to attach callbacks for when the Promise is fulfilled.
.catch(): Used specifically to handle errors (rejections) in a Promise chain.
syntax:

const login=new promise((resolve,reject)=>{
let password=true;
if(Password){
  resolve();
}else{
  reject();
}
})

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function login(){
            return new Promise((resolve,reject)=>{
                let password=true;
                if(password){
                    resolve();

                }else{
                    reject();
                }

            })
        }
        login()
        .then(()=> console.log("Successfully login..."))
        .catch(()=>console.log("invalid password..."))
    </script>
</body>
</html>

React Router

P Mukila — Fri, 27 Jun 2025 16:54:06 +0000

Router

React Router is a standard library for routing in React. It enables navigation among views of various components in a React application, allows the browser URL to reflect the app state, and keeps the UI in sync with the URL.

Key Concepts

Routes: Define the mappings between URL paths and React components.

Router: The top-level component that provides routing functionality.

Link: A component to navigate around the application without reloading the page.

useNavigate, useParams, useLocation: React hooks for navigation, accessing URL parameters, and location state.

Installation

npm install react-router-dom

For projects using React Native, use react-router-native.

Basic Example

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

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

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Common Features

Nested Routes: Structure your routes like your UI structure.

Route Parameters: Capture values from the URL (/user/:id).

Redirects: Navigate programmatically or with <Navigate />.

Lazy Loading: Load components only when needed using React.lazy.

Today I learned-Object,this keyword and hoisting in react.js...

P Mukila — Thu, 19 Jun 2025 17:16:33 +0000

1.What is an Object in React.js?

In JavaScript (and React by extension), an object is a data structure used to store collections of data and more complex entities.

In React, objects are commonly used for:
Component state:

const [user, setUser] = useState({ name: "Alice", age: 30 });

Props:

function Profile(props) {
  return <h1>{props.user.name}</h1>;
}

Styles (as inline styles):

const style = { color: "red", fontSize: "20px" };
return <div style={style}>Hello</div>;

2.this Keyword in React.js
The this keyword refers to the context in which a function is executed.

In class components, this typically refers to the component instance:


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // bind `this`
  }

  handleClick() {
    console.log(this.state.count); // `this` refers to the component
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

If you don’t bind this, it might be undefined or refer to the wrong context.

In functional components with hooks, you don’t use this, which is one reason why hooks are popular:

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

  const handleClick = () => {
    console.log(count);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

3.Hoisting in React.js
Hoisting is a JavaScript concept, not specific to React, but it still affects how you write React code.

In JavaScript:

    Function declarations are hoisted:

sayHello(); // Works fine

function sayHello() {
  console.log("Hello");
}

Variables declared with var are hoisted but not initialized.

let and const are not initialized, leading to a temporal dead zone.

In React, hoisting matters if you:

Define helper functions below your component:

function MyComponent() {
  return <div>{getGreeting()}</div>;
}

function getGreeting() {
  return "Hello!";
}

Summary

Concept	Meaning in React
`Object`	Structure for storing and passing data (`props`, `state`)
`this`	Refers to component instance in class components
`Hoisting`	JS behavior affecting function and variable declaration order; important when defining helper functions

Today I Learn - Understanding Arrays, Spread Operator, map(), and useState in JavaScript and React...

P Mukila — Mon, 16 Jun 2025 15:13:27 +0000

When working with JavaScript and React, there are a few core concepts that you’ll use again and again: arrays, the spread operator (...), the map() function, and React's useState hook. In this blog, we’ll break each one down with simple examples so you can understand how and when to use them effectively.

Arrays in JavaScript

An array is a list-like object used to store multiple values in a single variable.

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // Output: apple

Arrays can hold any data type — strings, numbers, objects, or even other arrays.

The Spread Operator (...)

The spread operator allows you to quickly copy or merge arrays and objects.
Copying an array:

const original = [1, 2, 3];
const copy = [...original];

console.log(copy); // [1, 2, 3]

Adding elements:

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];

console.log(moreNumbers); // [1, 2, 3, 4, 5]

Merging arrays:

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];

console.log(combined); // [1, 2, 3, 4]

Using map() to Transform Arrays

The map() method lets you apply a function to every element in an array and returns a new array.
Example: Multiply each number by 2

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6]

In React, map() is commonly used to render lists of components:

const items = ['pen', 'notebook', 'eraser'];

return (
  <ul>
    {items.map((item, index) => <li key={index}>{item}</li>)}
  </ul>
);

useState in React

React's useState hook lets you add state to functional components.
Basic usage:

import { useState } from 'react';

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

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

Updating an array with useState and the spread operator:

function TodoList() {
  const [todos, setTodos] = useState(['Buy milk']);

  const addTodo = () => {
    setTodos([...todos, 'Walk the dog']);
  };

  return (
    <>
      <ul>
        {todos.map((todo, index) => <li key={index}>{todo}</li>)}
      </ul>
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
}

I Learned Today- Basics of React ...

P Mukila — Fri, 13 Jun 2025 10:06:45 +0000

It looks like you're asking about npm, npx, and how they relate to React development. Here's a quick breakdown of each term and how they work together:

Npm (Node Package Manager)

npm is the default package manager for Node.js.
You use it to install packages (like React) and manage dependencies in your project.

Examples:

npm install react react-dom

Installs React and ReactDOM into your project.

npx (npm execute)

npx comes with npm (version 5.2+).
It's used to run packages without installing them globally.
Very useful for tools like create-react-app. Example:

npx create-react-app my-app

This runs the create-react-app package to set up a new React project called my-app — no need to install it globally.

Typical Workflow for React
1.Create a new React app using npx:

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

2.Start the development server:

npm start

3.Install additional dependencies (if needed):

npm install axios  # for HTTP requests
npm install react-router-dom  # for routing

What is JSX?

JSX is a syntax extension to JavaScript. It lets you write HTML-like code inside JavaScript — commonly used in React.
JSX Example (React)

const element = <h1>Hello, world!</h1>;

This looks like HTML, but it’s actually JavaScript with JSX syntax.
It gets converted to regular JavaScript before running.

What is JavaScript?

JavaScript is the core programming language used to add behavior to web pages. JSX is built on top of JavaScript.

JS Example

const name = "World";
const message = "Hello, " + name + "!";

How They Work Together in React
JSX + JS Example:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

`JSX: <h1>Hello, {name}!</h1>
JS: const name = "React"; (inside JSX {})

JS and JSX are used together: JS handles logic, JSX handles UI.
`
JSX Compiles to JS

JSX:



const element = <h1>Hello</h1>;

Compiles to:

const element = React.createElement('h1', null, 'Hello');

Framework or Library

React is a JavaScript library, not a framework. It is used to build user interfaces (UIs) by creating reusable components. While React provides a foundation for building UIs, it doesn't dictate how to structure an entire application, making it flexible and adaptable.

Library

A library is a collection of pre-written code components like functions, classes, and modules that streamline development tasks by providing reusable functionality.

It only handles the view layer (UI) of your app.
It doesn’t include built-in solutions for routing, state management, or form handling.
You’re in charge of how to structure your app and what other tools to use.

Framework

While React itself is a library, there are frameworks built on top of React to provide structure and features that React alone doesn’t include.

Why Hooks in React?

React Hooks were introduced to simplify and modernize how we write React components. They solve real problems that existed with class components.

Top Reasons for Using Hooks

1.Simplify Components

Hooks allow you to use state and lifecycle methods without classes.

Before:

class MyComponent extends React.Component {
  state = { count: 0 };
  // lifecycle methods...
}

After:

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

2.Avoid Repetition

With class components, logic often had to be duplicated or split across lifecycle methods. Hooks let you group related logic together.

3.Better Reusability

Custom hooks let you extract and reuse logic across components — much cleaner than using Higher-Order Components (HOCs) or Render Props.

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  // logic here...
  return isOnline;
}

4.Cleaner Code

Hooks reduce boilerplate and make functional components easier to read and test.

5.Eliminate Confusion with this

In class components, this can be confusing. Hooks don’t use this, which avoids common bugs and improves clarity.

I learned introduction of React...

P Mukila — Thu, 12 Jun 2025 16:06:32 +0000

Sure! Here’s a clear and concise explanation of React, SPA, MPA, and the difference between ReactDOM and JS DOM:

What is React

ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability.

It is developed and maintained by Facebook.
The latest version of React is React 19.
Uses a virtual DOM for faster updates.
Supports a declarative approach to designing UI components.
Ensures better application control with one-way data binding.

SPA (Single Page Application)

An SPA is a web app that loads one HTML page and dynamically updates the content as the user interacts with the app, without refreshing the entire page. React is often used to build SPAs because it efficiently updates the UI on the client side.

MPA (Multi Page Application)

An MPA consists of multiple separate HTML pages. Every time a user clicks a link, the browser loads a new page from the server, causing a full page refresh.

     Each page is a separate HTML file.
     Full reload on navigation.
     Better for SEO and simple websites.

React Components
A React component is a reusable piece of code that defines a part of the user interface. It accepts inputs called props and returns JSX to describe what should be displayed on the screen. Components help build and organize UI in a modular way.

Components are building blocks of a React app.
They are reusable pieces of UI, like buttons, headers, or entire pages.
Components can be written as functions or classes (functional components are more common now).

Return Function in Components

A React functional component is basically a function that returns JSX.
JSX looks like HTML but is actually JavaScript that tells React what to render.
The value you return from the component is what appears on the screen. Example:

function Greeting() { return <h1>Hello, world!</h1>; // This JSX will be rendered in the UI }

    Here, the Greeting component returns an <h1> element.
    React takes that and displays "Hello, world!" on the webpage.

Today I learned-JavaScript: while Loops, Arrow Functions, and the map() Method

P Mukila — Mon, 09 Jun 2025 14:32:20 +0000

1.Looping with while

The while loop continues executing a block of code as long as a condition is true.

Syntax:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

Notes:

Be careful to increment the counter (i++), or you might create an infinite loop.

Use while when you don't know ahead of time how many times you'll loop.

2.Arrow Functions

Arrow functions are a shorter syntax for writing functions. They're especially useful for small functions or callbacks.
Syntax:

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Key Features:

Short and clean syntax.

Does not have its own this (inherits from parent scope).

Great for array methods like map, filter, forEach, etc.

3.map() Method

The map() method creates a new array by applying a function to each element in an existing array.
Syntax:

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

Notes:

map() does not modify the original array.

The returned array will have the same length as the original.

Example: Combining All Three

let nums = [1, 2, 3, 4, 5];
let i = 0;

while (i < nums.length) {
  nums[i] += 1;
  i++;
}

const doubled = nums.map(n => n * 2);
console.log(doubled); // [4, 6, 8, 10, 12]