Programs
Exeriment-6
1. create a folder like mkdir 6
2. cd 6
[Link] create vite@latest count
[Link] count, npm install
5. Under Src folder
[Link]
import { useState } from 'react'
import reactLogo from './assets/[Link]'
import viteLogo from '/[Link]'
import './[Link]'
import Statemgtclass from './Statemgtclass'
function App() {
return (
<div>
{/*<Statemgt/>*/}
<Statemgtclass/>
</div>
}
export default App
using functional component
[Link]
import React from 'react'
import { useState } from 'react'
const Statemgt = () => {
const[number,setNumber]=useState(0)
const incrememt=()=>{
setNumber(number+1)
const decrememt=()=>{
if(number>0)
setNumber(number-1)
const reset=()=>{
setNumber(0)
const double=()=>{
setNumber(number*2)
return (
<div><h1>number</h1>
<h1>{number}</h1>
<br></br>
<button onClick={incrememt}>increment</button>
<button onClick={decrememt}>decrement</button>
<button onClick={double}>double</button>
<button onClick={reset}>reset</button>
</div>
export default Statemgt
using class component
============
[Link]
import React, { Component } from 'react';
class Statemgtclass extends Component {
state = { number: 0 };
increment = () => {
const value = [Link] + 1;
[Link]({ number: value });
};
decrement = () => {
if([Link] > 0){}
const value = [Link] - 1;
[Link]({ number: value });
};
reset = () => {
[Link]({ number: 0 });
};
double = () => {
const value = [Link] * 2;
[Link]({ number: value });
};
render() {
return (
<div>
<h1>Number</h1>
<h1>{[Link]}</h1>
<br />
<button onClick={[Link]}>Increment</button>
<button onClick={[Link]}>Decrement</button>
<button onClick={[Link]}>Double</button>
<button onClick={[Link]}>Reset</button>
</div>
);
export default Statemgtclass;
6. o/p: npm run dev
experiment-7
1. Create a folder exprejs
2. Cd expressjs
3. npm init -y
4. npm install express or npm i express
5. npm i -D nodemon
6. now create a [Link] file
7. under [Link] file copy and paste the below code
[Link]
import express, { json } from 'express'; // Use require instead of import
const app = express();
[Link](json()); // This is required to parse JSON data
[Link]('/', (req, res) => {
[Link]('Hello, World!');
});
const products=[
{ id:1,
name:"mi"
},
{ id:2,
name:"iphone"
},
{ id:3,
name:"oppo"
}
]
[Link]('/products', (req, res) => {
[Link](products);
});
[Link]('/products/:id', (req, res) => {
const newData=[Link](item=>[Link]()===[Link])
[Link](newData);
});
[Link]('/addproducts', (req, res) => {
const { id, name } = [Link];
const newProduct = { id, name };
[Link](newProduct);
[Link](newProduct);
});
[Link]('/updateproducts/:id', (req, res) => {
const product = [Link](item => [Link]() === [Link]);
[Link](product, [Link]);
[Link](product);
});
[Link]('/deleteproducts/:id', (req, res) => {
const index = [Link](item => [Link]() === [Link]);
const deletedProduct = [Link](index, 1);
[Link](deletedProduct);
});
[Link](3000, () => {
[Link]('Server running on [Link]
});
Under [Link] ensure all the following things are there or not
{
"name": "expressjs",
"version": "1.0.0",
"description": "",
"license": "ISC",
"author": "",
"type": "module",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node [Link]",
"server": "nodemon [Link]"
},
"dependencies": {
"express": "^4.21.2"
},
"devDependencies": {
"nodemon": "^3.1.9"
}
}
o/p:
npm run server
next install the postman
Install Postman
1. Visit the Postman website and download the application for your operating system
(Windows, Mac, or Linux).
2. Install Postman by following the prompts.
Next click on new there select http after selecting http here you can see the all apis like get,
get/id, put/id, post, delete/id…etc
Get: [Link]
Post: [Link]
Put/id: [Link]
Get/id: [Link]
Delete: [Link]
Json data Example
"id": 1,
"name": "Laptop"