DEV Community: R.Shobika CSE

HOW TO START A PROJECT IN REACT?

R.Shobika CSE — Thu, 27 Aug 2026 14:20:22 +0000

How to start a project in a react

1st we have to type the comment and create the react project
the comments are:

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

In React only it install the some of the packages and inbuild main.jsx,app.jsx,index.html,app.css,index.css files are having
We can modify them for our proposed project.

WHAT IS JSX?

JSX is a JavaScript XML
In JSX we can write HTML inside of the JavaScript code

DIFFERENCE BETWEEN HTML AND XML

COUNTER PROJECT

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

In App.jsx i just call the Counter.jsx file


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

function App() {


  return (
   <Counter/>
  )
}

export default App

Main.jsx:

In Main.jsx i 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>,
)

In all the react project there is only one html file only

output:

REACT.JS INTRO

R.Shobika CSE — Thu, 27 Aug 2026 13:47:24 +0000

REACT.JS

React is a JavaScript Library
It is a Single Page Application
Its is a component based architecture
It was created by Facebook
And main advantage is reusable ui

DIFFRENCE BETWEEN LIBRARY AND FRAMEWORK:

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

JS - Closure

R.Shobika CSE — Mon, 24 Aug 2026 15:24:58 +0000

Closure:
A closure is created when a function remembers the variables from its outer scope, even after the outer function has finished executing.

function bank(){
let min_bal=500;
function deposit(amt){
min_bal=min_bal+amt;
console.log(min_bal)
}
return deposit
}
const customer1=bank();
customer1(1500);
customer1(500);

ouput:
2000
2500

How can return more than one function ?

we can store the function in a objects. In object we can store functions and properties , we can access them in key value pair.

function bank(){
let min_bal=500
const admin={
deposit:function(amt){
min_bal = min_bal+amt;
}
withdraw:function(amt){
min_bal=min_bal-amt;
}
checkbal:function(){
console.log(min_bal)
}
}
return admin;
}
const cus1=bank();
cus1.withdraw(100);
cus1.deposit(5000);
const cus2=bank();
cus2.withdraw(100);

output:
400
5400
400

PYHTON TASK 7

R.Shobika CSE — Sat, 22 Aug 2026 15:53:11 +0000

TASK
1. NEON NUMBER:

A neon number is a number where the sum of the digits of its square is equal to the number itself

eg:
9^2=>81
8+1=>9 (neon number)

12^2=>144
1+4+4=>9 (not a neon number)

def sum_of_digit(no):
    sum=0
    a=0
    while no>0:
        a=no%10
        sum=sum+a
        no=no//10
    return sum

no=int(input("enter a number"))
sq=no**2
result=sum_of_digit(sq)
if no==result:
    print(f'{no} this is neon number')
else:
    print(f' {no} this is not a neon number')

output:

enter a number9
9 this is neon number

2. Strong number:

A Strong number is a number equal to the sum of the factorials of its digits and its equal to the number itself

eg: number = 145
1!+4!+5!
1+24+120=145

def fact(no):
    facto=1
    while no>0:
        facto=facto*no
        no=no-1
    return facto

def sum_digit(no):
    sum=0
    a=0
    while no>0:
        a=no%10
        factorial=fact(a)
        sum=sum+factorial
        no=no//10
    return sum

no=int(input("enter a number:"))
result= sum_digit(no)
if result==no:
    print(f'{result} is a strong number')
else:
    print(f'{result} is not a strong number')

output:

enter a number:145
145 is a strong number

enter a number:123
9 is not a strong number

3. Duck number

A number should not start with 0 and a number atleast contain a one 0

no=input("enter a number")
if no[0]=='0':
    print(f'{no} is not a duck number')
else:
    print(f'{no} is a duck nunber')

output:

enter a number0134
0134 is not a duck number

enter a number10234
10234 is a duck nunber

4. Spy number:

A Spy Number is a number where the sum of its digits equals the product of its digits.

def sum_of_digit(no):
    sum=0
    a=0
    while no>0:
        a=no%10
        sum=sum+a
        no=no//10
    return sum
def mul_of_digit(no):
    mul=1
    a=0
    while no>0:
        a=no%10
        mul=mul*a
        no=no//10
    return mul    

no=int(input("enter a number: "))
sum=sum_of_digit(no)
mul=mul_of_digit(no)
if sum==mul:
    print(f'{sum} and {mul} are spy number')
else:
    print(f'{sum} and {mul} are not spy number')

output:

enter a number: 123
6 and 6 are spy number

enter a number: 456
15 and 120 are not spy number

PYTHON TASK6

R.Shobika CSE — Fri, 21 Aug 2026 14:13:05 +0000

TASK:

Count of a digit

no=int(input("enter a number: "))
count=0
while(no>0):
    count+=1
    no=no//10
print(f'count of a digit is : {count}')

output:

enter a number: 12365
count of a digit is : 5

Sum of Digit:

no=int(input("enter a number: "))
sum=0
while no>0:
    sum=sum+(no%10)
    no=no//10
print(f'sum of digit: {sum}')

output:

enter a number: 123
sum of digit: 6

Reverse of a number

no=int(input("enter a number: "))
rev=0
while no>0:
    rev=rev*10+(no%10)
    no=no//10
print(f'rev of digit: {rev}')

output:

enter a number: 123
rev of digit: 321

Palindrome of a number

no=int(input("enter a number:"))
temp=no
rev=0
a=0
while no>0:
    a=no%10
    rev=rev*10+a
    no=no//10
if(rev==temp):
    print(f'This number is a palindrome {rev}')
else:
        print(f'This number is not a palindrome {rev}')

output:

enter a number:121
This number is a palindrome 121

enter a number:1234
This number is not a palindrome 4321

PYTHON3 TASK3 day 10

R.Shobika CSE — Wed, 12 Aug 2026 08:35:33 +0000

TASK

Tenali Raman and the Palace Guards

Tenali Raman wishes to meet the King. Before reaching the royal court, he has to pass through many palace gates. A guard is posted at each gate.

Every guard demands a share of whatever reward Tenali Raman receives from the King. Tenali Raman agrees and promises:
"I will give you half of whatever reward I receive from the King."

All the guards allow him to enter. After meeting the King, Tenali Raman receives a reward of 1024 lashes.

Keeping his promise, Tenali Raman shares his reward with the guards. At each gate, he gives half of the lashes he still has to receive to the guard at that gate and proceeds to the next gate.

Write a program to determine:

How many lashes each guard receives.
How many Guards are there if Tenali Raman gets only one lash

PROGRAM:

lashes=1024
gaurd=0
while lashes>1:
   lashes=lashes//2
   gaurd=gaurd+1
print(gaurd)

output:
10

Police , Thief question

PROGRAM:

police=0
thief=40
step=0
while thief>police:
  police=police+5
  thief=thief+2
  step+=1
print("police feet : ", police)
print("police step : ",step)

police feet : 70
police step : 14

PYTHON3 - TASK2 day9

R.Shobika CSE — Wed, 12 Aug 2026 08:25:57 +0000

TASK

1.A king announces a unique reward for Hard Workers. On each day, the reward is multiplied by the day's number. The reward starts at 1 gold coin. Given the number of days n, write a program to calculate the final reward.

PROGRAM:

coin=1
day=1
while day<=5:
    coin=coin*day
    day=day+1
print(coin)

output:
120

Suppose a password consists of the letters: A, B, C, D. Each letter must be used exactly once. How many different passwords are possible?

PASSWORD:
ABCD, ABDC, ACBD, ACDB, ADBC, ADCB, BACD, BADC, BCAD, BCDA, BDAC, BDCA, CABD, CADB, CBAD, CBDA, CDAB, CDBA, DABC, DACB, DBAC, DBCA, DCAB, DCBA

Frog in a Well A frog accidentally falls into a 60-foot-deep well. Every day: * During the day, the frog climbs 2 feet. * During the night, it slips down 0.5 feet. This pattern continues every day until the frog reaches the top of the well and escapes. Write a program to determine: 1. How many days it takes for the frog to get out of the well. 2. On which day the frog escapes. Note: Once the frog reaches or crosses the top of the well during the daytime, it escapes immediately and does not slip back that night

PROGRAM:

total=60
up=0
day=0
while up<total:
    up = up+2
    day=day+1
    up=up-0.5
print (up)
print (day)

output:

60.0
40

The Saint's Flower Basket

A saint goes for a morning walk every day. During his walk, he plucks flowers and keeps them in a basket.

On his way back home, he visits 7 temples. At each temple, he offers half of the flowers currently in his basket.

After visiting all 7 temples, he reaches home with exactly one flower remaining in his basket.

Write a program to determine how many flowers the saint had in his basket before he visited the first temple.

Hint: Think carefully about whether it is easier to solve the problem from the beginning or by working backwards from the final flower.

PROGRAM:

flowers = 1
temples = 0
while temples < 7:
    flowers = flowers * 2
    temples = temples + 1
print(flowers)

output:
128

PYTHON3 - TASK 1 day8

R.Shobika CSE — Tue, 11 Aug 2026 13:45:53 +0000

TASK:

In a school sports event, all students wearing ODD jersey numbers enter the ground first. After they finish, students with EVEN jersey numbers enter. Display the order.

PROGRAM:

ODD JERSEY PROGRAM:

no=1
while (no<=10):
   print(no, end=' ')
   no=no+2

output:
1,3,5,7,9

EVEN JERSEY PROGRAM:

no=2
while(no<=10):
   print(no, end=' ')
   no=no+2

COMBINING TWO PROGRAM INTO A SINGLE PROGRAM:

(i) FLOWCHART:

(ii) PROGRAM:

no=1
while(no<=10):
   print (no, end=' ')
   no=no+2
   if(no==11):
   no=2

output:
1,3,5,7,9,2,4,6,8,10

A daughter is going on a 5-day vacation. She asks her father to give her ₹5 every day, so she can save the money.

Her father suggests a different plan. Instead of giving her ₹5 daily, he says:

Day 1: ₹1
Day 2: ₹2
Day 3: ₹3
Day 4: ₹4
Day 5: ₹5

The daughter agrees to her father's proposal.

Write a program to calculate:

A) The total amount the daughter would receive under her original plan.
B) The total amount she would receive under her father's plan.
C) Display both totals.
Redo the same activity for 10 days leave, instead of 5 days.

PROGRAM:

A) Daughter plan:

box=0
day=1
while day<=5:
   box=box+5
   day=day+1
print(box)

output:
25

B) Father plan:

box=0
day=1
while day<=5:
   box=box+day
   day=day+1
print(box)

output:
15

C) Display the both total for 10 days instead of 5 days

box=0
day=1
while day<=10:
   box=box+10
   day=day+1
print(box)

output:
100

box=0
day=1
while day<=10:
   box=box+day
   day=day+1
print(box)

output:
55

PostgreSQL - JOIN day4

R.Shobika CSE — Tue, 11 Aug 2026 13:29:23 +0000

JOIN:

join clause is used to combine the two or more table based on related column.

INNER JOIN:

The INNER JOIN keyword selects records that have matching values in both tables.

select * from product INNER JOIN customer on product_id = cus_id;

output:

LEFT JOIN:

The LEFT JOIN keyword selects ALL records from the "left" table, and the matching records from the "right" table. The result is 0 records from the right side if there is no match.

select * from product LEFT JOIN customer on product_id = cus_id;

output:

RIGHT JOIN:

The RIGHT JOIN keyword selects ALL records from the "right" table, and the matching records from the "left" table. The result is 0 records from the left side if there is no match.

select product_id,product_name from product RIGHT JOIN customer on product_id = cus_id;

output:

OUTER JOIN:

The FULL JOIN keyword selects ALL records from both tables, even if there is not a match. For rows with a match the values from both tables are available, if there is not a match the empty fields will get the value NULL.

select * from product FULL OUTER JOIN customer on product.price = customer.price;

output:

To Be Discussed:

Having
CROSS JOIN

PostgreSQL - AGGREGATE FUNCTION day 3

R.Shobika CSE — Sun, 09 Aug 2026 11:34:03 +0000

** AGGREGATE FUNCTIONS:**

Aggregate function is used to perform the calculation on set input values and return the single value .
Aggregate functions are:
sum,avg,min,max,and count

SUM()

select sum(empsalary) from employee;

MIN()

select min(empsalary) from employee;

MAX()

select max(empsalary) from employee;

AVG()

select avg(empsalary) from employee;

output:

ROUND()

GROUPBY

The GROUP BY clause groups rows that have the same values into summary rows

select emproll ,sum(salary) from employee group by emproll;

output:

PostgreSQL day-2

R.Shobika CSE — Fri, 07 Aug 2026 08:48:35 +0000

CREATE TABLE:

CREATE table student(
stdroll int,
stdname varchar(20),
department varchar(20),
year int);

INSERT :

INSERT INTO students values(01,'shobi','CSE',4),(02,'Nandhini','CSE',4),(03,'Sandra','ECE',2),(05,'Hindhu','EEE',1);

output:

SELECT:

SELECT * from students;

output:

1 . SPECIFICATION SELECTION IN THE TABLE :

SELECT stdname,stddept from students;

output:

ALTER THE TABLE:

ALTER table students rename to std;

output:

SELECT DISTINCT

The SELECT DISTINCT statement is used to return only distinct (different) values.

Inside a table, a column often contains many duplicate values and sometimes you only want to list the different (distinct) values.

SELECT distinct stddept from std;

output:

IF doesnot use the distinct means it will return only selected column values only

WHERE CLAUSE:

The WHERE clause is used to filter records.

SELECT * from std WHERE stddept='CSE';

output:

WHERE and:

WHERE and is same like the other programming language like if both condition true means its execute , if anyone condition false means it execute 0 rows.

SELECT * from student WHERE stddept='ECE' and year=4;

output:

SELECT * from student WHERE stddept='CSE' and year=4;

output:

WHERE or:

WHERE or is also same like other programming language if anyone condition true means it will execute otherwise its execute 0 rows.

SELECT * from student WHERE stdname='shobi' or stddept='ECE';

ouput:

SELECT * from student WHERE stdname='divya' or stddept='AGRI';

output:

AS:

SQL aliases are used to give a table, or a column in a table, a temporary name.

SELECT stddept as department from student;

output:

*WHERE NOT : *

SELECT * from student WHERE stddept <> 'ECE';

or 

SELECT * from student WHERE != stddept='ECE';

or

SELECT * from student WHERE not stddept='ECE';

output:

> GREATER THAN:

SELECT * from student WHERE year>2;

output:

< LESS THAN:

SELECT * from student WHERE year>4;

output:

BETWEEN:

The BETWEEN operator is used to specify the within the range of the given value.

SELECT * from student WHERE stdname BETWEEN 'hindhu' AND ' shobi';

output:

IN :

The IN operator is used to specify the list of possible value .

SELECT * from student WHERE stddept in ('CSE','ECE');

output:

ORDER BY:

Order by is used to sort the values in the database usually order by give the values in ascending order. we can also change it in descending order.

SELECT * from student ORDERBY stdname;

output:

If you want the student name in descending order means you have to give the desc ;

SELECT * from student ORDE BY stdname desc;

output:

LIMIT:

Limit is used to get the limited amount of data like if we want first 5 data means we can give limit 5 then it display the first 5 data.

SELECT stdrollno, stdname from student limit 3;

output:

In Limit we can use the order by keyword

SELECT * from student ORDER BY stddept limit 3;

output:

LIKE :

Like operator is used to get the values in database based on starting letter, ending letter and also inbetween letter

if you want starting letter means 's%';
if you want ending letter means '%s';
if you want inbetween letter means '%a%';

SELECT stdname from student WHERE stdname LIKE '%i';

output:

SELECT stdname from student WHERE stdname LIKE 'h%';

output:

SELECT stdname from stduent where stdname like '%a%';

output:

PostgreSQL day-1

R.Shobika CSE — Thu, 06 Aug 2026 12:02:20 +0000

DBMS:

DBMS stands for "Database Management System"
It is used to manage the data from the database
DBMS is a software is allow to create, update and retrieval of data in a Organized way

RDBMS:

RDBMS stands for "Relational Database Management System"
RDBMS is a program used to maintain relational Database.
The data in RDBMS store in table format . A table is a collection of related entity (entity means things).

SQL:

SQL stands for "Structured Query Language".
SQL lets you access and manipulate databases.

PostgreSQL:

PostgreSQL is a Relational Database Management System
It is a open source RDBMS it is used to store, manage, retrieve and Manipulate the data

Difference between PostgreSQL and MySQL

PostgreSQL	MySQL
More advanced	Beginner friendly
Open Source	Open Source
Large applications	Small & Medium applications
Better performance for complex queries	Faster for simple queries

Installation of PostgreSQL:

1. sudo apt update
2. sudo apt install postgresql postgresql-contrib
3. sudo systemctl status postgresql
4. sudo systemctl enable postgresql
5. sudo -i -u postgres
6.PSQL

comments of PostgreSQL

\h ---> help
\l ---> list
\r ---> stop/recover
\c ---> connect

CREATION OF DATABASE:

CREATE database college;
\c ---> connect the database

*TABLE CREATION *

CREATE table student(
stdroll int,
stdname varchar(20),
department varchar(10),
year int,
);

INSERT DATA INTO A TABLE:

// single value insert
INSERT INTO student values ('01','shobi','CSE',4);

// multiple value insert
INSERT INTO student values ('02','shiva','ECE',3),('03','ajitha','EEE',2);

// we can change the order of the values
INSERT Into student (stdname, stdroll, department, year) values ( 'abi','09','IT',1);

SELECT THE VALUES IN A TABLE

SELECT * from student;