DEV Community: ANSI KADEEJA

Getting Started with React

ANSI KADEEJA — Mon, 16 Jun 2025 03:22:01 +0000

React is a powerful and popular JavaScript library for building user interfaces. If you're new to React, you might be wondering how it works and what makes it special. In this blog, I’ll explain some of the most important basic concepts to help you get started: DOM vs React DOM, SPA vs MPA, Class vs Functional Components, JSX, and npm vs npx.

📘 DOM vs React DOM

DOM (Document Object Model) is the browser’s representation of your HTML structure. JavaScript can interact with it using functions like document.getElementById() to change content or style.
React DOM is a React-specific version that uses a Virtual DOM to update the actual DOM more efficiently. Instead of reloading the entire page, React updates only the parts that change, making apps faster and smoother.

🔁 SPA vs MPA

SPA (Single Page Application):
In an SPA, the entire website loads one single HTML page. When the user interacts with the site, JavaScript updates the page without reloading it. React is designed to build SPAs.
Example: Gmail, Facebook
MPA (Multi Page Application):
An MPA loads a new HTML page every time a user clicks a link. The browser reloads completely. These are common in traditional websites.
Example: Amazon, online banking sites

🏗️ Class vs Functional Components
React allows you to build UI using components, which are like reusable building blocks. There are two main types:

📦 Class Components

Written using JavaScript classes.
Include lifecycle methods like componentDidMount().
Older but still valid.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

✨ Functional Components

Simple JavaScript functions.
Use Hooks (like useState, useEffect) to manage state and side effects.
Modern and preferred way of writing components.

function Welcome() {
  return <h1>Hello, React!</h1>;
}

💡 What is JSX?
JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript, making your UI code more readable and powerful.
Example:

const name = "Ansi";
const greeting = <h1>Hello, {name}</h1>;

JSX supports dynamic content using {} and makes your code cleaner and easier to work with.
📦 npm vs npx
📌npm (Node Package Manager)

Used to install libraries or tools into your React project.

Example:

npm install react

⚡ npx

Used to run packages without permanently installing them.
Helpful for tools like Create React App:

npx create-react-app my-app

This command sets up a new React project with all the required tools in seconds.

100 Days of JavaScript🔥 – Day 2️⃣: Understanding Data Types & Joining Text (Concatenation)

ANSI KADEEJA — Sat, 31 May 2025 03:56:48 +0000

Yesterday, we learned about variables – our "boxes" for holding information. Today, we'll look inside those boxes to understand the types of information they hold, and then we'll learn a super useful way to combine text: concatenation.

Understanding Data Types: The Kind of Information in Your Box Think of it like this: different boxes hold different kinds of items. A box for toys is different from a box for fruit. In JavaScript, your variables also hold different types of data, and knowing the type helps you know what you can do with it.

Number: This is for any kind of number. It could be a whole number (like 7, 100), or a number with a decimal point (like 3.14, 2.5).
Example: let quantity = 50; let temperature = 28.5;
String: This is for text. Whenever you want to store words, sentences, or even just a single letter, you'll use a String. You create strings by putting the text inside single quotes ('...'), double quotes ("..."), or special backticks (...).
Example: let movieTitle = "Inception"; let city = 'Kuala Lumpur';
Boolean: This is a simple type that holds only one of two values: true or false. Booleans are essential for making decisions in your code (like "Is it raining?" - true or false).
Example: let isRaining = false; let userLoggedIn = true;
Undefined: This means a variable has been created (a box exists), but no value has been placed inside it yet. JavaScript automatically gives it the undefined value.
Example: let myAge; // myAge is undefined because nothing is assigned yet
Null: This is similar to undefined, but it means you've intentionally said "there is no value here." You actively assign null when you want to show that something is purposely empty or unknown.
Example: let selectedItem = null; // We explicitly say no item is chosen

How to Check the Type:
You can use the typeof keyword to ask JavaScript what type of data is in a variable:

let myFavNumber = 7;
let myHobby = "coding";
console.log(typeof myFavNumber); // Output: number
console.log(typeof myHobby);    // Output: string

2. Concatenation: Joining Your Text Together!
Concatenation is just a fancy word for joining two or more strings (pieces of text) into one longer string. It's like sticking different words or phrases together to form a complete sentence.

There are a few main ways to concatenate strings in JavaScript:
A. Using the + Operator (The "Add" sign for Text)
You know + for adding numbers. But for strings, it works like a "glue" to stick them together!

// Sticking two strings together
let part1 = "Hello";
let part2 = "World";
let fullMessage = part1 + part2;
console.log(fullMessage); // Output: HelloWorld (Notice, no space!)

// Adding a space manually
let greet = "Good";
let timeOfDay = "Morning";
let politeGreeting = greet + " " + timeOfDay + "!"; // We add " " for a space
console.log(politeGreeting); // Output: Good Morning!

// Combining strings with numbers (JavaScript is smart!)
let productName = "Laptop";
let productPrice = 1200;
let productInfo = "The " + productName + " costs $" + productPrice + ".";
console.log(productInfo); // Output: The Laptop costs $1200.
// JavaScript automatically turns the number into a string here.
</script>

B. Using Template Literals (The Cool New Way with Backticks )

This is a more modern and often cleaner way to concatenate strings, especially when you have variables mixed in. Template literals use backticks instead of single or double quotes, and they let you put variables directly inside your string using ${variableName}.

Easy Variable Inclusion: You don't need + signs to join variables!
Multi-line Strings: You can write strings that span multiple lines naturally.

// Using variables directly inside the string
let animal = "cat";
let sound = "meow";
let animalSays = `The ${animal} says ${sound}.`;
console.log(animalSays); // Output: The cat says meow.

// Combining with numbers (still easy!)
let item = "book";
let pages = 350;
let bookDescription = `This ${item} has ${pages} pages.`;
console.log(bookDescription); // Output: This book has 350 pages.

// Creating multi-line messages without special symbols
let poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!`;
console.log(poem);
/*
Output:
Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!
*/

Why Template Literals are Great:
They make your code much easier to read, especially when you're building complex messages or even parts of web pages. You don't have to constantly open and close quotes or add + signs.

100 Days of JavaScript🔥– Day 1️⃣:Understanding Data Types & Variables

ANSI KADEEJA — Fri, 30 May 2025 03:12:54 +0000

For Day 1, we're diving straight into what I consider the absolute core concepts of JavaScript: Variables(like a box to hold information)and Data Types (what kind of information is in the box, e.g., text or numbers) .

How We Declare Variables in JavaScript:
In modern JavaScript, we primarily use two keywords to create these containers:

let: Use let when you expect the value stored in your variable to change (or be reassigned) later in your program.

let firstNumber = 1000; // 'firstNumber ' holds the number 1000
console.log(firstNumber ); // Output: 1000

firstNumber  = 1200;     // We can change its value later!
console.log(firstNumber ); // Output: 1200

const: Use const when the value of the variable should never change after you've set it. If you try to reassign a const variable, JavaScript will throw an error. This is perfect for values that truly are constant, like a fixed mathematical constant or a username that shouldn't be altered.

//const example

const PIN = 3.14159; // PIN will always be this value
console.log(PIN); // Output: 3.14159

// PIN = 3.0;        // This would cause an error! (Try it in your console!)

var: You might see var in older code examples. While it still works, let and const were introduced in ES6 (a newer version of JavaScript) to address some confusing behaviors of var. For any new code you write, it's a best practice to stick with let and const.

Naming Our Boxes:

"Just like labeling real-world boxes, there are rules for naming variables: you can use letters, numbers, underscores, and dollar signs, but they must start with a letter, _, or $. Also, JavaScript is case-sensitive, so myName is different from myname."

Code Example:

// Storing text in a variable
const user_Name = "AnsiKadeeja";
console.log(user_Name); // Output: AnsiKadeeja

// Using a boolean
let isLoggedIn = true;
console.log(isLoggedIn); // Output: true

// Showing how 'let' allows changes
let $temperature = 20;
console.log("Current temp:", $temperature); // Output: Current temp: 20
$temperature = 22; // Changing the value
console.log("New temp:", $temperature);   // Output: New temp: 22

Frontend Cooking🍳: Building a Delicious Website

ANSI KADEEJA — Thu, 29 May 2025 06:30:06 +0000

Imagine building a website is like cooking a meal. Each part of frontend development plays a role, just like different ingredients and cooking techniques.

HTML: The Ingredients
CSS: The Cooking Style & Presentation
@media Queries: Adapting to Different "Eating Environments"
JavaScript: The Chef's Actions & Dining Experience

1. HTML: The Ingredients (What's in the dish?)

HTML is like your raw ingredients. It's the basic stuff that makes up your meal. Without ingredients, you have no food!

<h1> (A big heading) is like a whole chicken – the main part of your dish.
<p> (A paragraph of text) is like rice – it's there to provide bulk and context.
<img> (An image) is like vegetables – they add visual appeal and flavor.
<button> (A clickable button) is like a condiment – something you interact with.

  <div class="meal-plate">
<h1>Grilled Chicken</h1>
 <p>Served with fluffy rice and steamed broccoli.</p><img src="/brocoli.jpg" alt="A plate of grilled chicken and broccoli" width="300px" height="300px">
<br><button>Order Again</button>
   </div>

2. CSS: The Cooking Style & Presentation (How does it look and feel?)

CSS is how you prepare and present your ingredients. It's the cooking method, the seasoning, and how you arrange the food on the plate.
A. margin and padding: Space on the Plate
Think of your ingredients as sitting in boxes on the plate.

padding (Space inside the box): This is like adding space around the food within its own serving bowl or plate section. It ensures your chicken isn't squashed against the edges of its own little area.

   h1 {
    padding: 10px; /* 10px space inside the heading's box */
    background-color: lightgray; /* So you can see the padding */
}

margin(Space outside the box): This is like the empty space between different serving bowls on a big platter, or the space between your plate and the edge of the table. It separates one item from another.

h1 {
    margin-bottom: 20px; /* 20px space below the heading's box */
}

/* Giving each ingredient a little space from the next */
p, img, button {
    margin-bottom: 15px; /* Add space below each of these items */
}

B. flex (Flexbox): Arranging Ingredients in a Row or Column

Flexbox is like arranging your ingredients neatly in a single line or column. Imagine you have three side dishes, and you want them perfectly spaced next to each other on a long serving tray.

You'd tell the tray (.cards-section) to be a flex container.
Then you can tell the side dishes (.card) how to space themselves out.

<div class="side-dishes">
    <div class="dish">Salad</div>
    <div class="dish">Fries</div>
    <div class="dish">Sauce</div>
</div>
css
.side-dishes {
    display: flex; /* Make the container a flex container */
    justify-content: space-between; /* Space the items evenly across the row */
    align-items: center; /* Vertically align them in the middle */
}

.dish {
    background-color: lightyellow;
    padding: 15px;
    border: 1px solid orange;
}

C.grid (CSS Grid): Arranging a Full Plate (Rows & Columns)

CSS Grid is like setting up a whole meal on a large, sectioned plate. You decide exactly where the main course goes, where the side dishes are, and where the dessert might be, creating both rows and columns.

You tell the entire plate (.meal-plate) to be a grid container.
Then you define the sections (rows and columns) on your plate.
Finally, you place each ingredient (h1, p, img, button) into its specific section on the grid.

<div class="meal-plate">
    <h1>Grilled Chicken</h1>
    <p>Served with fluffy rice and steamed broccoli.</p>
    <img src="/brocoli.jpg" alt="A plate of grilled chicken and broccoli">
    <button>Order Again</button>
</div>
css
.meal-plate {
    display: grid; /* Make the plate a grid container */
    /* Define 2 columns: 1 for the text, 1 for the image */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    /* Define rows: one for heading, one for description, one for image/button */
    grid-template-rows: auto auto 1fr auto;
    gap: 15px; /* Space between the grid sections */
    border: 2px solid brown;
    padding: 20px;
}

h1 {
    grid-column: 1 / 3; /* The heading spans across both columns */
    /* grid-area: header; (Using named areas is even more like a blueprint) */
    text-align: center;
}

p {
    grid-column: 1 / 2; /* The paragraph stays in the first column */
}

img {
    grid-column: 2 / 3; /* The image goes in the second column */
    grid-row: 2 / 4; /* The image spans rows 2 and 3 */
    max-width: 100%; /* Make sure image fits its grid cell */
    height: auto;
}

button {
    grid-column: 1 / 2; /* The button stays in the first column */
    margin-top: 10px;
}

3. @media

Queries: Adapting to Different "Eating Environments"

@media queries are like having different ways to serve your meal based on where you're eating it.

Big dining table (Desktop): You can spread out your meal on a large plate, with lots of space, maybe even side dishes arranged in rows.
Small coffee table (Tablet): You might need to arrange things a bit tighter, perhaps stack some side dishes if they don't fit side-by-side.
Eating on the go (Mobile phone): Everything needs to be compact, maybe just one item per line, very easy to see and use on a small screen.

You use @media queries to tell the browser: "If the screen is smaller than X size, change the layout like this!"

 /* Default styles for desktop (large dining table) */
.meal-plate {
    /* ... (Grid settings for 2 columns, etc., as above) ... */
    width: 800px; /* Fixed width for large screens */
    margin: 20px auto;
}

/* If the screen is like a small coffee table (max-width: 768px) */
@media screen and (max-width: 768px) {
    .meal-plate {
        width: 90%; /* Make it fluid for smaller screens */
        grid-template-columns: 1fr; /* Switch to a single column layout */
        /* Now everything stacks one on top of the other */
        grid-template-rows: auto; /* Rows will adjust automatically */
    }

    h1, p, img, button {
        grid-column: 1 / 2; /* All items now span the single column */
        grid-row: auto; /* Let rows adjust naturally */
        text-align: center; /* Center text items */
    }
}

/* If the screen is like a mobile phone (max-width: 480px) */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.5em; /* Make the heading smaller */
        margin-bottom: 5px; /* Reduce space */
    }

    .meal-plate {
        padding: 10px; /* Less padding around the whole plate */
    }
}

4. JavaScript: The Chef's Actions & Dining Experience (How does it behave and interact?)
JavaScript is the active part of your meal preparation and dining experience. It's the chef taking action, the waiter serving, or the way the food changes as you interact with it. HTML provides the ingredients, CSS makes them look good, but JavaScript makes things happen!

Responding to interactions:
Clicking the "Order Again" button: This is like telling the waiter "I want more chicken!" JavaScript handles this click and might show a "Order Placed!" message or even add the item to a virtual cart.
A menu expanding when you hover over it: Imagine a fancy dish cover that lifts up to reveal the meal when you get close. JavaScript can make elements appear, disappear, or change based on user actions.
Updating the meal dynamically:
Changing the quantity of rice: If you click a "+" button next to the rice, JavaScript can update the displayed amount without reloading the whole page.
Getting daily specials from the kitchen: JavaScript can fetch new information (like today's soup special) from a "server" (the kitchen backend) and display it on your "menu" (website) without you having to ask explicitly.
Adding special effects:

-A sizzling sound effect when the steak is served: JavaScript can play sounds or create animations to enhance the user experience.

A countdown timer until the next course is ready: JavaScript can manage time-based events.
Let's look at an example for our "Order Again" button:

<div class="meal-plate-example">
    <h1>Grilled Chicken</h1>
    <p>Served with fluffy rice and steamed broccoli. A perfect healthy meal for any time of the day!</p>
    <img src="/brocoli.jpg" alt="A plate of grilled chicken and broccoli">
    <button id="orderButtonExample">Order Again</button>
 <p id="messageExample" style="color: green; font-weight: bold;"></p>
</div>

const orderButtonExample = document.getElementById('orderButtonExample');
const messageExample = document.getElementById('messageExample');

orderButtonExample.addEventListener('click', function() {
    messageExample.textContent = "Your order has been placed! Enjoy your meal!";
    orderButtonExample.disabled = true;
    orderButtonExample.style.backgroundColor = 'gray';
});

In this JavaScript example:

We select the "Order Again" button and a new paragraph for messages.
We listen for a click event on the button.
When a click happens, a function is executed that changes the text in the message paragraph, simulating a successful order, and disables the button.
By mastering these "cooking techniques" (CSS properties), knowing when to use which "serving style" (@media queries), and understanding the "chef's actions" (JavaScript), you can build delicious, dynamic, and user-friendly websites that look fantastic and are easy to use, no matter what "eating environment" (device) your users are on!