DEV Community: Kiruthiga S

React JS

Kiruthiga S — Thu, 03 Sep 2026 05:21:47 +0000

Props
Props are used to pass data from a parent component to a child component

function Parent(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function Child() {
  return <Parent name="John" />;
}

Destructuring props

function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello,I'm {name}!</h1>
      <p>I am {age} years old.</p>
    </div>
  );
}

function App() {
  return <Greeting name="Kiruthiga" age={21} />;
}

What are the ways to use props

Passing Strings

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

function App() {
  return <Welcome name="Alice" />;
}

Passing Numbers

function Student({ marks }) {
  return <p>Marks: {marks}</p>;
}

function App() {
  return <Student marks={95} />;
}

Passing Boolean Values

function User({ isLoggedIn }) {
  return (
    <h1>{isLoggedIn ? "Welcome!" : "Please Login"}</h1>
  );
}

function App() {
  return <User isLoggedIn={true} />;
}

Passing Arrays

function Fruits({ items }) {
  return (
    <ul>
      {items.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

function App() {
  return <Fruits items={["Apple", "Banana", "Orange"]} />;
}

Passing Objects

function Employee({ emp }) {
  return (
    <div>
      <h2>{emp.name}</h2>
      <p>{emp.role}</p>
    </div>
  );
}

function App() {
  const employee = {
    name: "John",
    role: "Developer",
  };

  return <Employee emp={employee} />;
}

Passing Functions

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}

function App() {
  function greet() {
    alert("Hello!");
  }

  return <Button handleClick={greet} />;
}

React JS

Kiruthiga S — Wed, 02 Sep 2026 04:36:17 +0000

Arrow Function

without arrow function

function greet() {
    return "Hello";
}

with arrow function

const greet = () => {
    return "Hello";
}

const greet = () => "Hello";

with parameters

function add(a,b){
    return a+b;
}

const add = (a,b) => a+b;

Why React uses Arrow Functions?

const Home = () => {
    return <h1>Home Page</h1>;
}

Destructuring
Taking values out of an object or array easily

Object Destructuring

const student = {
    name: "Alice",
    age: 22,
    city: "Chennai"
};

without destructuring

console.log(student.name);
console.log(student.age);

with destructuring

const { name, age } = student;

console.log(name);
console.log(age);

Array Destructuring

const colors = ["Red","Blue","Green"];

without destructuring

const first = colors[0];
const second = colors[1];

with destructuring

const [first, second] = colors;

React JS

Kiruthiga S — Mon, 31 Aug 2026 10:57:22 +0000

5)Form with Multiple Inputs
You have 5 input fields (name, email, phone, city, password).
Better to use:
5 separate useState?
OR one object state?
Why?
What problem happens if you update object state incorrectly?

MultipleInput.jsx

import { useState } from "react"
function MultipleInput(){
    const [file,setFile]=useState({
        name:'',
        mail:'',
        phone:'',
        city:'',
        password:''
    })
    const [ show,setShow]=useState(false)

    function form(e){
        setFile({...file,[e.target.name]:e.target.value})
    }
    function submit(){
        setShow(true)    
    }
    return(
        <div>
            <input type='text' placeholder="enter a name" onChange={form} value={file.name} name='name'></input><br></br>
            <input type='email' placeholder="enter a mail" onChange={form} value={file.mail} name='mail'></input><br></br>
            <input type='text' placeholder="enter a phone" onChange={form} value={file.phone} name='phone'></input><br></br>
            <input type='text' placeholder="enter your city" onChange={form} value={file.city} name='city'></input><br></br>
            <input type='password'placeholder="enter a password" onChange={form} value={file.password} name='password'></input><br></br>
            <button onClick={submit}>submit</button><br></br>Details
            {show && 
            <>
            <p>Name:{file.name}</p>
            <p>Email:{file.mail}</p>
            <p>Phone:{file.phone}</p>
            <p>City:{file.city}</p>
            <p>Password:{file.password}</p>
            </>
            }   
        </div>
    )
}

export default MultipleInput;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Input from './Input'


function App() {

  return (
    <Input/>
  )
}

export default App;

React JS

Kiruthiga S — Mon, 31 Aug 2026 10:48:41 +0000

3)Show/Hide Text
You want to show paragraph only when button is clicked.
What kind of state works best?
Why boolean is suitable here?

ShowHide.jsx


import {useState} from "react";
function ShowHide(){
    const[click,setClick]=useState("");

    function show(){
        setClick("React is a JavaScript library used to build interactive user interfaces (UI) for websites and web applications. It was created by Facebook (Meta) and is one of the most popular tools for front-end development.")
        console.log("Show")

    }
    return(
        <div>
            <h1>Show-Hide Button</h1>
            <button onClick={show}>Show</button>
            <p>{click}</p>
        </div>
    )
}
export default ShowHide;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import ShowHide from './Show-Hide'


function App() {

  return (

<ShowHide/>
  )
}

export default App

4)Character Counter
User types in textarea. You show number of characters.
How do you track text length?
Should you store both text and length in state?

CountChar.jsx

import {useState} from 'react';

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

    function char(event){
        let userInput = event.target.value
        setCount(userInput.length);
        // console.log("count") 
    }

    return(
       <div>
         <input type="Text" onChange={char}></input>
        <p> Count:{count}</p>
       </div>
    )
}
export default CountChar;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import CountChar from './CountChar'

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

  return (
    <CountChar />
  )
}

export default App

React js

Kiruthiga S — Mon, 31 Aug 2026 10:30:45 +0000

1)Toggle Button:
You build a button that switches between:
"ON" ↔ "OFF"
What type of state should you use?
What is the best initial value?

Toogle.jsx

import { useState } from "react";
function Toogle() {
    const [Switch, setSwitch] = useState("https://www.w3schools.com/js/pic_bulboff.gif");

    function on() {
        setSwitch("https://www.w3schools.com/js/pic_bulbon.gif");
        console.log("ON");
    }
    function off() {
        setSwitch("https://www.w3schools.com/js/pic_bulboff.gif");
        console.log("OFF");
    }
    return (
        <div>
            <h1>Toogle Button</h1>
            <img
                src={Switch} alt="Bulb"
            />
            <button onClick={on}>ON</button>
            <button onClick={off}>OFF</button>
        </div>
    )
}
export default Toogle;

App.jsx


import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Toogle from './Toogle'

function App() {

  return (
            <Toogle/>
  )
}

export default App

2) Input Field Value:
You have a text input.
User types name and you want to display:
Hello, Vijay
Why must the input value be stored in useState?
What happens if you use a normal variable?

Input.jsx

import { useState } from "react";

function Input() {
    const[ name, setName] = useState("");
    function change(event) {
        setName(event.target.value)
    }
    return (
        <div>
            <h1>Input Box</h1>
            <input type="text"  value={name}
            onChange={change}></input>
            <h3>Hello ,{name}</h3>
        </div>
    )
}
export default Input;

App.jsx

import { useState } from 'react'
import heroImg from './assets/hero.png'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import './App.css'
import Input from './Input'

function App() {

  return (
    <Input/>
  )
}

export default App

React JS

Kiruthiga S — Mon, 31 Aug 2026 10:12:00 +0000

JSX
JSX is a powerful syntax extension in React that makes writing and managing UI components easier and more readable
JSX improves code clarity by combining structure and logic in one place
React applications are usually built around a single HTML element

Counter
Counter.jsx

import {useState} from "react"
function Counter(){
    const [count,setCount]=useState(0)
    function incre(){
        setCount(count+1)
    }
    function decre(){
        setCount(count-1)
    }
    function reset(){
        setCount(0)
    }

    return(
        <div>
            <h1>Counter:{count}</h1>
            <button onClick={incre}>+</button>
            <button onClick={decre}>-</button>
            <button onClick={reset}>reset</button>
        </div>
    )
}
export default Counter

App.jsx
it just call the Counter.jsx file

import './App.css'
import Counter from './Counter'

function App() {


  return (
   <Counter/>
  )
}

export default App

Main.jsx
it call the App.jsx file

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

React JS

Kiruthiga S — Mon, 31 Aug 2026 09:58:42 +0000

React
React JS is a free library for making websites
React is like a special helper for JavaScript
React is Developed by Facebook
React is to be fast, scalable, and simple
React allows us to create reusable UI components
React is a JavaScript library for building user interfaces and single page application

Why Node.js in React?
Node.js is used for React primarily to power the development environment and build tools on your computer, not to run the React app in the browser.
Because web browsers cannot directly understand modern React code (like JSX or ES6 modules), Node.js acts as the engine that transforms, bundles, and prepares your code for the web.

COMMENTS FOR REACT PROJECT CREATION:

npm create vite@latest [npm is a node package manager]
|
project name 
|
framework selection
|
variant selection
|
it will ask you want to install the npm if you want means click yes otherwise no
|
the project folder is created successfully

Python

Kiruthiga S — Sun, 30 Aug 2026 17:51:02 +0000

Euclidean Algorithm
Simple method to find the HCF/GCD (Highest Common Factor) of two numbers

def hcf(a, b):
    while b != 0:
        a, b = b, a % b
    print("HCF =", a)
a = int(input("Enter first number: "))
b = int(input("Enter second number: "))
hcf(a, b)

Output:
Enter first number: 12
Enter second number: 24
HCF = 12

Luhu Algorithm - Credit Card Validation

def check(card):
    total = 0
    count = 0
    while card > 0:
        digit = card % 10
        if count % 2 == 1:
            digit = digit * 2
            if digit > 9:
                digit = digit - 9
        total = total + digit
        card = card // 10
        count = count + 1
    if total % 10 == 0:
        print("Valid")
    else:
        print("Invalid")
card = int(input("Enter card number: "))
check(card)

Output:
Enter card number: 1234567890
Invalid

Pan Card Validation

def pan_check(pan):
    if len(pan) != 10:
        print("Invalid PAN")
        return
    i = 0
    while i < 5:
        if not pan[i].isalpha():
            print("Invalid PAN")
            return
        i += 1
    i = 5
    while i < 9:
        if not pan[i].isdigit():
            print("Invalid PAN")
            return
        i += 1
    if not pan[9].isalpha():
        print("Invalid PAN")
    else:
        print("Valid PAN")
pan = input("Enter PAN: ")
pan_check(pan)

Output:
Enter PAN: ABCDE1234F
Valid PAN

Aadhaar Card Validation

def aadhaar_check(aadhaar):
    if len(aadhaar) != 12:
        print("Invalid Aadhaar")
        return
    count = 0
    while count < 12:
        if not aadhaar[count].isdigit():
            print("Invalid Aadhaar")
            return
        count += 1
    print("Valid Aadhaar")
aadhaar = input("Enter Aadhaar number: ")
aadhaar_check(aadhaar)

Output:
Enter Aadhaar number: 123456789045
Valid Aadhaar

Python

Kiruthiga S — Sun, 30 Aug 2026 16:55:48 +0000

Binary
base value is 2,it uses 2 digits i.e. 0 and 1

Decimal
base value is 10, it uses digits i.e. 0-1
eg:12265
(1×10^4) + (2×10^3) + (2×10^2) + (6×10^1) + (5×10^0)
= (1×10000) + (2×1000) + (2×100) + (6×10) + (5×1)
= 10000 + 2000 + 200 + 60 + 5
= 12265

Octal
base value is 8 , it uses 8 digits i.e. 0-7
eg:25
25₈ = (2 × 8¹) + (5 × 8⁰)
= (2 × 8) + (5 × 1)
= 16 + 5
= 21₁₀

Hexadecimal
base value is 16 , it uses 16 digits i.e. from 10-15 are represented as A-F i.e. 10 is represented as A, 11 as B, 12 as C, 13 as D, 14 as E, and 15 as F
eg:2B₁₆
2B₁₆ = (2 × 16¹) + (11 × 16⁰)
= (2 × 16) + (11 × 1)
= 32 + 11
= 43₁₀

Binary to decimal

def binary_to_decimal(binary):
    decimal = 0
    power = 1
    while binary > 0:
        digit = binary % 10
        decimal = decimal + digit * power
        power =power*2
        binary = binary // 10
    print("Decimal =", decimal)
num = int(input("Enter a binary number: "))
binary_to_decimal(num)

Output:
Enter a binary number: 1010
Decimal = 10

Decimal to Binary

def decimal_to_binary(num):
    binary = ""
    while num > 0:
        digit = num % 2
        binary = str(digit) + binary
        num = num // 2
    print("Binary =", binary)
num = int(input("Enter a decimal number: "))
decimal_to_binary(num)

Output:
Enter a decimal number: 5
Binary = 101

Binary to Octal

def binary_to_octal(binary):
    decimal = 0
    power = 1
    while binary > 0:
        digit = binary % 10
        decimal = decimal + digit * power
        power = power * 2
        binary = binary // 10
    octal = ""
    while decimal > 0:
        digit = decimal % 8
        octal = str(digit) + octal
        decimal = decimal // 8
    print("Octal =", octal)
num = int(input("Enter binary number: "))
binary_to_octal(num)

Output:
Enter binary number: 1010
Octal = 12

Python

Kiruthiga S — Sun, 30 Aug 2026 14:31:41 +0000

29)Divisible by 2, 3, 4, 5, 6, 8, 9

def divisible(num):
    if num % 2 == 0:
        print("Divisible by 2")
    if num % 3 == 0:
        print("Divisible by 3")
    if num % 4 == 0:
        print("Divisible by 4")
    if num % 5 == 0:
        print("Divisible by 5")
    if num % 6 == 0:
        print("Divisible by 6")
    if num % 8 == 0:
        print("Divisible by 8")
    if num % 9 == 0:
        print("Divisible by 9")
num = int(input("Enter a number: "))
divisible(num)

Output:
Enter a number: 150
Divisible by 2
Divisible by 3
Divisible by 5
Divisible by 6

30)Write the smallest and the biggest two digit prime number

def prime_numbers():
    smallest = 0
    biggest = 0
    num = 10
    while num <= 99:
        count = 0
        i = 1
        while i <= num:
            if num % i == 0:
                count += 1
            i += 1
        if count == 2:
            if smallest == 0:
                smallest = num
            biggest = num
        num += 1
    print("Smallest =", smallest)
    print("Biggest =", biggest)
prime_numbers()

Output:
Smallest = 11
Biggest = 97

There are four Mobile Phones in a house. At 5 a.m, all the four Mobile Phones will ring together. Thereafter, the first one rings every 15 minutes, the second one rings every 20 minutes, the third one rings every 25 minutes and the fourth one rings every 30 minutes. At what time, will the four Mobile Phones ring together again?

# LCM
a = 15
b = 20
c = 25
d = 30
i = 1
while not (i % a == 0 and i % b == 0 and i % c == 0 and i % d == 0):
    i += 1
print(i, "minutes")

Output:300 minutes

A book seller has 175 English books, 245 Science books and 385 Mathematics books. He wants to sell the books in a box, subject-wise in equal numbers. What will be the greatest number of the boxes required? Also find the number of books for each subject in a box.

a = 175
b = 245
c = 385
i = 1
hcf = 1
while i <= a:
    if a % i == 0 and b % i == 0 and c % i == 0:
        hcf = i
    i += 1
print("Number of boxes =", hcf)
print("English books =", a // hcf)
print("Science books =", b // hcf)
print("Maths books =", c // hcf)

Output:
Number of boxes = 35
English books = 5
Science books = 7
Maths books = 11

Amicable Numbers
Pairs of two integers(a,b)
Sum of divisor of a=b
Sum of divisor of b=a
Eg:220,284
220=1,2,4,5,10,11,20,22,44,55,110
SUM:284
284=1,2,4,71,142
SUM:220

1184,1210
2620,2924
5020,5564
6232,6368

def amicable(a, b):
    sum1 = 0
    sum2 = 0
    i = 1
    while i < a:
        if a % i == 0:
            sum1 += i
        i += 1
    i = 1
    while i < b:
        if b % i == 0:
            sum2 += i
        i += 1
    if sum1 == b and sum2 == a:
        print("Amicable Numbers")
    else:
        print("Not Amicable Numbers")
a = int(input("Enter first number: "))
b = int(input("Enter second number: "))
amicable(a, b)

Output:
Enter first number: 5020
Enter second number: 5564
Amicable Numbers

Python

Kiruthiga S — Sun, 30 Aug 2026 10:32:55 +0000

26) Sum of 2 Prime Numbers is given number

num = int(input("Enter a number: "))
i = 2
while i <= num // 2:
    second = num - i

    count1 = 0
    j = 1
    while j <= i:
        if i % j == 0:
            count1 += 1
        j += 1

    count2 = 0
    j = 1
    while j <= second:
        if second % j == 0:
            count2 += 1
        j += 1

    if count1 == 2 and count2 == 2:
        print(i, "+", second, "=", num)
    i += 1

Output:
Enter a number: 10
3 + 7 = 10
5 + 5 = 10

27)Express 68 and 128 as the sum of two consecutive primes

num = int(input("Enter a number: "))
i = 2
while i < num:
    count1 = 0
    j = 1
    while j <= i:
        if i % j == 0:
            count1 += 1
        j += 1

    if count1 == 2:
        second = i + 1

        while True:
            count2 = 0
            j = 1
            while j <= second:
                if second % j == 0:
                    count2 += 1
                j += 1

            if count2 == 2:
                break

            second += 1
        if i + second == num:
            print(num, "=", i, "+", second)
            break
    i += 1

Output:
Enter a number: 68
68 = 31 + 37
Enter a number: 128
128 = 61 + 67

28)Express 79 and 104 as the sum of any three primes

num = int(input("Enter a number: "))
i = 2
while i < num:
    count1 = 0
    j = 1
    while j <= i:
        if i % j == 0:
            count1 += 1
        j += 1

    if count1 == 2:
        k = i + 1
        while k < num:

            count2 = 0
            j = 1
            while j <= k:
                if k % j == 0:
                    count2 += 1
                j += 1
            if count2 == 2:
                third = num - i - k

                count3 = 0
                j = 1
                while j <= third:
                    if third % j == 0:
                        count3 += 1
                    j += 1

                if count3 == 2:
                    print(num, "=", i, "+", k, "+", third)
                    break
            k += 1

        if count3 == 2:
            break
    i += 1

Output:
Enter a number: 79
79 = 3 + 5 + 71
Enter a number: 104
104 = 2 + 5 + 97

Closure in JS

Kiruthiga S — Mon, 24 Aug 2026 08:48:55 +0000

Closure in JavaScript
A closure is the combination of a function and its lexical environment, allowing the function to access variables from its outer scope even after the outer function has finished executing
A closure allows an inner function to use the variables of its outer function even after the outer function has returned

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <script>
        function bank(){
            let min_balance=500;
            function deposit(amt){
                min_balance=min_balance + amt;
                console.log(min_balance);
            }
            return deposit;
        }
        const deposit1=bank();
        deposit1(500);
        deposit1(2000);

        const deposit2=bank();
         deposit2(700);
    </script>
</body>
</html>

Output:
1000
3000
1200

<script>
function actions() {
    let min_balance = 1000;

    return {
        deposit: function(amt) {
            min_balance += amt;
            console.log("Balance:", min_balance);
        },

        withdraw: function(amt) {
            min_balance -= amt;
            console.log("Balance:", min_balance);
        },

        check_balance: function() {
            console.log("Balance:", min_balance);
        }
    };
}

const customer1 = actions();

customer1.deposit(100);
customer1.withdraw(50);
customer1.check_balance();
</script>

Output:
Balance: 1100
Balance: 1050
Balance: 1050