Forem: Aman Kureshi

🏆 Secured 1st Rank in Web Design During My MCA

Aman Kureshi — Wed, 01 Apr 2026 09:14:51 +0000

I’m excited to share that I’ve secured 🥇 1st Rank in Web Design during my MCA at KSV University.

From BCA to MCA, web design has been a major part of my learning journey. Competing in web design pushed me to continuously improve my creativity and frontend development skills.

💡 Key Areas I Focused On:
• Designing modern and user-friendly interfaces
• Building fully responsive layouts
• Strengthening frontend fundamentals with HTML, CSS, and JavaScript

🙏 Special Thanks To:
• Shabbir Vaghela – My biggest mentor who guided me from basics to advanced.
• Yusuf Chauhan – For building my strong web design foundation.
• Imran Kureshi – For motivation and valuable industry insights.

This achievement reflects the power of consistency, learning, and mentorship.

🚀 Moving forward, I’m excited to keep building real-world projects and grow as a Frontend Developer.

🔗 GitHub: https://github.com/amankureshi

🧹 Why Cleanup Functions Matter in useEffect

Aman Kureshi — Sun, 29 Mar 2026 07:58:48 +0000

When using useEffect, sometimes you need to clean up resources like timers, subscriptions, or event listeners.

📘 Example:

import { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Running...");
    }, 1000);

    return () => clearInterval(timer); // cleanup
  }, []);
}

✨ Key Points:
• Cleanup prevents memory leaks
• Runs when the component unmounts
• Also runs before the effect executes again

Always clean up side effects to keep your React apps efficient and bug-free. 🚀

🔀 Conditional Rendering in React

Aman Kureshi — Fri, 27 Mar 2026 17:04:58 +0000

Conditional rendering means showing different UI based on a condition.

📘 Example:

function Greeting({ isLoggedIn }) {
  return (
    <h2>{isLoggedIn ? "Welcome back!" : "Please log in"}</h2>
  );
}

✨ Key Points:
• Use ternary operator (? :) for simple conditions
• Use && for short conditional rendering
• Helps create dynamic user interfaces

Conditional rendering makes your React UI smart and interactive. 🚀

🧱 What is a Component in React?

Aman Kureshi — Thu, 26 Mar 2026 17:50:59 +0000

A component is a reusable piece of UI in React. You can combine multiple components to build a complete application

📘 Example:

function Greeting() {
  return <h1>Hello, Developer!</h1>;
}

You can use it like this:

<Greeting />

✨ Key Points:
• Components are reusable
• Help keep code organized and modular
• Can be functional or class components

React apps are basically a tree of components working together. 🚀

🧠 What is JSX in React?

Aman Kureshi — Mon, 23 Mar 2026 13:02:40 +0000

JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript, making UI creation easier in React.

📘 Example:

function App() {
  const name = "Aman";

  return <h1>Hello, {name}</h1>;
}

✨ Key Points:
• JSX looks like HTML but works inside JavaScript
• You can use JavaScript expressions with {}
• JSX is converted into React.createElement() behind the scenes

JSX makes React code more readable and developer-friendly. 🚀

🧠 What is JSX in React?

Aman Kureshi — Fri, 20 Mar 2026 05:33:17 +0000

JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript, making UI creation easier in React.

📘 Example:

function App() {
  const name = "Aman";

  return <h1>Hello, {name}</h1>;
}

✨ Key Points:
• JSX looks like HTML but works inside JavaScript
• You can use JavaScript expressions with {}
• JSX is converted into React.createElement() behind the scenes

JSX makes React code more readable and developer-friendly. 🚀

🗺️ Rendering Lists in React Using map()

Aman Kureshi — Tue, 17 Mar 2026 16:42:16 +0000

In React, you often need to display a list of items. The map() method makes this easy.

📘 Example:

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

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

✨ Key Points:
• map() transforms data into UI elements
• Always provide a unique key
• Keeps your code clean and dynamic

map() is one of the most commonly used patterns in React.

🎯 Why You Should Avoid Using Index as a Key in React

Aman Kureshi — Mon, 17 Nov 2025 15:59:39 +0000

React uses keys to track list items, but using the array index can create UI bugs.

📌 Problem with index as key:
• Wrong item gets updated
• Animations break
• Items reorder incorrectly

📘 Better Approach:
Always use a unique ID from your data:

<li key={item.id}>{item.name}</li>

✨ Rule:
Index as key = only safe when list never changes.

Better keys → More stable UI. 🚀

100 Days of Code — My GitHub Streak Journey (Aug 4 Nov 11)

Aman Kureshi — Tue, 11 Nov 2025 16:07:55 +0000

Today marks my 100th consecutive day of coding! 🎉
From Aug 4 to Nov 11, I’ve been consistently committing code — every single day — no breaks, no excuses.

Each day included a small win:
• Writing clean code ✨
• Pushing projects 🚀
• Learning something new 💡

This journey taught me that consistency beats motivation.
Even a few lines of code daily can build massive growth over time.

📈 You can check my progress here 👉 github.com/amankureshi

Here’s to the next 100 days of creating, learning, and growing as a developer! 💻🔥

🧠 React useState Hook — The Core of Interactivity

Aman Kureshi — Fri, 31 Oct 2025 16:13:57 +0000

The useState hook lets you add state to functional components.

📘 Example:

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

🪄 Update state easily:

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

✨ Key Points:
• Returns [value, setter]
• Re-renders component when state changes
• Use callback form → setCount(prev => prev + 1)

useState = Simplicity + Power 💪

🧠 React useState Hook — Mastering State in Functional Components

Aman Kureshi — Wed, 29 Oct 2025 14:27:11 +0000

The useState hook allows you to add state to your functional components — something only class components could do before React 16.8.

📌 Basic Example:

import { useState } from "react";

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

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

✨ Key Points:
• useState returns [value, setter]
• Calling the setter (setCount) re-renders the component
• You can store any type: number, string, object, or array

📘 Example with Object:

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

👉 Tip:
When updating state based on the previous value, always use the callback form:

setCount(prev => prev + 1);

useState is the foundation of all interactivity in React 🚀

⚡React useEffect Hook — Side Effects Made Simple

Aman Kureshi — Sat, 20 Sep 2025 10:27:23 +0000

The useEffect hook lets you perform side effects in functional components — like fetching data, updating the DOM, or setting up timers.

📌 Basic Example:

import { useEffect, useState } from "react";

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

  useEffect(() => {
    document.title = `Clicked ${count} times`;
  }, [count]);

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

✨ Key Points:
• Runs after render
• Add dependencies in [] → decides when effect runs
• Return a cleanup function to avoid memory leaks

👉 Example Cleanup:

useEffect(() => {
  const timer = setInterval(() => console.log("Running..."), 1000);
  return () => clearInterval(timer); // cleanup
}, []);

React’s useEffect keeps your UI and side effects in sync! 🚀