Programs
Exeriment-6
1. create a folder like mkdir 6
2. cd 6
3.npm create vite@latest count
4.cd count, npm install
5. Under Src folder
App.jsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Statemgtclass from './Statemgtclass'
function App() {
return (
<div>
{/*<Statemgt/>*/}
<Statemgtclass/>
</div>
}
export default App
using functional component
Statemgt.jsx
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
============
Statemgtclass.jsx
import React, { Component } from 'react';
class Statemgtclass extends Component {
state = { number: 0 };
increment = () => {
const value = this.state.number + 1;
this.setState({ number: value });
};
decrement = () => {
if(this.state.number > 0){}
const value = this.state.number - 1;
this.setState({ number: value });
};
reset = () => {
this.setState({ number: 0 });
};
double = () => {
const value = this.state.number * 2;
this.setState({ number: value });
};
render() {
return (
<div>
<h1>Number</h1>
<h1>{this.state.number}</h1>
<br />
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
<button onClick={this.double}>Double</button>
<button onClick={this.reset}>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 server.js file
7. under server.js file copy and paste the below code
server.js
import express, { json } from 'express'; // Use require instead of import
const app = express();
app.use(json()); // This is required to parse JSON data
app.get('/', (req, res) => {
res.send('Hello, World!');
});
const products=[
{ id:1,
name:"mi"
},
{ id:2,
name:"iphone"
},
{ id:3,
name:"oppo"
}
]
app.get('/products', (req, res) => {
res.send(products);
});
app.get('/products/:id', (req, res) => {
const newData=products.filter(item=>item.id.toString()===req.params.id)
res.send(newData);
});
app.post('/addproducts', (req, res) => {
const { id, name } = req.body;
const newProduct = { id, name };
products.push(newProduct);
res.send(newProduct);
});
app.put('/updateproducts/:id', (req, res) => {
const product = products.find(item => item.id.toString() === req.params.id);
Object.assign(product, req.body);
res.send(product);
});
app.delete('/deleteproducts/:id', (req, res) => {
const index = products.findIndex(item => item.id.toString() === req.params.id);
const deletedProduct = products.splice(index, 1);
res.send(deletedProduct);
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
Under package.json ensure all the following things are there or not
{
"name": "expressjs",
"version": "1.0.0",
"description": "",
"license": "ISC",
"author": "",
"type": "module",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"server": "nodemon server.js"
},
"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: http://localhost:3000/products
Post: http://localhost:3000/addproducts
Put/id: http://localhost:3000/updateproducts/2
Get/id: http://localhost:3000/products/2
Delete: http://localhost:3000/deleteproducts/1
Json data Example
"id": 1,
"name": "Laptop"
