DEV Community: Chandru

Introduction to Java

Chandru — Sat, 24 Oct 2026 13:26:17 +0000

Java is a popular, high-level, object-oriented programming language used to build web applications, desktop software, enterprise systems, and Android applications.

Why Java?

Platform Independent: Java runs on different operating systems using the Java Virtual Machine (JVM).
Object-Oriented: Supports classes, objects, inheritance, and polymorphism.
Secure: Provides features designed to support secure application development.
Robust: Offers exception handling and automatic memory management.
Widely Used: Popular in backend development, enterprise applications, and more.

Your First Java Program

public class Home {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

Output:

Hello World

What Should You Learn Next?

Variables and data types
Operators and conditions
Loops
Methods
Object-Oriented Programming (OOP)
Exception handling
Collections and the Java Stream API

Java is a great language for beginners because it helps you understand programming fundamentals and build a strong foundation for software development.

Building a Simple E-Commerce Website with React

Chandru — Mon, 12 Oct 2026 10:19:03 +0000

I recently built a React E-Commerce Website to practice React and improve my frontend development skills.

🔗 GitHub Repository: https://github.com/candyx3/React-Ecommerce

Features

Fetch products from the DummyJSON API
Search products by name
Filter products by category
Sort products by price
View product descriptions
Add and remove products from the cart
Increase or decrease product quantities
Navigate between product and cart pages

Tech Stack

React — Building the user interface
JavaScript — Application logic
Axios — Fetching product data
React Router DOM — Page navigation
HTML & CSS — Structure and styling

What I Learned

Working on this project helped me understand API integration, React components, product filtering, state management, and shopping cart functionality.

This project was a great step in my journey toward becoming a better React developer.

I'm excited to keep learning and building more projects!

Check out the repository: https://github.com/candyx3/React-Ecommerce

React #JavaScript #WebDevelopment #FrontendDevelopment #BuildInPublic

React Hooks: useContext, useRef, and useMemo

Chandru — Sun, 11 Oct 2026 14:59:14 +0000

React provides useful hooks to manage shared data, access DOM elements, and improve performance.

1. `useContext`

useContext lets you share data between components without passing props through every level.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

Use case: Sharing themes, user details, or language preferences.

2. `useRef`

useRef stores a value between renders without triggering a re-render when that value changes. It can also reference DOM elements.

import { useRef } from "react";

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>
        Focus Input
      </button>
    </>
  );
}

Use case: Focusing inputs, storing timer IDs, or tracking values.

3. `useMemo`

useMemo caches a calculated value between renders until its dependencies change.

import { useMemo, useState } from "react";

function App() {
  const [number, setNumber] = useState(5);

  const squared = useMemo(() => {
    return number * number;
  }, [number]);

  return (
    <>
      <p>Squared: {squared}</p>
      <button onClick={() => setNumber(number + 1)}>
        Increase
      </button>
    </>
  );
}

Use case: Avoiding expensive recalculations when dependencies haven't changed.

Quick Summary

useContext → Shares data across components.
useRef → Stores values or references DOM elements.
useMemo → Caches calculated values.

Tip: Don't use useMemo everywhere. Use it when caching a calculation provides a meaningful benefit.

React Basics: useState and useEffect

Chandru — Fri, 09 Oct 2026 12:11:11 +0000

React Basics: `useState` and `useEffect`

React is a JavaScript library used to build user interfaces. Two important hooks in React are useState and useEffect.

1. `useState`

useState is used to store and update data in a component.

import { useState } from "react";

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

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

export default Counter;

Whenever the button is clicked, the count increases and the component re-renders.

2. `useEffect`

useEffect is used to run side effects, such as fetching API data or setting up event listeners.

import { useEffect } from "react";

useEffect(() => {
  console.log("Component mounted");
}, []);

The empty dependency array [] means the effect runs after the component mounts.

Quick Summary

useState → Stores and updates component state.
useEffect → Handles side effects.
React re-renders components when their state changes.

These two hooks are essential for building interactive React applications!

JavaScript `async` and `await`

Chandru — Wed, 16 Sep 2026 09:21:58 +0000

When working with APIs or other asynchronous operations in JavaScript, you'll often use async and await.

They make asynchronous code easier to read and understand.

`async`

The async keyword makes a function return a Promise.

async function getMessage() {
  return "Hello World";
}

Because it's an async function, the result is a Promise.

`await`

await waits for a Promise to finish before continuing.

async function getData() {
  const response = await fetch("https://api.example.com/users");
  const data = await response.json();

  console.log(data);
}

Instead of writing:

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

we can use async/await, which is usually easier to read.

Error handling

Use try...catch to handle errors:

async function getData() {
  try {
    const response = await fetch(url);
    const data = await response.json();

    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Simple rule to remember

async → makes a function return a Promise
await → waits for a Promise
try/catch → handles errors

That's the basic idea behind async and await in JavaScript.

Callback Function in JavaScript

Chandru — Wed, 09 Sep 2026 05:59:33 +0000

A callback function is a function that is passed as an argument to another function and is called later when needed.

Here is a simple example:

function greet(name) {
  console.log("Hello " + name);
}

function processUser(callback) {
  callback("John");
}

processUser(greet);

Output:

Hello John

Here, greet is the callback function because we pass it to processUser().

The processUser() function then calls it using callback("John").

In simple words:

A callback is a function passed to another function to be executed later.

JavaScript Constructors and Arrays: What I Learned

Chandru — Tue, 08 Sep 2026 06:33:48 +0000

While learning JavaScript objects, I came across constructors and arrays.

Both sounded a little confusing at first, but after using them, they became much easier to understand.

Constructors

A constructor is useful when we want to create multiple objects with the same structure.

For example, if we want to create multiple users, we don't have to write the same object again and again.

function User(name, age) {
  this.name = name;
  this.age = age;
}

Now we can create users using new.

const user1 = new User("John", 22);

We can create more users using the same constructor.

In modern JavaScript, we can also use a class with a constructor:

class User {
  constructor(name) {
    this.name = name;
  }
}

The basic idea is simple: constructors help us create similar objects easily.

Arrays

Arrays are used when we want to store multiple values in one place.

const fruits = ["Apple", "Mango", "Orange"];

Array indexes start from 0, so fruits[0] gives us "Apple".

There are many array methods in JavaScript. Here are some basic ones I found useful.

length

length tells us how many items are in the array.

console.log(fruits.length);

toString()

It converts the array into a string.

console.log(fruits.toString());

at()

It returns an item at a particular position.

console.log(fruits.at(1));

join()

It joins the array elements using the separator we provide.

console.log(fruits.join(" - "));

push()

It adds an item to the end of the array.

fruits.push("Banana");

pop()

It removes the last item.

fruits.pop();

shift()

It removes the first item.

fruits.shift();

unshift()

It adds an item to the beginning.

fruits.unshift("Grapes");

concat()

It can be used to combine arrays.

let more = fruits.concat(["Kiwi"]);

slice()

It returns a part of an array without changing the original array.

let result = fruits.slice(0, 2);

splice()

It can be used to add, remove, or replace items in an array.

fruits.splice(1, 1);

flat()

It is useful when an array contains other arrays and we want to flatten them.

let nums = [1, [2, 3]];
console.log(nums.flat());

isArray()

It checks whether a value is actually an array.

console.log(Array.isArray(fruits));

There are many more array methods in JavaScript, but these are some good ones to start with.

The ones I use most often are probably push(), pop(), shift(), unshift(), slice(), splice(), and concat().

JavaScript Objects: What I Learned

Chandru — Sun, 06 Sep 2026 06:30:40 +0000

After learning strings and functions, the next topic I came across was objects.

An object is a way to keep related information together. Instead of creating separate variables for a person's name, age, and city, we can put them inside one object.

const person = {
  name: "John",
  age: 22
};

Here, name and age are called properties.

We can access a property using a dot.

console.log(person.name);

We can also change the value later.

person.age = 23;

Objects can contain different types of data too. We can have strings, numbers, arrays, and even functions inside an object.

When a function is inside an object, we usually call it a method.

const person = {
  greet() {
    console.log("Hello!");
  }
};

Then we can call it using person.greet().

Objects are used a lot in JavaScript. You'll see them when working with users, products, API responses, settings, and many other things.

The main thing I learned is that objects are a simple way to organize related data in one place.

At first, objects can feel a little confusing, but after using them in a few examples, they start to feel much more natural.

JavaScript Strings: The Basics I Learned

Chandru — Fri, 04 Sep 2026 09:04:14 +0000

Strings are one of the first things we use when learning JavaScript.

Simply put, a string is just text.

There are three common ways to create strings in JavaScript.

1. Single Quotes

We can use single quotes to create a string.

let name = 'John';

2. Double Quotes

We can also use double quotes.

let name = "John";

Both single and double quotes work in a similar way. It's mostly a matter of which style you prefer or what the project uses.

3. Template Literals

Template literals use backticks instead of quotes.

let message = `Hello ${name}`;

I find template literals especially useful when we need to include variables inside a string.

For example, instead of joining strings with +, we can directly put the variable inside ${}.

Some Useful String Methods

JavaScript has many built-in methods for working with strings.

We can change text to uppercase:

let text = "hello";
text.toUpperCase();

Or lowercase:

text.toLowerCase();

We can also check how many characters are in a string:

text.length;

Another useful one is includes(), which checks whether a string contains some text.

text.includes("he");

Final Thoughts

Strings may seem very basic, but we use them everywhere in JavaScript — names, messages, search boxes, URLs, API data, and much more.

The main thing to remember is:

Single quotes → 'Hello'

Double quotes → "Hello"

Template literals → `Hello ${name}`

Types of Functions in JavaScript

Chandru — Thu, 03 Sep 2026 06:25:14 +0000

After learning what functions are in JavaScript, I came across different ways of writing them.

At first, I thought they were all completely different. But after trying them out, I realized the main difference is just how we write and use them.

Function Declaration

This is the normal way of creating a function.

function greet() {
  console.log("Hello!");
}

Then we can call it whenever we need it.

greet();

This is probably the easiest one to understand when you're starting out.

Function Expression

Here, we assign a function to a variable.

const greet = function() {
  console.log("Hello!");
};

It works like a normal function, but the function is stored inside the variable.

Arrow Function

Arrow functions are a shorter way of writing functions.

const greet = () => {
  console.log("Hello!");
};

You'll see these a lot in modern JavaScript, especially when working with arrays and frameworks.

Anonymous Function

An anonymous function is simply a function that doesn't have a name.

For example:

setTimeout(function() {
  console.log("Hello!");
}, 1000);

Here, the function is passed directly to setTimeout, so we don't need to give it a name.

IIFE

IIFE stands for Immediately Invoked Function Expression.

The name sounds complicated, but the idea is simple. The function runs immediately after it is created.

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

You may not use IIFE very often in modern JavaScript, but it's still good to know what it means when you see it in existing code.

What I take from this

There are several ways to write functions, but I don't think you need to memorize all of them at once.

Start with function declarations and arrow functions. Once you're comfortable with those, the other types will be much easier to understand.

The more JavaScript you write, the more naturally you'll know which one to use.

JavaScript Functions: A Simple Explanation

Chandru — Wed, 02 Sep 2026 05:34:39 +0000

While learning JavaScript, one topic that I found really important was functions.

A function is basically a block of code that we can write once and use whenever we need it.

For example:

function greet() {
console.log("Hello!");
}

We can run the function by calling it:

greet();

Functions with Parameters

Sometimes we want to give some information to a function. That's where parameters come in.

function greet(name) {
console.log("Hello " + name);
}

Now we can pass different names when calling the function.

Return

A function can also give a value back using return.

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

We can then store the result in a variable and use it wherever we need.

Why are functions useful?

Without functions, we might end up writing the same code again and again.

Functions help us:

Reuse code
Keep code organized
Avoid repetition
Make programs easier to understand

The main thing I learned is that functions are not just about writing code in a different format. They help us break a bigger problem into smaller, reusable pieces.

4 JavaScript Things I Learned Recently

Chandru — Tue, 01 Sep 2026 05:56:35 +0000

While learning JavaScript, I came across a few things that I had seen before but didn't fully understand: ternary, switch, break, and continue.

After trying them with small examples, they started making more sense.

Ternary

The ternary operator is basically a short way of writing if-else.

For example:

let result = age >= 18 ? "Adult" : "Minor";

It is useful when the condition is simple and you want to keep the code short.

Switch

Switch is useful when you need to check one value against different options.

For example, if we want to check the day:

switch (day) {
case "Monday": console.log("Start");
}

We can add more cases depending on what we need.

Break

Break is used when we want to stop a loop.

For example:

if (i === 5) break;

When the condition is true, the loop stops there.

Continue

Continue is different from break.

It skips the current iteration but allows the loop to keep running.

if (i === 5) continue;

So, the way I remember them is:

Ternary → shorter if-else

Switch → different cases

Break → stop

Continue → skip and move on

These are small things, but understanding them makes JavaScript a little easier to work with.

I'm still learning, but I've found that writing small examples is much better than just reading about the syntax.

DEV Community: Chandru

Introduction to Java

Why Java?

Your First Java Program

What Should You Learn Next?

Building a Simple E-Commerce Website with React

Features

Tech Stack

What I Learned

React #JavaScript #WebDevelopment #FrontendDevelopment #BuildInPublic

React Hooks: useContext, useRef, and useMemo

1. useContext

2. useRef

3. useMemo

Quick Summary

React Basics: useState and useEffect

React Basics: useState and useEffect

1. useState

2. useEffect

Quick Summary

JavaScript `async` and `await`

async

await

Error handling

Simple rule to remember

Callback Function in JavaScript

JavaScript Constructors and Arrays: What I Learned

Constructors

Arrays

length

toString()

at()

join()

push()

pop()

shift()

unshift()

concat()

slice()

splice()

flat()

isArray()

JavaScript Objects: What I Learned

JavaScript Strings: The Basics I Learned

1. Single Quotes

2. Double Quotes

3. Template Literals

Some Useful String Methods

Final Thoughts

Types of Functions in JavaScript

Function Declaration

Function Expression

Arrow Function

Anonymous Function

IIFE

What I take from this

JavaScript Functions: A Simple Explanation

4 JavaScript Things I Learned Recently

1. `useContext`

2. `useRef`

3. `useMemo`

React Basics: `useState` and `useEffect`

1. `useState`

2. `useEffect`

`async`

`await`