DEV Community: Bala Murugan

React Unlocked: A Beginner’s Guide to Concepts, Tools & Modern Development

Bala Murugan — Fri, 17 Apr 2026 23:06:25 +0000

What is React?

React is a JavaScript library used to build user interfaces (UI), especially for single-page applications (SPA).

It was created by Facebook (Meta).

In simple words:
React helps you build fast and interactive websites like Instagram, Facebook, Netflix, etc.

Why use React?

React is popular because:

Fast performance (uses Virtual DOM)
Reusable components (write once, use anywhere) *Easy state management *Builds modern web apps easily
Huge community support

Example:

Instead of writing same button code again and again, React lets you create a Button component and reuse it everywhere.

What is Library and Framework?

Library:

*A library is a collection of pre-written code that you call when needed.

*You are in control.

Example:
React (UI library)
jQuery

*You decide when to use it.

Framework :

*A framework is a complete structure where the framework controls your code flow.

Framework is in control.

Example:
Angular
Django (Python framework)

         Difference between Library and Framework

Feature	Library	Framework
Control	You control	Framework controls
Flexibility	High	Less flexible
Usage	Specific task	Full application structure
Example	React	Angular

What is SPA ?

*SPA (Single Page Application)

 *A SPA loads only ONE HTML page and updates content dynamically.

Example:

Gmail
Facebook
Instagram

How it works:

*Page does NOT reload
*Only content changes
*Faster user experience

MPA (Multi Page Application)?

  A MPA loads a new page every time you click something.

Example:
Amazon
Traditional websites

How it works:

 *Every click loads a new HTML page
 *Full page refresh happens
 *Slower compared to SPA

              SPA vs MPA ?

Feature	SPA	MPA
Pages	One page	Multiple pages
Speed	Fast	Slower
Reload	No reload	Full reload
Example	React apps	Traditional websites

What is Create React App (CRA)?

   *Create React App (CRA) is a tool to set up a React project quickly.

Command:

npx create-react-app my-app

Problem:

Slow startup *Heavy build system *CRA is now less popular.

What is Vite?

*Vite is a modern build tool for React (and other frameworks).

*It is much faster than CRA.

Why Vite is popular:

*Very fast startup
*Instant hot reload
*Lightweight setup
*Better developer experience.

Command:

npm create vite@latest my-app

                       Learning Recap

*React = UI library for building web apps
*Library = you control flow
*Framework = full structure controls you
*SPA = single page, no reload
*MPA = multiple pages, reload happens
*CRA = old React setup tool
*Vite = modern, fast React tool

What is Node.js?

Node.js is a JavaScript runtime environment.

Node.js allows you to run JavaScript outside the browser (like in your computer terminal).

JavaScript runs only in the browser (Chrome, Firefox)

JavaScript can run on your system like Python or Java.

Why was Node.js created?

Before Node.js:

*JavaScript was only used for frontend (browser)

After Node.js:

*JavaScript can be used for backend, tools, servers, build systems.

Why Node.js is needed for React?

React does NOT run directly in the browser during development in raw form.

React code needs to be:

compiled
bundled
optimized

That’s where Node.js comes in.

      Main reasons Node.js is needed for React:

*Package Manager (npm / npx)

*Node.js comes with npm (Node Package Manager).

React needs npm to install libraries like:

react
react-dom
vite

Example:

npm install react

Without Node.js → no npm → no React setup.

Why Promises Are Better Than Callbacks

Bala Murugan — Sun, 29 Mar 2026 17:51:30 +0000

What is a Callback:

    A callback is a function that is passed as an argument to another function and executed later.

Example:

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

function sayBye() {
  console.log("Bye!");
}

greet("Bala", sayBye);

Output:

Hello Bala
Bye!

What is Callback Hell:

When callbacks are nested inside other callbacks many times, it becomes hard to read and maintain. This is called Callback Hell.

Example:

setTimeout(() => {
  console.log("Step 1");

  setTimeout(() => {
    console.log("Step 2");

    setTimeout(() => {
      console.log("Step 3");

      setTimeout(() => {
        console.log("Step 4");
      }, 1000);

    }, 1000);

  }, 1000);

}, 1000);

This code looks like a pyramid shape.
This is called Callback Hell or Pyramid of Doom.

Problems in Callback Hell:
*Hard to read
*Hard to debug
*Hard to maintain
*Error handling is difficult

What is a Promise:

A Promise is used to handle asynchronous operations in a better way.

A Promise has 3 states:

Pending
Resolved (Success)
Rejected (Error)

Promise Example:

let promise = new Promise(function(resolve, reject) {
  let success = true;

  if (success) {
    resolve("Task completed");
  } else {
    reject("Task failed");
  }
});

promise
  .then(function(result) {
    console.log(result);
  })
  .catch(function(error) {
    console.log(error);
  });

Callback Hell vs Promise:

Callback Hell	Promise
Nested callbacks	Chain using `.then()`
Hard to read	Easy to read
Hard to maintain	Easy to maintain
Error handling difficult	Error handling easy with `.catch()`

Promise States Diagram:

Draw a simple flow:

         [Pending]
       /   \
      /     \

[Resolved] Rejected (Error)

              Real-World Example Diagram:

Use a food order example

CallbackHell:

Order Food
↓
Prepare Food
↓
Pack Food
↓
Deliver Food

Promise:

Order → Prepare → Pack → Deliver

You can end your blog like this:

",Callback Hell makes code messy. Promises make code clean, readable, and easy to manage."

Behind the Scenes of JavaScript: Synchronous vs Asynchronous Explained Simply

Bala Murugan — Sat, 28 Mar 2026 05:38:07 +0000

What is Synchronous JavaScript

Synchronous means code runs line by line, one after another.
Next line waits until the previous line finishes.

Example:

console.log("Start");

function slowTask() {
  for (let i = 0; i < 1e9; i++) {} // takes time
  console.log("Task Done");
}

slowTask();
console.log("End");

Output:
Start
Task Done
End

Explanation:

Here, End waits until slowTask finishes. This is Synchronous.

What is Asynchronous JavaScript?

Asynchronous means code does NOT wait.
It runs tasks in background and continues next lines.

Example:

console.log("Start");

setTimeout(() => {
  console.log("Task Done");
}, 2000);

console.log("End");

Output:
Start
End
Task Done

Explanation:

Here, End does NOT wait → This is Asynchronous.

Why Asynchronous is Needed :

Because JavaScript is single-threaded (one task at a time).
Async helps to handle:

API calls
Database calls
File reading
Timers
User actions

Without async → Website will freeze.

Asynchronous Methods in JavaScript:

There are 3 main ways:

Method	Use
Callback	Old method
Promise	Better
Async/Await	Best & modern

Callback Example:

function fetchData(callback) {
  setTimeout(() => {
    console.log("Data fetched");
    callback();
  }, 2000);
}

fetchData(() => {
  console.log("Process data");
});

Async/Await Example (Best Method):

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 2000);
  });
}

async function getData() {
  let data = await fetchData();
  console.log(data);
}

getData();

Simple Difference Table

| Synchronous | Asynchronous |
| ----------------- | ------------------------ |
| Runs line by line | Runs in background |
| Waits | Does not wait |
| Blocking | Non-blocking |
| Slow | Fast |
| Example: for loop | Example: setTimeout, API |

Real Life Example

Synchronous:
*You stand in line and wait for tea → then go to next work.

Asynchronous:

   *You order tea → while tea is preparing, you do another work → then drink tea.

Event Loop Diagram

      ┌───────────────┐
    │   Call Stack   │
    └───────────────┘
            ↑
            │
    ┌───────────────┐
    │   Event Loop   │
    └───────────────┘
            ↑
            │
    ┌───────────────┐
    │ Callback Queue │
    └───────────────┘
            ↑
            │
    ┌───────────────┐
    │   Web APIs     │
    │ setTimeout     │
    │ API Calls      │
    │ DOM Events     │
    └───────────────┘

Explanation:

*Call Stack → Executes code
*Web APIs → Handle async work
*Callback Queue → Stores completed async tasks
*Event Loop → Moves task to Call Stack

JavaScript Closures Explained Simply with Examples

Bala Murugan — Fri, 27 Mar 2026 05:48:54 +0000

What is a Closure:

 A closure is a function that remembers the variables from its outer function even after the outer function has finished executing.

example:

function outer() {
  let name = "Bala";

  function inner() {
    console.log(name);
  }

  return inner;
}

const myFunction = outer();
myFunction();

Output:
Bala

step by step Explanation:
1.outer() function runs
2.Variable name is created
3.inner() function is returned
4.Even after outer() finishes, inner() still remembers name
5.This is called closure

       **Why Do We Use Closures in JavaScript**

Data privacy *To remember values *To avoid global variables *To maintain state *For callbacks and timers

Data Privacy (Real-World Example: Password):

We use closures to hide private data.

function createPassword() {
  let password = "12345";

  return function() {
    console.log(password);
  };
}

const getPassword = createPassword();
getPassword(); // 12345

Maintaining State (Real-World Example: Counter)

 Closures help to remember previous value.

function counter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const c = counter();
c(); // 1
c(); // 2
c(); // 3

Used in setTimeout / Callbacks

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

greet("Bala");

       **How Closure Works (Lexical Scope)**

What is Lexical Scope

 A function can access variables from its parent (outer) function based on where the function is written in the code.

simple:

 * Inner function → can access outer variables.

 * Outer function → cannot access inner variables.

Example : Lexical Scope?

function outer() {
  let name = "Bala";

  function inner() {
    console.log(name);
  }

  inner();
}

outer();

Merits of Closures

*Data privacy

State management *Avoid global variables *Used in callbacks *Used in real-world applications

Learning HTML & CSS Portfolio Header Part

Bala Murugan — Tue, 06 Jan 2026 19:50:28 +0000

*Portfolio Webpage *

  This HTML page is a basic portfolio website structure.

 A portfolio website is used to show your personal details, skills, and projects in one place.

This page uses HTML for structure and CSS for styling.

<!DOCTYPE html>

portFolio

<br>
*{<br>
padding: 0;<br>
margin: 0<br>
}<br>
h1 {<br>
text-align: center;<br>
color: white;<br>
margin: 0 0 10px 0;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> nav{

    text-align: center;
  }
  header{
    background-color: black;
    padding: 20px;

  }
  a{
    color: white;
    text-decoration: none;
    margin-right: 10px;
  }

</style>
</code></pre></div>
<p></head></p>

<p><body><br>
<header><br>
<h1>BalaMurugan</h1><br>
<nav> <br>
<a href="">About Me</a><br>
<a href="">Projects</a><br>
<a href="">contact</a><br>
<a href="">Login page</a><br>
</nav><br>
</header></p>
<div class="highlight"><pre class="highlight plaintext"><code><section class="about">

</section>
<section class="project">

</section>
<section class="contact">

</section>

</footer>
</code></pre></div>
<p></body></p>

<p>*<em>HTML Structure</em></p>
<div class="highlight"><pre class="highlight plaintext"><code> HTML is used to create the structure of the webpage.

The page starts with <!DOCTYPE html> which tells the browser that this is an HTML5 document.

The <html> tag wraps the entire page. Inside it, there are two main parts

          &amp;lt;head&amp;gt; and &amp;lt;body&amp;gt;.

</code></pre></div>
<p><strong>Head Section</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code> <head> ---> The section contains important information about the page.
</code></pre></div>
<p><meta charset="UTF-8"> <br>
Allows the page to support all characters.</p>

<p><meta name="viewport"><br>
makes the page responsive on mobile devices.</p>

<p><title><br>
sets the page title shown in the browser tab as portFolio.</p>

<p><style> </p>
<div class="highlight"><pre class="highlight plaintext"><code> contains internal CSS used to design the page.
</code></pre></div>
<p><strong>What is href ?</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code>href means Hypertext Reference.

It tells the browser where the link should go when the user clicks it.
</code></pre></div>
<p><strong>Syntax</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code> <a href="link">Link Text</a>
</code></pre></div>
<p><a> → Anchor tag</p>

<p>href → Destination address</p>

<p>Link Text → Text shown on the webpage </p>
<div class="highlight"><pre class="highlight plaintext"><code> Css overveiw
</code></pre></div>
<p>1*<em>.Inline Css:</em>*</p>
<div class="highlight"><pre class="highlight plaintext"><code> Inline CSS is a way to apply CSS styles directly inside an HTML tag.

The style is written using the style attribute.

Inline CSS affects only one element and is used for quick styling.
</code></pre></div>
<p>syntax :<br>
<p style="color: red;">This is a red paragraph</p></p>

<p>Example:</p>

<p>style → attribute used for CSS</p>

<p>color → CSS property</p>

<p>red → value</p>

<p>Internal CSS</p>
<div class="highlight"><pre class="highlight plaintext"><code> Internal CSS is used to style a webpage by writing CSS code inside the <style> tag, which is placed inside the <head> section of an HTML file.

 Internal CSS is useful when you want to apply styles to one single webpage.

</code></pre></div>
<p><strong>Internal CSS Syntax</strong></p>
<div class="highlight"><pre class="highlight plaintext"><code>selector {
property: value;
</code></pre></div>
<p>}</p>

<p>Internal css with example class </p>

<p>CSS Styling</p>
<div class="highlight"><pre class="highlight plaintext"><code> CSS is used to make the page look good.
</code></pre></div>
<ul>
<li>{ padding: 0; margin: 0; }
removes default spacing from all elements.</li>
</ul>

<p><h1></p>
<div class="highlight"><pre class="highlight plaintext"><code>Is centered, colored white, and given some bottom margin.
</code></pre></div>
<p>header has a black background and padding to create space.</p>

<p><nav></p>
<div class="highlight"><pre class="highlight plaintext"><code> A ligns links to the center.

a styles the links with white color, no underline, and spacing between them.
</code></pre></div>

Learning HTML & CSS Portfolio Header Part

Bala Murugan — Tue, 06 Jan 2026 19:40:02 +0000

*Portfolio Webpage *

 This HTML page is a basic portfolio website structure.

A portfolio website is used to show your personal details, skills, and projects in one place.

This page uses HTML for structure and CSS for styling.

code:

<!DOCTYPE html>

Portfolio

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    header {
        background-color: black;
        padding: 20px;
    }

    h1 {
        color: white;
        text-align: center;
        margin-bottom: 10px;
    }

    nav {
        text-align: center;
    }

    nav a {
        color: white;
        text-decoration: none;
        margin: 0 15px;   /* proper spacing */
        font-size: 16px;
    }

    nav a:hover {
        text-decoration: underline;
    }

    section {
        padding: 40px;
        text-align: center;
    }

    .about {
        background-color: #f2f2f2;
    }

    .project {
        background-color: #e0e0e0;
    }

    .contact {
        background-color: #d0d0d0;
    }

    footer {
        background-color: black;
        color: white;
        text-align: center;
        padding: 15px;
    }
</style>

<header>
    <h1>BalaMurugan</h1>
    <nav>
        <a href="#">About Me</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
        <a href="#">Login Page</a>
    </nav>
</header>

<section class="about">
    <h2>About Me</h2>
    <p>This section is for personal details.</p>
</section>

<section class="project">
    <h2>Projects</h2>
    <p>This section will show my projects.</p>
</section>

<section class="contact">
    <h2>Contact</h2>
    <p>This section contains contact information.</p>
</section>

<footer>
    <p>© 2026 BalaMurugan</p>
</footer>

*HTML Structure

 HTML is used to create the structure of the webpage.

 The page starts with <!DOCTYPE html> which tells the browser that this is an HTML5 document.

   The <html> tag wraps the entire page. Inside it, there are two main parts

              <head> and <body>.

Head Section

 <head> ---> The section contains important information about the page.

Allows the page to support all characters.

makes the page responsive on mobile devices.

sets the page title shown in the browser tab as portFolio. contains internal CSS used to design the page. **What is href ?** href means Hypertext Reference. It tells the browser where the link should go when the user clicks it. **Syntax** <a href="link">Link Text</a> <a> → Anchor tag href → Destination address Link Text → Text shown on the webpage Section Elements • <section class="about"> For personal information. • <section class="project"> To show projects. • <section class="contact"> For contact details. **Css overveiw** 1**.Inline Css:** Inline CSS is a way to apply CSS styles directly inside an HTML tag. The style is written using the style attribute. Inline CSS affects only one element and is used for quick styling. syntax : <p style="color: red;">This is a red paragraph</p> Example: <p> → HTML tag style → attribute used for CSS color → CSS property red → value Internal CSS Internal CSS is used to style a webpage by writing CSS code inside the <style> tag, which is placed inside the <head> section of an HTML file. Internal CSS is useful when you want to apply styles to one single webpage. **Internal CSS Syntax** selector { property: value; } **Internal css with example class ** <style> .box { background-color: lightgray; padding: 15px; text-align: center; } Hello World

*Internal CSS with ID Example
*

<br> #title {<br> color: green;<br> text-align: center;<br> }<br>

Internal CSS Title

What is External CSS (to be discussed)

 External CSS is used to style a webpage by writing CSS code in a separate .css file.

 This CSS file is then linked to the HTML file.

External CSS is best for real websites and multiple pages.

*syntax
*

body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}

h1 {
color: darkblue;
text-align: center;
}

p {
color: black;
font-size: 16px;
}

CSS Styling

    CSS is used to make the page look good.

{ padding: 0; margin: 0; } removes default spacing from all elements.

Is centered, colored white, and given some bottom margin.

header has a black background and padding to create space.

     A ligns links to the center.

 a styles the links with white color, no underline, and spacing between them.

Getting started with gitlab

Bala Murugan — Tue, 06 Jan 2026 18:34:19 +0000

what is git

   Git is a distributed version control system used to track changes in source code during software development.

   It allows multiple developers to work on the same projec.

    complete history of changes, and helps manage different versions of code efficiently.

version control system

    A Version Control System (VCS) is a tool that tracks and manages changes to files over time.

     Allowing users to view history, revert to previous versions.

Types of version controlsystem :

   1.local version control system:

             stores version on one computer

   2.centralized  version control system :

        centralized version control system stores all versions 
    files.

        one central server accessed by multiple users.

      ex : SVN

  3.Distributed version control system:

          A Distributed Version Control System is a system where each developer has a complete copy of the repository, including the full version history, on their local machine.

      Ex : Git

what is Gitlab

  GitLab is a web-based DevOps platform that uses Git for version control and provides tools to manage the entire software development lifecycle.

   Including code hosting, collaboration, CI/CD, and project management.

*How to push file in Gitlab *

 step 1 :

     cd extension file
 step 2:

       Git init
     #check git status
 Step 3:

       Git add filename
       Git add . ----> all files

Step 4:

    Git commit - m "message"
step 5:

    git push

what is repositery

 A repositery is a storage location  stores to source code files and folders.

  supporting and collabration to the developers

  history of changes

HOSTING :

Hosting provides server space and resources to make a website or application available online. 

They can be accessed over the internet.

local hosting

    Local hosting is the process of running a website or application on a local computer instead of an internet server.

    It is used to development, testing, and learning purposes.

hostig tools: XAMPP , WAMP, MAMP

SERVER

   A server is a computer or system that provides resources, data, or services .

 request respose model and  handle the client requests.

EX : webserver, fileserver, databaserver, application server.

Getting started with gitlab

Bala Murugan — Sat, 03 Jan 2026 19:42:05 +0000

what is git

   Git is a distributed version control system used to track changes in source code during software development.

   It allows multiple developers to work on the same projec.

    complete history of changes, and helps manage different versions of code efficiently.

version control system

    A Version Control System (VCS) is a tool that tracks and manages changes to files over time.

     Allowing users to view history, revert to previous versions.

Types of version controlsystem :

   1.local version control system:

             stores version on one computer

   2.centralized  version control system :

        centralized version control system stores all versions 
    files.

        one central server accessed by multiple users.

      ex : SVN

  3.Distributed version control system:

          A Distributed Version Control System is a system where each developer has a complete copy of the repository, including the full version history, on their local machine.

      Ex : Git

what is Gitlab

  GitLab is a web-based DevOps platform that uses Git for version control and provides tools to manage the entire software development lifecycle.

   Including code hosting, collaboration, CI/CD, and project management.

*How to push file in Gitlab *

 step 1 :

     cd extension file
 step 2:

       Git init
     #check git status
 Step 3:

       Git add filename
       Git add . ----> all files

Step 4:

    Git commit - m "message"
step 5:

    git push

what is repositery

 A repositery is a storage location  stores to source code files and folders.

  supporting and collabration to the developers

  history of changes

HOSTING :

Hosting provides server space and resources to make a website or application available online. 

They can be accessed over the internet.

local hosting

    Local hosting is the process of running a website or application on a local computer instead of an internet server.

    It is used to development, testing, and learning purposes.

hostig tools: XAMPP , WAMP, MAMP

SERVER

   A server is a computer or system that provides resources, data, or services .

 request respose model and  handle the client requests.

EX : webserver, fileserver, databaserver, application server.

Frontend Getting with HTML

Bala Murugan — Sat, 03 Jan 2026 08:49:28 +0000

HTML - Hypertext markup language

What is Html ?

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of content on the web using elements like headings, paragraphs, images, links, tables, and forms.

It is not a programming language.

It forms the foundation of web development

Why do we use HTml ?

  * structured web content
  * Enable link between pages
  * Build to web app and application

Markup language
A markup language is a system used to annotate or structure text by using tags so that computers can understand how the content should be displayed or processed

 but it does not perform logic like a programming language.

Types of markup language

 1.Presentational Markup Language ...>  HTML (older versions)
 2.Procedural Markup Language   .....>  TeX, PostScript
 3.Descriptive (Semantic) Markup Language...> HTML5, XML, SGML

Referance : https://developer.mozilla.org/en-US/docs/Web/HTML