Scribd
Upload
0 views

Programs

React program

Uploaded by

bdvt blore
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

Programs

React program

Uploaded by

bdvt blore
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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"

You might also like