Forem: Deva I

Basic about react components,Jsx rules, React folder structure

Deva I — Thu, 14 May 2026 14:27:28 +0000

React components :

◾Components are like functions that return HTML elements.

◾Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Key characteristics :

🔹Reusability: You can write a component once (e.g., a Button or Header) and use it multiple times throughout your application.

🔹Independent Logic: Each component manages its own logic, such as handling clicks or data.

🔹Composable: You can nest components inside other components to build complex interfaces from simple parts.

🔹Naming: component names must start with an uppercase letter to distinguish them from standard HTML tags.

🔹They are two types
1.class components
2.functional components

Class components :

▪️It is the older version and this not recommended for new projects.

functional components :

▪️Simple JavaScript functions that return JSX. They are the modern standard because they are easier to read and use Hooks to manage state.

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

Jsx rules :

◾JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe what the UI should look like.

◾It follows specific rules they are,

▪️Return a Single Root Element: A component must return only one top-level element.If you need to return multiple elements use <div> or a React Fragment (<>...</>)

▪️Close All Tags: Unlike HTML, every tag must be closed. This includes self-closing tags for elements without children, such as <img />, <br />, and <input />.

▪️Use camelCase for Attributes.
🔹UseclassNameinstead of class

🔹Use `htmlFor` instead of for

🔹Use event handlers like `onClick` instead of `onclick`

▪️Embed JavaScript with Curly Braces.

▪️Capitalize Component Names: React treats lowercase tags (like <div>) as built-in HTML elements. Custom components must start with a capital letter (e.g., <MyComponent />) to be recognized as React components.

React folder structure :

When you first create a project with tools like Vite or Create React App, the root directory contains:

🔹public/: Static assets like index.html, favicons, and the manifest.jsonfile.

🔹src/: The main development folder where all your React code lives.

🔹App.js: The root component of your application.

🔹index.js/main.jsx: The entry point that renders the React app into the DOM.

🔹node_modules/: Contains all installed project dependencies.

🔹package.json: Lists your project dependencies and scripts.

What is React and React build tools, Difference Between library vs frameworks.

Deva I — Wed, 13 May 2026 16:22:20 +0000

What is React :

React is a popular, open-source JavaScript library used for building user interfaces (UIs), specifically for single-page applications where data changes over time without reloading the page.

React developed and maintained by Meta (Facebook).

It is widely used for creating fast and scalable single-page applications (SPAs).

It allows developers to create large web applications that are fast, scalable, and simple.

What is Library :

A Library is a set of code that was previously written by a developer that you can call when you are building your project.

In Library, you import or call specific methods that you need for your project.

In simple words, a bunch of code packed together that can be used repeatedly is known as Library.

Reusability is one of the main reasons to use libraries.

Some common examples of libraries are;

▪️React

React is a JavaScript library for building user interfaces.

▪️Redux

Redux is an open-source JavaScript library for managing application state.
It's most commonly used with React

▪️Three.js

It's another super cool JavaScript library used to create and display 3d computer graphics.

▪️Lodash

Lodash is a JavaScript library that provides utility functions for common programming tasks.

It's more of a productivity kit in node.js

▪️jQuery

jQuery is a JavaScript library that does the things like event handling and HTML document manipulation

What is Framework :

A framework is a supporting structure that gives shape to your code.

In the Framework, you have to fill the structure accordingly with your code.

There is a specific structure for a particular framework that you have to follow, and it's generally more restrictive than Library.

One thing to remember here is that frameworks sometimes get quite large, so they may also use the Library.

But the Framework doesn't necessarily have to use Library.

Some common examples of frameworks are

▪️Angular

Angular is a JavaScript framework for web and mobile development.

▪️Django

Django is a fully featured server-side web framework written in
Python.

▪️Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

▪️Rails

Rails is a web application development framework written in the Ruby programming language.

▪️Spring

Spring Framework is an open-source framework for building web applications with Java as a programming language.

Key difference between library and frameworks :

The main key difference between the Library and Framework is something known as inversion of control.

Let's understand this inversion of control more in detail.

When you import a library, you have to call the specific methods or functions of your choice so, and it's up to you when and where to call the Library.

Here, you are in charge of flow.

On the other hand, Framework itself makes a call to your code and provide you with some space to write down details.

So, while using framework your framework is in charge of flow.

In Library, your code is going to call the Library whereas, in Framework, your code is being called by Framework.

What is Build tools in React Js:

Build tools in React.js are software utilities that automate the process of transforming your raw development code into a optimized, production-ready application.

Because browsers cannot natively understand the JSX, TypeScript, or modern ES6+ JavaScript these tools bridge the gap by "building" the code into standard JavaScript, HTML, and CSS.

Popular build tools in React :

🔹Vite
🔹Webpack
🔹Parcel
🔹Rollup
🔹Rsbuild
🔹Turbopack

Vite

Currently the most popular choice.

Vite is a modern frontend build tool designed to provide a significantly faster and leaner development experience for web projects.

Closure

Deva I — Wed, 06 May 2026 12:20:20 +0000

Definition of Closure :

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

Example Program :

Output :

To Do List Project Using Html,Css and Javascript

Deva I — Wed, 06 May 2026 07:47:59 +0000

HTML CODE :

JAVASCRIPT :

CSS :

OUTPUT :

DOM Exercises

Deva I — Wed, 29 Apr 2026 06:42:46 +0000

Change text :

OUTPUT:

ON/OFF Toggle button :

OUTPUT:

Count increment, decrement and reset :

OUTPUT:

Commonly asked interview questions about DOM in Javascript

Deva I — Tue, 28 Apr 2026 05:45:05 +0000

1. What is DOM :

🔹DOM stands for Document Object Model.

🔹DOM is a programming interface that represents a web pages as a tree like structure, where every element like html tags,attributes and text is an object that can be accessed and modified using javascript.

2. How is the DOM different from HTML?

🔹HTML is a static code to define webpages structure.while DOM is the live memory representation of that structure.

▪️HTML exists the file and shows the initial content.

▪️DOM generated from HTML and CSS can be modified dynamically by javascript.

3. What are the different ways to select elements?

Common methods,
🔹getElementById(),

🔹getElementsByClassName(),
🔹getElementsByTagName(), 🔹querySelector(), 🔹querySelectorAll().
(TO BE DISCUSSED)

4. Compare innerHTML, innerText, and textContent.

🔹innerText: Gets/sets only visible text.

🔹innerHTML: Gets/sets HTML markup inside an element. (TBD)

🔹textContent: Gets/sets all text content, including hidden text, and is faster than innerText. (TBD)

5. How do you create and add a new element dynamically?

🔹Use document.createElement() to create the element.

🔹UseappendChild() or insertBefore() to add it to the DOM tree. (TBD)

6. What are JavaScript events?

🔹 Events are actions that occur in the browser, such as clicks, key presses, or page loads.

🔹 JavaScript can listen for these events and execute functions when they occur.

7. How do you add an event listener to an element? (TBD)

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button Clicked!");
});

8. Explain the different types of DOM nodes.

🔹 Document node (root),
🔹 Element nodes (tags),
🔹 Attribute nodes,
🔹 Text nodes. (TBD)

Javascript Scenario question using (variables, operators, conditional statements) - 2

Deva I — Sat, 18 Apr 2026 15:25:40 +0000

1. Check number is even or odd:

PROGRAM:

OUTPUT:

2. Compare two passwords entered by user.

PROGRAM:

OUTPUT:

3. Write condition if person age >= 18 is eligible to vote:

PROGRAM:

OUTPUT:

4. Use logical AND to check:

▪️User is logged in

▪️User is admin Then allow dashboard access.

1. User Profile Update

const user = {

name: "Vijay",

age: 25,

email: "ideva4739@gmail.com"

};

▪️Update email and a new property is active = true.

PROGRAM:

EXPLANATION:

🔹In this question first condition update a new email instead of existing email.

🔹If you want update a values give object name and update value in between (.)dot operator.

▪️dot operator is used to            seperate the object name and key name.

🔹So, give user.email= ideva537@gmail.com.

🔹Then add a new element is active= true.

🔹So, create new variable user.isActive= true.

🔹Then print the user.

OUTPUT:

2. Shopping Cart Total

const cart = [

(name: "Shirt", price: 500).

(name: "Shoes", price: 1500).

(name: "Cap", price: 300)

▪️Calculate total price.

PROGRAM:

OUTPUT:

3. Find Specific Object

const users =[
{name: "Vijay", age: 25},
{name: "Arun", age: 30},
{name: "Kumar", age: 28}
];

▪️From an array of users, find the user whose name is "Arun"

PROGRAM:

OUTPUT:

4. Add Item to Array

const products= [
{name: "Shirt", price: 500},
{name: "Shoes", price: 1500}
];
▪️Add a new property to an existing array.

▪️Remove the product name "Shoes" from the array.

▪️From product list return price > 1000 items only.

PROGRAM:

OUTPUT:

5. Count Items in Object

const fruits = {
apple: 2,
banana: 5,
mango: 3
};

▪️Find the total number of fruits.

PROGRAM:

OUTPUT:

6. Convert Array to Object

const users = ["Vijay", "Arun", "Kumar"];

▪️Convert into:

{

Vijay: true,

Arun: true,

Kumar: true

}

PROGRAM:

OUTPUT:

Detail About These Interview Questions: 1.What is Javascript 2.Data types in Js and Difference Between Primitive and Non Primitive 3.Variable in js

Deva I — Thu, 09 Apr 2026 16:05:44 +0000

1.What is Javascript:

◾Java script is a high level programing language that used alongside HTML and CSS.

◾It's a object oriented programming language.

◾It is used to define the behaviour of the HTML and CSS,

◾Java script is a most widely used frontend language in the world wide.

◾It is used for interact web application and supports both client side and server side development.

◾Client side means code runs on the user's computer and server side means it's runs on the web browser.

◾JavaScript is a single-threaded language that executes one task at a time.

◾Java script was created by BRENDON EICH in 1995.He's a computer programmer and technology executive.

◾Brendon takes only 10 days to create java script.

◾Java script mainly used browsers,not only browser also on servers, mobile apps and AI tools.

1.Why this language has the name of Java script?

✓ In the initial stage it was named by "MOCHA" and later renamed "LIVE SCRIPT"

✓ Then they conclude the popularity of JAVA language at the time,so its inspired JAVA language to renamed "JAVA SCRIPT".

2.Why java script is a scripting language?

✓ Java script does not need any compiler to run this code,they run on runtime browsers

✓ It is interpreted line by line execution.

✓ Example Java code need a compiler to read the code to machine language(binary) and then to compiled servers,but javascript does not need compilers to convert machine language they directly runs on browsers.

✓ Python is one of the most popular scripting languages. Known for its simple syntax and readability

2.What are the data types are in javascript?

∆ Data types are two types,they are
1.primitive data type
2.non primitive data type

∆ Javascript using 8 primitive data types,they are Number,Boolean, Bigint,String, Undefined,Null,Nan and Symbol.

Number:
✓ Its using to denote numbers like
Ex:19,12,4,2

Boolean:
✓ boolean denoted by true or false.

Bigint:
✓ Normally integer values are number,on the other hand bigint means big numbers.
Ex:2527788373782,2773993736.

String:
✓ Strings are set of characters enclosed single''or double""quotes.
Ex:"Deva",'blog'.

Undefined:
✓ Undefined is variable can be exist but not value assigned

Null:
✓ Null is denoted by empty value or 0 value.

Symbol:
✓ This used to unique symbol like percentage,greater than and lessthan etc.

∆ Non primitive data types are object, array and function.

Object:
✓ Object is a collection of key value pairs used to store data and entities.

✓ Denoted using curley braces{}

Ex:

const user = { name: "Deva", age: 22 };
console.log(user.name);// Output: Deva

Array:
✓ Array is one of the object and used for storing multiple elements in a single container.

✓ Arrays are denoted in square brackets[].

const colors = ["red", "green", "blue"];
console.log(colors[0]); // Returns red

Function:
✓ A function is a reusable block of code designed to perform a specific task

function welcome(name) {
  return "Hello, " + name;
}
console.log(welcome("Deva"));// Output: Hello Deva

Difference Between Primitive and Non Primitive Data Types:

Primitive Data types:

◾Immutable: Values cannot be changed.

◾ Immutable means if the value reassign does not replace a memory of older one's.Rather than creates a new memory to store the value.

EXAMPLE:

let i = 10;
    i = 12;

🔹In the above example the variable are declared and initialize the value 10.

🔹Then reassign the value 12.

🔹In this situation first memory creates and assign the value 10.

🔹Next the reassign value 12 is not assigned the memory of value 10.

🔹It creates a new memory and stores that value.

◾Storage:Stores by values in the stack.

🔹Every value stored by stack order
line by line.

🔹First value stored and then second value stored above the first value.

◾ Comparison:Compared by actual value.

EXAMPLE:

OUTPUT:

🔹It's compared by values (i(10)==j (10))
Prints true.

◾Methods:Do not have any methods but use the wrappers.

◾Starts with a lowercase.

Non Primitive Data types:

◾Mutable:Values can be changed or modified.

◾Storing:Storing by the heap.

🔹Does not follow the any order store a heap order.

◾Comparison:Compared by memory reference or address.

EXAMPLE:

🔹In this program the array values i = [10] and j = [10] is have the same value 10.

🔹But [10] = [10] are not take the value, it takes the memory address of the value.

🔹So it's returns the false.

OUTPUT:

◾Can have the methods and properties.

◾ It's only starts with a uppercase.

What is Variables:

◾Variables is a data containers

◾Variables are used to store data values.

◾The variables can be stored 4 different ways how the values should behave.

◾Older Javascript:
🔹Using var
🔹Automatically
(Both are not recommended)

◾Modern Javascript:
🔹Using let
🔹Using const

Using the let:

🔹i contains the value 5
🔹j contains the value 6
🔹k adds the i and j stores the value 11.

Using the const:

🔹i contains the value 7
🔹j contains the value 3
🔹k adds the i and j stores the value 10.

JAVASCRIPT IDENTIFIERS:

◾ Variables are identified with unique names called identifiers.

◾The rules for creating a name are:

🔹Names can contain letters, digits, underscores, and dollar signs.

🔹Names must begin with a letter, a $ sign or an underscore (_).

🔹Names are case sensitive ,because capital X is different from small x.

🔹Reserved  JavaScript  keywords like `const`, `let` `import`,`export` cannot be used as names.

Javascript Underscore(_):

◾The underscore is treated as a letter in JavaScript names.

Javascript Dollor sign $:

◾The Dollor sign also treated as a letter in JavaScript names.

DECLARING A JAVASCRIPT VARIABLES:

◾Creating a variable in JavaScript is called declaring a variable.

◾Using let and const keywords to declare a variable in javascript.

Declaring a Variable Using let:

let Phonename = "Realme";

🔹After the declaration, you'll not assign the value it is undefined

🔹assign a value to a variable using equal = (assignment operator)

🔹It's better to assign the value while you declared a variable.

Declaring a Variable Using const:

◾Always use const if the value should not be changed.

const Phonename = "Realme";``

When to Use var, let, or const?

◾Always declare a variables

◾Always use const, if the value should not be changed.

◾Only useletif you cannot use const.

◾Never used varand declare variable automatically.

Details About the Basic Array Methods

🔹push() method adds a 'vivo' end of the array.

OUTPUT:

Array shift()

◾The shift() method removes the first array element and "shifts" all other elements to a starting index.

EXAMPLE:

🔹Shift() method removes first element 'realme'.

🔹The balance elements shifts the place of removed element.

OUTPUT:

Array unshift()

◾The unshift() method adds a new element in the beginning of an array and the other elements unshifts the older elements.

EXAMPLE:

🔹'oneplus' added to the beginning of the array.

OUTPUT:

Array.isArray()

◾The Array.isArray()used to finds array is really a array to returns a true.

EXAMPLE:

🔹Mobilebrand is array,so its returns a true.

OUTPUT:

Array delete()

◾delete()method returns a undefined.

◾Use the push and pop method instead of delete.

EXAMPLE:

🔹Mobilebrand[1] defines undefined.

OUTPUT:

Array concat()

EXAMPLE:

🔹Slice out a part of an array starting from array element 1 ("csk")

OUTPUT:

Array to Spliced()

◾It also removes the element from the array.

EXAMPLE:

🔹'0' defines the index and '2' defines the two elements.

🔹Elements removed starting from the index 0 to two elements.

OUTPUT:

Discuss about the topics of 1.Constructor Function 2.Return Statement in Javascript 3.Bacis Array Methods

Deva I — Tue, 07 Apr 2026 14:29:15 +0000

Constructor Function:

◾Constructor function is used to create and initialize multiple objects of the same type.

◾It overcomes the difficulty of multiline code, construct a single line.

◾Constructor must be called with the newoperator.

Const phone1 ={
brand:"Nothing",
model:"cmf phone 2pro",
price:20000
}

Const phone2 = {
brand:"Realme",
model:"P4 pro",
price:22000
}

✓ It's a normal object creation for phone details.

✓ This method enough with two or three phone details.

✓ What if, can write the details of all realme brand mobiles,so overcome this difficult use a contructor function to construct a code in single line.

Example:

EXPLANATION:

🔹Create a function to give the parameters(Nothing","cmf phone 2pro",20000) of you write.

🔹Then to sets a this operation to call a properties and methods.

🔹This multiline code
brand:"Nothing",
model:"cmf phone 2pro",
price:20000
Written a single line code of
const phone 1 = new phone("nothing", "cmf phone 2pro", 20000);

🔹Writing, const phone2 = new phone("realme", "p4 pro" 22000);
instead of this code
brand:"Realme",
model:"P4 pro",
price:22000

🔹Use the newkeyword,when you use the new keyword javascript performs the above steps.

🔹Use the this to Print the code like (this.brand, this.model, this .price);

OUTPUT:

Return Statement in Javascript:

◾The return statement is used to end function execution and a value to be sent back to the caller.

◾The caller used that value at any time.

◾If the caller don't return the value the value won't used to be any variable.

EXAMPLE:

🔹Create a function named add(a,b)

🔹Return the parameters a and b.

🔹Create a new variable to store the function name and give the values of parameters.

🔹Then print the code.

🔹The sum output 15 is return to the caller function add.

🔹The value can be used at any variable,if not the give the return statement the value won't be used at any variable.

OUTPUT:

Returning value of some data types:

Undefined:
Returned for variables declared but not yet assigned a value.

Boolean:
Returned for true and false.

Number:
Returned integers(1,2,3), floats(3.1,2.13), and special values like NaN and Infinity.

BigInt:
Used for larger integers like 123456.

String:Returned for all textual data with a double quotation like ("javascript","Deva","123")

Object:Returned for objects {} and arrays [].

Basic Array Methods:

Array length

Array isArray)

Array toString()

Array delete()

Array at()

Array concat()

Array Join()

Array copy Within()

Array pop()

Array flat()

Array push()

Array slice()

Array shift()

Array splice()

Array unshift()

Array to Spliced()

(To be discussed )