DEV Community: Ranjani R

A DAY IN MY LIFE

Ranjani R — Sun, 24 Aug 2025 06:46:27 +0000

My day typically goes on like this:

I wake up in the morning and get ready for the REACT class which starts at 6:00 am and ends at 7:30 am. After that I wake up the kids and get them ready for school...preparing breakfast snacks bathing them etc and drop them at school by 9:30 am. Then I come home and have my breakfast and do some household stuff. At around 10:30 am or 11:00 am (depending on the work) I start practicing JS or write blog till around 12:00 pm post which I get up to prepare lunch for my elder kid and then leave the lunch at school and bring home my younger kid.
Then it is lunch time so after all that is over around 2:00pm I again sit down for some coding practice. At 3:00 pm I go to pick up my elder kid and after that I will have around 1 more hour time for coding till my younger kid wakes up post which I become busy with household work and helping the elder kid with schoolwork. Then it becomes dinnertime and then at around 10:00 pm the kids go to sleep post which I become tired to do anymore coding work and also go to sleep.
This is my schedule for weekdays....on weekends I get some more time in the evening for practice and some time in the night (around 4 hours in total) since it is a holiday.

REACT-useContext Hook

Ranjani R — Fri, 22 Aug 2025 09:07:48 +0000

Today I will explain about the useContext hook in react which helps avoid prop drilling(reusing of state variables in deeply nested components).

useContext is a React Hook that allows us to access values from a React Context directly inside your functional components. It’s part of React’s strategy to simplify state sharing across deeply nested components.

The main uses of this are:

Avoids Prop Drilling: No need to pass props through multiple layers.

Centralized State: Ideal for global data like themes, user authentication, or language settings.

Cleaner Code: Makes our component tree easier to manage and read.

Syntax:

import { createContext } from 'react';

const ThemeContext = createContext('light'); // 'light' is the default value

Wrap our app component in provider and give value

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click me</button>;
}

When the value passed to the Provider changes, all components using useContext will re-render automatically with the new value.

This is the way useContext works and this is very useful in the real world applications.

REACT-HOOKS

Ranjani R — Mon, 18 Aug 2025 05:29:33 +0000

Let's see about hooks in REACT today. Hooks are powerful tools in react for functional components that allows us to access the state,side effects,contexts,refs etc. They are basically special functions that allows us to hook into the functional components. The basic hooks are:

1.useState: useState lets us add reactive state to functional components. When the state changes, React re-renders the component with the new value. The syntax is:

const [state, setState] = useState(initialValue);

state: current value
setState: function to update the value
initialValue: starting value (number, string, object, array, etc.)

It is mainly used for:

Track selected filters, input values, toggle states
Dynamically update UI based on user interaction

2.useEffect: useEffect lets us run side effects after a component renders—like fetching data, setting up timers, or listening to events.The syntax is:

useEffect(() => {
  // side effect logic
  return () => {
    // cleanup logic (optional)
  };
}, [dependencies]);

It runs after render
Re-runs when dependencies change
Cleanup runs before next effect or on unmount

It is useful for:

Fetch and render product data dynamically
Sync UI with external sources
Clean up timers, listeners, or subscriptions

3.useRef: useRef creates a mutable reference that persists across renders without causing re-renders. It’s great for accessing DOM elements or storing values that don’t need to trigger UI updates. The syntax is:

const ref = useRef(initialValue);

ref.current holds the value

const inputRef = useRef();

useEffect(() => {
inputRef.current.focus();
}, []);

return ;

It's useful for

Access DOM elements directly (e.g., scroll, focus)
Store timers, previous values, or flags
Avoid unnecessary re-renders when tracking values

REACT- FUNCTIONAL COMPONENT

Ranjani R — Tue, 12 Aug 2025 13:57:27 +0000

Today I am going to explain about Functional Components in REACT which is kind of the basic building block of a React App.

A functional component is simply a JavaScript Function that returns a JSX( React extension for JS describing UI). It's the modern and most preferred way for writing components since it uses Hooks which allows these components to manage states, changes, side effects etc.

The key characteristics of these are:

Stateless or Stateful: Originally used for stateless components, but now can manage state using Hooks.
Simpler Syntax: No need for class, this, or lifecycle methods.
Reusable: Can be composed and reused.
Pure Functions: Ideally, they behave like pure functions—given the same props, they return the same output.

The basic syntax is

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

//Arrow Function

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

//We can call the component like below:

<Greeting name="Ranjani" />

The main benefits of using these components are:

Simpler Syntax : Easier to read, write and maintain.

Hooks Support : Full access to state, effects, context, etc.

Performance: Faster due to less overhead(memory usage, complexity, execution time).

Encourages Best Practices: Promotes pure functions and separation of concerns.

So we can use functional components when we need:

UI elements
Reusable widgets
Pages and layouts
Dynamic components with state and effect

That's all regarding functional components. See you all in the next post!

INSTALLING NODE.JS

Ranjani R — Fri, 08 Aug 2025 05:57:06 +0000

Today i am going to tell the steps involved in installing Node.js

Node.js is a free, open-source, cross-platform JavaScript runtime environment that lets you run JavaScript outside the browser—primarily on servers.

Here are the steps involved in downloading and installing:

Go to the official Node.js download page - https://nodejs.org/en/download
Choose the LTS version (Long-Term Support) for stability.
Download the .msi installer for Windows (32-bit or 64-bit depending on our system).
Double-click the downloaded .msi file.
- Follow the setup wizard:
- Accept the license agreement.
- Use the default installation settings.
- Ensure npm (Node Package Manager) is selected for installation.
Click Install and wait for the process to finish.
Click Finish when done.

Now in order to check if it has been installed correctly, open command prompt/powershell and type in the following command and press enter:
node -v
npm -v

It should display the version of node.js and npm installed. Once installed we need to create our very own REACT app.

1.Open Visual Studio and create a local folder with any name of your choice. Once created ,right click on the folder name and select Open in Integrated Terminal which will then open the terminal in your VS code and the path to your folder will be displayed.

2.Type in the command npx create-react-app folder name and press Enter. Note that the folder name should be only in small letters and no space. Once you press enter the you will be asked a question:
_
Need to install the following packages:
create-react-app@5.1.0
Ok to proceed? (y) y_

Enter y and a new React app will start creating.....it might take sometime depending upon the network speed and RAM memory (typically 5-8mins).

3.Once the app is created we need to start the server. To do this type in npm start to start the server.

3.Once the app is created it will be visible under your folder structure. It will contain many folders and I will explain what each folder means and contains. The following will be the folder structure once the app is successfully created:

my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ ├── index.css
│ └── ...
├── .gitignore
├── package.json
├── README.md

node_modules:
- Contains all installed dependencies from npm.
- We don’t edit this manually.
- Automatically generated when we run npm install.

2.public:

Holds static files that don’t go through Webpack.
Key files:
index.html: The single HTML file React injects into.
favicon.ico, manifest.json: Icons and metadata for our page.
We can add images, fonts, or other assets here if we want them served directly.

3.src:

The heart of our React app—where all our code lives.
Key files:
index.js: Entry point. Renders into index.html.
App.js: Root component. You build our UI from here.
App.css, index.css: Styles for our components.

4.gitignore:

Tells Git which files/folders to ignore (e.g., node_modules).

package.json:
- Lists dependencies, scripts, and metadata.
- We can run commands like npm start, npm build from here.

6.README.md:

Documentation for our project. Helpful for collaborators or future us!.

These are the steps involved in installing and creating React app.

INTRODUCTION TO REACT

Ranjani R — Thu, 07 Aug 2025 05:53:04 +0000

Hi all today I will be giving a small intro about REACT.

REACT or React.js is an open-source Javascript library developed by Facebook. The term open-source means that it is available for free of cost and also that anyone can contribute to making any updates or changes in the library.

React is primarily used for building dynamic , interactive UI's especially for single-page applications.

React focuses on performance, scalability, and simplicity.

The core concepts of React are as follows:

Component-Based Architecture: UI is broken into reusable components (like functions).
JSX: (JavaScript XML) A syntax extension that lets you write HTML-like code inside JavaScript.
Props: Inputs passed to components to customize behavior.
State: Internal data that controls component behavior and rendering.
Hooks: Functions like useState and useEffect that manage state and lifecycle in functional components.

React works by creating a virtual DOM which is a light-weight copy of the real DOM. It first updates any changes made to the page in the virtual DOM and after comparison with the original DOM it makes only the necessary changes to the original DOM. In this way the rendering becomes more fast and efficient.

React also provides components that can be reused in order to improve the functionality of JS and also makes the code clean and easier to maintain.

JS-LOCAL STORAGE

Ranjani R — Wed, 06 Aug 2025 06:13:21 +0000

Today I am going to explain about Local Storage which is a powerful feature in web development which allows us to store user preferences UI states or temporary data without requiring a server.

*Local Storage is part of the Web Storage API, which provides a way to store key-value pairs in a web browser. Unlike cookies, it doesn’t get sent to the server with every request, and it offers more space (usually around 5MB per origin). *

The key characteristics of this are:

Persistent: Data stays even after the browser is closed.
Synchronous: Operations block the main thread
String-based: Only strings can be stored — we’ll need JSON.stringify() and JSON.parse() for objects or arrays.
Same-origin: Data is accessible only to pages from the same domain.

Here are the common Local Storage methods:

// Save data
localStorage.setItem('username', 'Ranjani');

// Retrieve data
const name = localStorage.getItem('username'); // "Ranjani"

// Remove specific item
localStorage.removeItem('username');

// Clear all local storage
localStorage.clear();

One main thing to remember is we should not use this to store sensitive data like passwords and tokens. The main reason for this is:

Any script running on the browser can have access to the data in Local Storage and hence there is risk of malicious scripts hacking the tokens.

2.Sensitive data is stored as plain text and not encrypted.

3.There is no expiry date for Local Storage unlike cookies and so these data might remain even after user logs out.

4.Tools like browser dev tools or extensions can read it without restriction.

Hence we can use this storage to save temporary user states, form inputs etc.

That's all about Local Storage....see you all in the next post.

JS-FETCH API

Ranjani R — Mon, 04 Aug 2025 10:11:30 +0000

Today I am going to discuss about the Fetch API which is the most powerful and modern way to handle HTML requests.

The Fetch API is a built-in JavaScript interface that allows you to make network requests similar to XMLHttpRequest, but with a cleaner, promise-based syntax. It’s widely used for fetching resources like JSON data from APIs, submitting form data, or uploading files.

It is mainly used because:

Replaces the more complex XML requests.
Uses Promises to make async operations which is more effective. 3.Works in both browser and worker contexts.

Syntax:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

The most common HTTP methods are

GET Retrieve data
POST Add new data to server
PUT Update existing data
DELETE Remove existing data from server

Fetch supports Cross-Origin Resource Sharing (CORS), allowing requests to external domains if the server permits it.

That's all about the Fetch API....see you all in the next post.

JS-CALLBACK FUNCTIONS

Ranjani R — Sat, 02 Aug 2025 12:38:18 +0000

Hello all...today I will be telling about callback functions in Javascript. A callback function is a function which is passed as an argument to another function and is executed once the parent function completes its execution. This is especially useful for asynchronous operations like API calls , timers or event handling. The reason why we use callback functions is because:

They allow asynchronous behaviour in a single-threaded language (meaning the code is executed line by line and only after the current line is executed ,the next line starts executing).

2.They're essential for tasks like loading data, handling user input, or animations.

Example:
function greetUser(name, callback) {
  console.log("Hello, " + name + "!");
  callback(); // Call the function passed in
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greetUser("Ranjani", sayGoodbye);

//Output
Hello, Ranjani!
Goodbye!

Next let's talk about Callback Hell also known as Pyramid of Doom. Callback hell happens when callbacks are nested within callbacks, creating deeply indented, hard-to-read code. This often occurs when multiple asynchronous tasks depend on each other. The problems with callback hell are

Poor readability and maintainability
Difficult to Debug
Inversion of control (we lose control over the flow of the program).

Example:

function task1(callback) {
  setTimeout(() => {
    console.log("Task 1 completed");
    callback();
  }, 1000);
}

function task2(callback) {
  setTimeout(() => {
    console.log("Task 2 completed");
    callback();
  }, 1000);
}

function task3(callback) {
  setTimeout(() => {
    console.log("Task 3 completed");
    callback();
  }, 1000);
}

// Nested callbacks — the pyramid begins
task1(() => {
  task2(() => {
    task3(() => {
      console.log("All tasks completed");
    });
  });
});

Output:
Task 1 completed
Task 2 completed
Task 3 completed
All tasks completed

In the above code, it becomes really hard to follow due to deep nesting of elements, errors are hard to find and correct and also adding or modifying logic becomes very difficult. Hence in order to avoid this type of scenarios we go for a modern solution known as Promises.

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. It helps flatten nested callbacks and makes code more readable. It has the following states and methods:

- Pending: Initial state
- Fulfilled: Operation completed successfully
- Rejected: Operation failed

- .then() — handles success
- .catch() — handles errors
- .finally() — runs regardless of outcome

So that's it about callbacks, callback hell and promises. Will talk in more detail about promises in the next post.

JAVASCRIPT-LOCAL STORAGE

Ranjani R — Thu, 24 Jul 2025 10:28:05 +0000

Today I will explain about localStorage in JS which is used to store data from our web page in the user's browsers.

LocalStorage is a powerful feature in web development that lets us store data persistently in the user's browser. It's especially useful for frontend projects where we want to remember user preferences, save form inputs, or cache data without needing a backend.

In order to use LocalStorage we can follow the below steps:

//Save data
localStorage.setItem('username', 'Ranjani');

// Retrieve data
const name = localStorage.getItem('username'); // "Ranjani"

//Remove a specific item
localStorage.removeItem('username');

// Clear all data
localStorage.clear();

We can use Local Storage in the following situations:

Saving theme preferences (light/dark mode)
Storing form data temporarily
Caching API responses for faster reloads
Keeping user settings across sessions
Building offline-friendly experiences

That's all for today...see you all in the next post!

JavaScript-DOM Events

Ranjani R — Wed, 23 Jul 2025 10:15:57 +0000

Today I am going to talk about the common events that occur in a DOM. First of all what is an event?

_DOM events are signals that something has happened in the browser—like a user clicking a button, typing in a field, or scrolling the page. JavaScript can listen for these events and respond with custom behaviour.
_

These are the key aspects of a DOM event

- Event: A specific action (e.g. click, scroll, keydown, mouseover)
- Event Listener: A function that waits for an event and runs code when it happens
- Event Target: The element that triggered the event
- Event Object:Contains details about the event (e.g. mouse position, key pressed)

Some Form related events are :
submit: Form is submitted
change: Input value changes(after blur)
input:Input value changes (live)
focus:Element gains focus
blur: Elements loses focus
reset:Form is reset

So these are the commonly occuring DOM events and we can use these to make our webpage more enhancing and interactive.

JavaScript DOM

Ranjani R — Tue, 22 Jul 2025 05:28:30 +0000

Hi all good morning. Today I am going to give a short explanation on the DOM element in HTML which helps JavaScript to access the elements of HTML page and modify,delete,etc dynamically.
First of all what is a DOM🤔? The answer to that is here:
The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The above is the official definition of a DOM. In other words a HTML DOM is a standard for how to change , access , add or delete HTML elements.

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

JavaScript can change all the HTML elements in the page.
JavaScript can change all the HTML attributes in the page.
JavaScript can change all the CSS styles in the page.
JavaScript can remove existing HTML elements and attributes.
JavaScript can add new HTML elements and attributes.
JavaScript can react to all existing HTML events in the page.
JavaScript can create new HTML events in the page.

In the DOM tree the entire content present in the HTML page is broken up into nodes and each node represents a particular element of the page.

We can perform the above actions using the following commands:


- Select elements: document.querySelector('h1')
- Change content: element.textContent = "Hello!"
- Modify styles: element.style.color = "blue"
- Handle events: element.addEventListener('click', ...)
- Create/remove elements: document.createElement('div'), element.remove()

Apart from the above uses, the DOM is a very important part of web development because it helps major frameworks like React , Vue and Angular to handle elements in real time.

So that's all about DOM.....hope this post has been useful. See you all in the next post.

Reference: w3schools.com