27_ Suraj Adhav

[27_ Suraj Adhav @27Adhav]

Day 33 of #100DaysOfCode

Today I learned React Fragments <> to group multiple elements without adding extra nodes to the DOM.

return (
<>
<h1>Title</h1>
<p>Paragraph</p>
</>
);

#ReactJS #WebDev #Coding

[27_ Suraj Adhav @27Adhav]

Today I learn about React DevTools 🧩 & set optional props with TypeScript ⚛️

interface Props {
children: string;
color?: "primary" | "secondary";
}

const Button = ({ children, color = "primary" }: Props) => (
<button className={"btn btn-" + color}>{children}</button>
);

[27_ Suraj Adhav @27Adhav]

Day 31 of #100DaysOfCode
Today I learned how to pass functions as props in React ⚛️
This allows child components to notify the parent — like when an item is selected.
📡 It’s how React handles child-to-parent communication!

#ReactJS #JavaScript #Coding

[27_ Suraj Adhav @27Adhav]

✅Day 30 of #100DaysOfCode

Today I learned about React State Batching ⚛️

React groups multiple state updates into a single re-render for better performance.
Example: multiple setState() calls inside one event → only 1 render happens! ⚡

#ReactJS #JavaScript #WebDev

[27_ Suraj Adhav @27Adhav]

✅ Day 29 of #100DaysOfCode

Today I learned about useState & Props in React ⚛️
🪄 useState → lets components store and update data dynamically.
📦 Props → pass data from parent to child components.

Core building blocks of interactive UIs! ⚡

[27_ Suraj Adhav @27Adhav]

Day 28 of #100DaysOfCode
Today I learned how to handle click events in React ⚛️
👉 Use the onClick prop
👉 For small logic → inline
👉 For larger logic → use a handler function (e.g. handleClick)

Keeps JSX clean & readable ✨
#ReactJS #JavaScript #Coding

[27_ Suraj Adhav @27Adhav]

Day 27 of #100DaysOfCode
Learned Conditional Rendering in React ⚛️
Used && to show content only when needed 👇

{cityName.length === 0 && <p>No Item Found</p>}

&& → returns last true
|| → returns first true

#ReactJS #JavaScript #Coding

[27_ Suraj Adhav @27Adhav]

Day 26 of #100DaysOfCode
Today I learned how to render arrays in React using .map()

function ListGroup() {
const cities = ["Mumbai", "Delhi", "Pune"];
return (
<ul>
{https://t.co/6njwua3o4w((city) => (
<li key={city}>{city}</li>
))}
</ul>
);
}

[27_ Suraj Adhav @27Adhav]

Day 25 of #100DaysOfCode
Today I learned:
⚛️ How to create a React Component

function Message() {
let name = "Suraj";
return <h1>Hello {name}</h1>;
}
export default Message;

🌱 React Ecosystem → React works by updating the Virtual DOM, making UI updates fast.

#ReactJS

[27_ Suraj Adhav @27Adhav]

Day 24 of #100DaysOfCode
Today I learned the difference between Synchronous vs Asynchronous code ⚡
🔹 Synchronous → runs line by line, each task waits for the previous one.
🔹 Asynchronous → tasks like setTimeout & API calls run in background, don’t block execution.

#Coding

[27_ Suraj Adhav @27Adhav]

Today I learned about Event Handlers & Event Listeners in JS 🎯

✅ Property → onclick="fn()" (not flexible, overrides events, no event object)
✅ Method → addEventListener() (best practice, multiple events, event object access)

#JavaScript #DOM

[27_ Suraj Adhav @27Adhav]

🧑‍💻 Day 22 of #100DaysOfCode

Yesterday I learned DOM basics in JS

✅ Selecting elements → getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll

✅ Modifying content → .innerHTML, .innerText

✅ Styling → .style.backgroundColor

[27_ Suraj Adhav @27Adhav]

Day 21 of #100DaysOfCode
Today I learned DOM element selection in JS ✨
👉 getElementById() – by ID
👉 getElementsByClassName() – by class
👉 getElementsByTagName() – by tag
👉 querySelector() – first match
👉 querySelectorAll() – all matches

#JavaScript #DOM #100DaysOfCode

[27_ Suraj Adhav @27Adhav]

Day 20 of #100DaysOfCode
Today learn about,

Pure Function → Same input = Same output, no external changes.
Side Effect → A function that modifies something outside its scope.

✅ Pure functions are predictable & easier to test.
⚠️ Side effects can cause unexpected behavior.

[27_ Suraj Adhav @27Adhav]

Day 19 of #100DaysOfCode
Today I learned about Asynchronous Code in JavaScript ⚡
🔹 JS is single-threaded, but we can handle async tasks using callbacks, promises, or async/await.
🔹 Example with setTimeout + callback:

[27_ Suraj Adhav @27Adhav]

Day 18 of #100DaysOfCode Today I learned about the sort() method in JavaScript

- sort() arranges array elements as strings by default (lexicographically).

- For numbers, we must pass a compare function.

[27_ Suraj Adhav @27Adhav]

✅Day 17 of #100DaysOfCode

Today I learned about Arrays of Objects in JavaScript 📋

🔹 Useful when storing multiple items with properties (like user data, products, etc.)

🔹 Can be looped through with for, forEach, map, etc.

[27_ Suraj Adhav @27Adhav]

Day 16 of #100DaysOfCode

✅Today I learned about ES6 Modules 📦 in JavaScript
🔹 export → lets us share variables, functions, or classes
🔹 import → lets us use them in another file
🔹 Helps keep code organized & reusable

[27_ Suraj Adhav @27Adhav]

Day 15 of #100DaysOfCode
Today I explored the Math object in JavaScript 🧮

🔹 Learned how to generate random numbers using Math.random()

Example:
const random = Math.floor(Math.random() * 10 + 1);
console.log(random); // 1 to 10

[27_ Suraj Adhav @27Adhav]

🧑‍💻 Day 14 of #100DaysOfCode

Today I learned about setTimeout in JavaScript ⏳
🔹 Executes a function once after a specified delay (in ms).
🔹 Useful for scheduling tasks, animations, and async behavior.