Web practical
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:1 Setting Up React Environment and Creating a Basic React Application .(Install Node.js, NPM, Create React App).
node -v
npm -v
npm install -g create-react-app
npx create-react-app syimcaclass
cd syimcaclass
npm start
App.js
import React from 'react';
function App() {
return (
<div>
<h1>Hello React World!</h1>
<p>This is my first React App.</p>
</div>
);
}
export default App;
Output:
________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:2 JSX and Component Creation Using Props.
node -v
npm -v
npm install -g create-react-app
npx create-react-app jsxcomponent
cd jsxcomponent
npm start
Greeting.js.
import React from 'react';
function Greeting(props) {
return <p>Hello, {props.name}! Nice to see you.</p>;
}
export default Greeting;
App.js
import React from 'react';
import Greeting from './Greeting';
function App() {
return (
<div>
<h1>Welcome to the App</h1>
<Greeting name="Hupesh" />
<Greeting name="Kalpesh" />
<Greeting name="Sanket" />
</div>
);
}
export default App;
Output:
_______$$$_______$$$$$$$$$$
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:3 State Management in React Using use State: Building a Counter App.
npm i create-react-app
npx create-react-app counter-app
cd counter-app
npm start
App.js
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
const increase = () => setCount(count + 1);
const decrease = () => setCount(count - 1);
const reset = () => setCount(0);
return (
<div className="App" style={{ marginTop: '50px', textAlign: 'center' }}>
<h1>Counter App</h1>
<h2>{count}</h2>
<button onClick={increase}>Increase</button>
<button onClick={decrease} style={{ margin: '0 10px' }}>Decrease</button>
<button onClick={reset}>Reset</button>
</div>
);
}
export default App;
npm start
Output:
_________________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:4
Event Handling in React: Managing Button Clicks and Input Changes.
npm i create-react-app
npx create-react-app eventhandling
cd eventhandling
npm start
App.js
import React from 'react';
import SimpleEventHandling from './SimpleEventHandling';
function App() {
return (
<div>
<SimpleEventHandling />
</div>
);
}
export default App;
SimpleEventHandling.js.
import React, { useState } from 'react';
function SimpleEventHandling() {
const [inputValue, setInputValue] = useState('');
const [message, setMessage] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleButtonClick = () => {
setMessage(inputValue);
};
return (
<div style={{ padding: '20px' }}>
<h2>React Event Handling Example</h2>
<input
type="text"
placeholder="Type something..."
value={inputValue}
onChange={handleInputChange}
/>
<button onClick={handleButtonClick} style={{ marginLeft: '10px' }}>
Show Message
</button>
<p>Your Message: {message}</p>
</div>
);
}
export default SimpleEventHandling;
npm start
Output:
___________________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:5
Rendering Dynamic Lists in React Using Array Mapping and Key Props.
npm i create-react-app
npx create-react-app dynamiclist
cd dynamiclist
npm start
ItemList.js
import React from 'react';
function ItemList() {
const items = ['Pen', 'Notebook', 'Eraser', 'Pencil'];
return (
<div style={{ padding: '20px' }}>
<h2>Stationery Items</h2>
{/* 2. Render list using map() */}
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li> // 3. Use 'key' prop for each list item
))}
</ul>
</div>
);
}
export default ItemList;
App.js
import React from 'react';
import ItemList from './ItemList'; // import the new component
function App() {
return (
<div>
<h1>Welcome to My React App</h1>
<ItemList /> {/* render the list component */}
</div>
);
}
export default App;
npm start
Output:
________________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:6 Building Controlled Forms in React: Managing State and Implementing Basic Validation
npm i create-react-app
npx create-react-app forms
cd forms
npm start
App.js
import { useState } from 'react';
export default function MyForm() {
const [inputValue, setInputValue] = useState('');
const [inputError, setInputError] = useState(null);
function handleInputChange(event) {
const value = event.target.value;
setInputValue(value);
if (value.length < 5) {
setInputError('Input must be at least 5 characters');
} else {
setInputError(null);
}
}
function handleSubmit(event) {
event.preventDefault();
if (inputValue.length >= 5) {
// submit form
} else {
setInputError('Input must be at least 5 characters');
}
}
return (
<form onSubmit={handleSubmit} style={{margin:"50px"}}>
<label>
Fruit:
<input type="text" value={inputValue} onChange={handleInputChange} />
</label>
{inputError && <div style={{ color: 'red' }}>{inputError}</div>}
<button type="submit">Submit</button>
</form>
);
}
Output:
__________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:7 Styling React Components: Implementing CSS Modules and Inline Styles.
npm i create-react-app
npx create-react-app forms
cd forms
npm start
App.js
import react from "react";
export default function Home() {
const myStyles = {
textAlign: 'center',
marginTop: '2rem',
color: '#F43596',
};
return (
<main>
<h1 style={myStyles}>Hello</h1>
</main>
);
}
Output:
_______________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:9 Developing a Personal Portfolio Website with React and Bootstrap.
npm i create-react-app
npx create-react-app my-portfolio
cd my-portfolio
npm install bootstrap
npm start
In src/index.js, add this import:
import 'bootstrap/dist/css/bootstrap.min.css';
App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<nav className="navbar navbar-dark bg-dark p-3">
<h1 className="text-white mx-auto">My Portfolio</h1>
</nav>
<section className="container mt-4">
<h2>About Me</h2>
<p>Hello! I'm learning React and building my first portfolio.</p>
</section>
<section className="container mt-4">
<h2>Projects</h2>
<ul>
<li>Project 1 - A to-do list app</li>
<li>Project 2 - A simple weather app</li>
</ul>
</section>
<section className="container mt-4 mb-5">
<h2>Contact</h2>
<p>Email: you@example.com</p>
</section>
</div>
);
}
export default App;
Output:
_________________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:10 Setting Up a Node.js and Express.js Development Environment: A Practical Guide.
mkdir fullstack-app
cd fullstack-app
mkdir backend
cd backend
npm init -y
npm install express cors
server.js
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 5000;
app.use(cors());
app.use(express.json());
// Dummy API
app.get('/api/message', (req, res) => {
res.json({ message: "Hello from the backend!" });
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
node server.js
Output:
_____________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:12 Building a RESTful API with Express.js: A Hands-On Guide to HTTP Methods on (Customer details).
node -v
npm -v
mkdir customer-api
cd customer-api
npm init -y
npm install express
index.js
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
let customers = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' }
];
app.get('/customers', (req, res) => {
res.json(customers);
});
app.get('/customers/:id', (req, res) => {
const id = parseInt(req.params.id);
const customer = customers.find(c => c.id === id);
if (!customer) {
return res.status(404).send('Customer not found');
}
res.json(customer);
});
app.post('/customers', (req, res) => {
const { name, email } = req.body;
const newCustomer = {
id: customers.length + 1,
name,
email
};
customers.push(newCustomer);
res.status(201).json(newCustomer);
});
app.put('/customers/:id', (req, res) => {
const id = parseInt(req.params.id);
const customer = customers.find(c => c.id === id);
if (!customer) {
return res.status(404).send('Customer not found');
}
customer.name = req.body.name || customer.name;
customer.email = req.body.email || customer.email;
res.json(customer);
});
app.delete('/customers/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = customers.findIndex(c => c.id === id);
if (index === -1) {
return res.status(404).send('Customer not found');
}
const deletedCustomer = customers.splice(index, 1);
res.json(deletedCustomer);
});
app.listen(port, () => {
console.log(`Customer API is running at http://localhost:${port}`);
});
node index.js
Output:
_____________________
Practical no:13 Building RESTful APIs: Managing JSON POST Requests in Express.js (Employee Post Method).
npm init -y
npm install express
index.js
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
let employees = [
{ id: 1, name: 'Alice', role: 'Developer' },
{ id: 2, name: 'Bob', role: 'Designer' }
];
app.get('/employees', (req, res) => {
res.json(employees);
});
app.post('/employees', (req, res) => {
const newEmployee = req.body;
if (!newEmployee.name || !newEmployee.role) {
return res.status(400).json({ error: 'Name and role are required' });
}
newEmployee.id = employees.length + 1;
employees.push(newEmployee);
res.status(201).json(newEmployee);
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
node index.js
Output:
__________________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:14 Implementing CRUD Operations (Students)Using RESTful API and HTTP Methods.
mkdir students-api
cd students-api
npm init -y
npm install express
index.js
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
let students = [];
let nextId = 1;
app.post('/students', (req, res) => {
const student = { id: nextId++, ...req.body };
students.push(student);
res.status(201).json({ message: 'Student created', student });
});
app.get('/students', (req, res) => {
res.json(students);
});
app.get('/students/:id', (req, res) => {
const student = students.find(s => s.id == req.params.id);
if (!student) {
return res.status(404).json({ message: 'Student not found' });
}
res.json(student);
});
app.put('/students/:id', (req, res) => {
const index = students.findIndex(s => s.id == req.params.id);
if (index === -1) {
return res.status(404).json({ message: 'Student not found' });
}
students[index] = { id: students[index].id, ...req.body };
res.json({ message: 'Student updated', student: students[index] });
});
app.delete('/students/:id', (req, res) => {
const index = students.findIndex(s => s.id == req.params.id);
if (index === -1) {
return res.status(404).json({ message: 'Student not found' });
}
const removedStudent = students.splice(index, 1);
res.json({ message: 'Student deleted', student: removedStudent[0] });
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
node index.js
Output:
____________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2 Practical No:15 Setting up Mongo DB Environment: Teachers API with MongoDB by using MongoDB Compass.
mkdir teachers-api
cd teachers-api
npm init -y
npm install express mongoose
server.js
const express = require('express');
const mongoose = require('mongoose');
const app = express();
app.use(express.json());
mongoose.connect('mongodb://localhost:27017/teachersDB', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log("✅ Connected to MongoDB"))
.catch(err => console.error("❌ MongoDB connection error:", err));
const teacherSchema = new mongoose.Schema({
name: String,
subject: String,
email: String,
experience: Number,
available: Boolean
});
const Teacher = mongoose.model('Teacher', teacherSchema);
app.get('/teachers', async (req, res) => {
const teachers = await Teacher.find();
res.json(teachers);
});
app.post('/teachers', async (req, res) => {
const teacher = new Teacher(req.body);
await teacher.save();
res.status(201).json(teacher);
});
app.get('/teachers/:id', async (req, res) => {
const teacher = await Teacher.findById(req.params.id);
if (!teacher) return res.status(404).send('Teacher not found');
res.json(teacher);
});
app.put('/teachers/:id', async (req, res) => {
const teacher = await Teacher.findByIdAndUpdate(req.params.id, req.body, { new: true });
if (!teacher) return res.status(404).send('Teacher not found');
res.json(teacher);
});
app.delete('/teachers/:id', async (req, res) => {
const result = await Teacher.findByIdAndDelete(req.params.id);
if (!result) return res.status(404).send('Teacher not found');
res.send('Teacher deleted');
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`🚀 Server is running at http://localhost:${PORT}`);
});
node server.js
Output:
____________
Name: Hupesh Manohar Zope Roll No:- 52 Batch:-B2
Practical No:16 Setting up Mongo DB Environment: Teachers API with MongoDB by using MongoDB Compass.
mkdir inventory-mini-api
cd inventory-mini-api
npm init -y
npm install express mongoose cors
server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
mongoose.connect('mongodb://localhost:27017/inventoryDB', {
useNewUrlParser: true,
useUnifiedTopology: true
});
const Item = mongoose.model('Item', new mongoose.Schema({
name: String,
quantity: Number
}));
app.get('/items', async (req, res) => res.json(await Item.find()));
app.post('/items', async (req, res) => res.json(await new Item(req.body).save()));
app.delete('/items/:id', async (req, res) => {
await Item.findByIdAndDelete(req.params.id);
res.send('Deleted');
});
app.listen(5000, () => console.log('Backend running on http://localhost:5000'));
npx create-react-app inventory-mini-client
cd inventory-mini-client
npm install axios
App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const API = "http://localhost:5000/items";
function App() {
const [items, setItems] = useState([]);
const [name, setName] = useState('');
const [quantity, setQuantity] = useState(1);
const loadItems = async () => setItems((await axios.get(API)).data);
const addItem = async () => {
await axios.post(API, { name, quantity });
setName('');
setQuantity(1);
loadItems();
};
const deleteItem = async (id) => {
await axios.delete(`${API}/${id}`);
loadItems();
};
useEffect(() => { loadItems(); }, []);
return (
<div style={{ padding: 20 }}>
<h2>📦 Inventory</h2>
<input value={name} onChange={e => setName(e.target.value)} placeholder="Item Name" />
<input type="number" value={quantity} onChange={e => setQuantity(Number(e.target.value))} />
<button onClick={addItem}>Add</button>
<ul>
{items.map(item => (
<li key={item._id}>
{item.name} - Qty: {item.quantity}
<button onClick={() => deleteItem(item._id)}>❌</button>
</li>
))}
</ul>
</div>
);
}
export default App;
cd inventory-mini-api
node server.js
cd inventory-mini-client
npm start
Output:
Comments
Post a Comment