DEV Community: Narasimma Radhakrishnan

Here Is my New upcomming project Movie Explorer:

Narasimma Radhakrishnan — Mon, 02 Nov 2026 08:52:28 +0000

import { useState, useEffect } from "react";
import axios from "axios";
import "./Api_fetching.css";

function Api_fetching() {
// FIXED: Initialize with an empty array so .map() doesn't break or render an empty card on load
const [product, setProduct] = useState([]);

// Integrated useEffect to load data automatically when the component mounts
useEffect(() => {
axios.get("https://jsonfakery.com/movies/paginated")
.then((res) => {
// Safe access: uses optional chaining and fallback to prevent empty array crashes
setProduct(res.data?.data || []);
console.log(res);
})
.catch((err) => console.error("Error fetching movies:", err));
}, []); // Empty dependency array ensures this runs exactly once on page load

return (

Movie Explorer

  <div className="movie-container">
    {product.map((s) => (
      <div className="movie-card" key={s.id}>
        <img
          src={s.poster_path}
          alt={s.original_title}
          className="movie-image"
        />

        <div className="movie-details">
          <h2>{s.original_title}</h2>
          <p>
            <b>Overview:</b> {s.overview}
          </p>
          <p>
            <b>Release Date:</b> {s.release_date}
          </p>
          <p>
            <b>Rating:</b> {s.vote_average} ★
          </p>
        </div>
      </div>
    ))}
  </div>
</div>

);
}

export default Api_fetching;

JSX in React – What and Why?

Narasimma Radhakrishnan — Sat, 31 Oct 2026 05:14:21 +0000

JSX stands for JavaScript XML.

JSX is a syntax extension used in React that allows us to write HTML-like code inside JavaScript.

In simple words, JSX helps us write UI elements using HTML-like syntax inside JavaScript.

What is JSX? Without JSX, we create UI elements using JavaScript's React.createElement() method.

Without JSX:

import React from "react";

function App() {
  return React.createElement(
    "h1",
    null,
    "Hello World"
  );
}

export default App;

With JSX:

function App() {
  return <h1>Hello World</h1>;
}

export default App;

Both produce the same UI.

Easy to understand
JSX makes React code cleaner and easier to read.

Why do we use JSX? Imagine you are developing an e-commerce website.

You need:

Navigation bar
Product cards
Search bar
Add to cart button
Footer If you use only JavaScript methods like React.createElement(), creating complex UI structures becomes difficult to read.

JSX makes this easier.

Main advantages:

Easy to write HTML-like UI inside JavaScript.
Makes code readable and maintainable.
Supports JavaScript expressions.
Helps create reusable React components.
Makes dynamic UI development easier.

Movie Explorer using Axios fetching API:

Narasimma Radhakrishnan — Fri, 30 Oct 2026 05:46:55 +0000

import { useState } from "react";
import axios from "axios";
import "./Api_fetching.css";

function Api_fetching() {
const [product, setProduct] = useState([""]);
function fetchData(){
axios.get("https://jsonfakery.com/movies/paginated")
.then((res) => {
setProduct(res.data.data);
console.log(res);
});
}

return (

Movie Explorer

  <button onClick={fetchData}>Fetch Movies</button>

  <div className="movie-container">
    {product.map((s, index) => (
      <div className="movie-card" key={s.id || index}>
        <img
          src={s.poster_path}
          alt={s.original_title}
          className="movie-image"
        />

        <div className="movie-details">
          <h2>{s.original_title}</h2>

          <p>
            <b>Overview:</b> {s.overview}
          </p>

          <p>
            <b>Release Date:</b> {s.release_date}
          </p>

          <p>
            <b>Rating:</b> {s.vote_average}
          </p>
        </div>
      </div>
    ))}
  </div>
</div>

);
}

export default Api_fetching;

why python???

Narasimma Radhakrishnan — Sat, 24 Oct 2026 15:41:11 +0000

Python is the world's most popular programming language because it combines human-like readability with extreme versatility across modern tech industries. Originally created by Guido van Rossum in 1991, it was designed to strip away the complex syntax of older languages, allowing developers to write clean, logical code with fewer lines.

React Hooks Explained Simply ⚛️

Narasimma Radhakrishnan — Fri, 23 Oct 2026 05:30:47 +0000

React Hooks are one of the most important concepts in React. They help us use features like state and lifecycle behavior inside functional components.

Let's understand React Hooks in simple terms! 🚀

🔹 What Are React Hooks?

React Hooks are special functions that allow functional components to use React features such as state, context, and effects.

Before Hooks were introduced in React 16.8, state and lifecycle methods were mainly associated with class components.

🔹 Common React Hooks

useState()

useState() is used to store and update data inside a component.

Example:

import { useState } from "react";

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

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

export default Counter;

Explanation:

count stores the current value.

setCount updates the value.

useState(0) sets the initial value to 0.

Whenever the button is clicked, the count increases by one!

The Ultimate Guide to HTML Meta Tags: Boost Your SEO and Social Presence

Narasimma Radhakrishnan — Thu, 22 Oct 2026 05:57:00 +0000

When building a website, it’s easy to focus entirely on what users see on the screen—the headings, images, and layout. But some of the most critical elements of your webpage are invisible to your users.
Welcome to the world of HTML meta tags. These hidden lines of code live in the background of every webpage, acting as a direct communication channel to search engines, browsers, and social media platforms.
If you want your website to rank higher on Google, look professional when shared on social media, and fit perfectly on mobile screens, mastering meta tags is non-negotiable. Let’s break down exactly what they are and how to use them.

Closure in JavaScript

Narasimma Radhakrishnan — Wed, 21 Oct 2026 05:19:16 +0000

closure is same as Encapsulation java.
Global variables can be made local (private) with closures.

 function bank(){
            let balance=500;

            const service={
                deposit : function(amt){
                    balance+=amt;
                    console.log(balance);
                },
                withdraw : function(amt){
                    balance-=amt;
                    console.log(balance);
                },
                viewbalance : function(){
                    console.log(balance);
                }
            }

            return service;
        }
        const person1= bank();
        person1.deposit(1000);
        const person2=bank();
        person2.withdraw(3000);
        const person3=bank();
        person3.viewbalance();

output:

1500
-2500
500

Async and await in JavaScript....?

Narasimma Radhakrishnan — Wed, 21 Oct 2026 04:13:37 +0000

Async and await are the JavaScript keywords used to create a asynchronous function or code. Its mainly for clean code, better readability and reusability.

1.Async keyword:
It is used to declare the await keyword used in the async function.
And the function will always return the Promise. if the function returns like string or value it converts or wraps into an resolved promise.

async function greet() {
return "Hello!";
}

2.Await keyword:
This keyword is only used inside async function.
it pauses the function execution until the promise settles(resolve, reject).

Event Listener in JavaScript?

Narasimma Radhakrishnan — Tue, 20 Oct 2026 13:06:20 +0000

An event listener in JavaScript is used to execute a function when an event happens, such as clicking a button, typing in an input, or moving the mouse.

Simple example click me

let button = document.getelementbyId("btn");
button.addEventListener("click", function(){
console.log("hello world");
});

Common event listeners
- Event When it happens
- click User clicks an element
- mouseover Mouse moves over an element
- mouseout Mouse leaves an element
- input Input value changes
- change A value is changed and committed
- keydown User presses a keyboard key
- submit A form is submitted

Synchronous vs Asynchronous vs Promise in JavaScript 🚀

Narasimma Radhakrishnan — Thu, 15 Oct 2026 06:00:24 +0000

What is Synchronous JavaScript?

Synchronous means one task executes at a time, in order. The next task waits until the current task finishes.

console.log("First");
console.log("Second");
console.log("Third");

Output:

First
Second
Third

Each statement executes in order.

Real-life example: Standing in a queue. One person finishes before the next person is served.

What is Asynchronous JavaScript?

Asynchronous operations allow JavaScript to continue doing other work while waiting for certain tasks to finish.

console.log("First");

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

console.log("Third");

Output:

First
Third
Second

Why? setTimeout() schedules the callback to run later, so JavaScript continues with the next statement first.

What is a Promise?

A Promise is a JavaScript object that represents the eventual success or failure of an asynchronous operation.

A Promise has three states:

Pending – Still waiting.

Fulfilled – Completed successfully.

Rejected – Failed.

Example:

let myPromise = new Promise((resolve, reject) => {
  resolve("Task completed!");
});

myPromise.then((result) => {
  console.log(result);
});

Output:

Task completed!

LocalStorage in JavaScript for Beginners 💾

Narasimma Radhakrishnan — Wed, 14 Oct 2026 14:09:13 +0000

When I started learning JavaScript, I learned how to store data in variables. But I had one question: What happens to the data when we refresh the webpage?

Normally, data stored only in variables is lost when the page reloads. That's where localStorage becomes useful!

What is LocalStorage?

localStorage is a browser feature that allows us to store data in the user's browser.

The best part? The data stays saved even after refreshing or closing the browser, until it is removed by the user or the application.

Store Data Using setItem()

We can save data using localStorage.setItem().

localStorage.setItem("name", "Narasimma");

Here:

"name" is the key.

"Narasimma" is the value.

Get Data Using getItem()

We can retrieve the saved data using getItem().

let name = localStorage.getItem("name");

console.log(name);

Output:

Narasimma

Remove Data Using removeItem()

Want to remove a particular item?

localStorage.removeItem("name");

This removes the data stored with the key "name".

Clear All Data Using clear()

localStorage.clear();

This removes all entries from the website's local storage. Use it carefully!

Store Objects and Arrays

One important thing to remember is that localStorage stores values as strings.

To store an object or array, we can use JSON.stringify().

let student = {
  name: "Arun",
  age: 21
};

localStorage.setItem("student", JSON.stringify(student));

To retrieve the object, use JSON.parse().

let data = JSON.parse(localStorage.getItem("student"));

console.log(data.name);

Output:

Arun

Where Can We Use LocalStorage?

Saving a user's theme preference

Remembering form data

Storing shopping cart information

Saving simple application settings

Building small projects without a backend

How to Prepare for an IT Interview: A Beginner's Guide 🚀

Narasimma Radhakrishnan — Mon, 12 Oct 2026 13:59:22 +0000

As a beginner preparing for IT interviews, I learned that preparation is not just about memorizing questions. It is about understanding concepts, solving problems, and explaining our thoughts clearly.

Here are the steps that can help every fresher prepare for an interview.

Understand the Job Description 📋

Before starting your preparation, read the job description carefully.

Understand:

Required technical skills

Programming languages

Tools and technologies

Responsibilities of the role

This helps you focus on the topics that matter most.

Learn the Fundamentals 💻

Build a strong foundation in the technologies required for your role.

For example, if you're preparing for a Java Full Stack Developer role, focus on:

Java fundamentals and OOP

HTML, CSS, and JavaScript

React basics

SQL and databases

REST APIs

Git and GitHub

Tip: Understand the concepts instead of memorizing answers.

Practice Coding Daily 🧠

Start with simple problems and gradually increase the difficulty.

Practice:

String manipulation

Arrays and loops

Sorting and searching

Functions and objects

Basic SQL queries

Even 30–60 minutes of daily practice can help you improve over time.

Prepare Your Projects 🛠️

Interviewers may ask questions about the projects mentioned in your resume.

Be ready to explain:

What problem does your project solve?

Which technologies did you use?

What was your role?

What challenges did you face?

How did you solve them?

Try to explain your project in simple words, as if you are teaching someone.

Practice Scenario-Based Questions 🎯

Some interviews test how you apply your knowledge in real situations rather than asking only theoretical questions.

For example:

Question: What would you do if an API returns an error?

A good approach is to:

Understand the error.

Reproduce the issue.

Check the request and response.

Investigate the cause.

Fix the problem.

Test the solution.

This approach helps demonstrate your problem-solving skills.

Prepare Your Self-Introduction 🗣️

Prepare a short introduction covering:

Your education

Your technical skills

Your projects

Your internship or practical experience

Your career goals

Practice speaking naturally instead of memorizing every word.

Research the Company 🏢

Before attending an interview, learn about:

The company's products and services

The job role

The technologies it uses, if publicly available

The interview process, if known

This helps you understand the opportunity better.

Learn from Every Interview 📈

Not every interview will go as expected, and that is okay.

After an interview, ask yourself:

Which questions did I answer well?

Which concepts were difficult?

What should I improve?

What will I prepare differently next time?

Every interview can become a learning opportunity.