UNIT-3 FULL STACK AMT
1. Express.js – Building APIs:-
Theory:-
Express.js is a fast, minimal, and flexible framework for Node.js that simplifies
server-side development. It helps developers build APIs efficiently by handling
routing, middleware, and HTTP methods.
Key Concepts:-
1. Routing: Defines paths (/api/users, /api/products) to serve different
responses.
2. Middleware: Functions that process requests before sending responses
(e.g., authentication).
3. HTTP Methods: Express handles GET, POST, PUT, DELETE requests easily.
4. JSON Handling: Makes data exchange between frontend and backend
seamless.
Syntax & Example:-
Setting Up an Express API:-
const express = require('express');
const app = express();
// Middleware to parse JSON requests
app.use(express.json());
// Basic API Route
app.get('/api/greet', (req, res) => {
res.json({ message: "Hello, world!" });
});
// Starting the server
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Real-Life Analogy:-
Think of Express.js as a receptionist at an office. When visitors (users) request
information, the receptionist (server) listens to their request and directs them
to the right department (API response). Each query follows a predefined route,
ensuring smooth communication.
2. React Hooks – Managing State & Side Effects:-
(A) useState – Managing Component State:-
Theory:-
useState is a built-in React Hook used to store and manage dynamic data in a
functional component.
Key Features:-
• Maintains state within a component.
• Triggers UI updates when state changes.
• Accepts an initial value (e.g., useState(0)).
Syntax & Example:-
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0); // Initial state set to 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
Real-Life Analogy:-
Imagine a scoreboard in a football match. Every time a team scores, the
numbers on the scoreboard update. Similarly, useState helps update data
(score) dynamically.
(B) useEffect – Handling Side Effects:-
Theory:-
useEffect is a React Hook used to perform side effects in functional
components, such as:
1. Fetching API Data – Fetching new data from an API.
2. DOM Manipulations – Updating UI elements.
3. Timers & Intervals – Running periodic actions.
Syntax & Example:-
Fetching Data from an API
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => setData(json));
}, []); // Runs only once when the component mounts
return (
<div>
{data ? <p>{data.title}</p> : <p>Loading...</p>}
</div>
);
};
export default DataFetcher;
Real-Life Analogy:-
Think of useEffect like a sensor light in a room. It detects movement and
automatically turns on when needed. In React, useEffect runs a function when
the component is mounted or updated.
3. Connecting Express.js and React:-
Integration Steps:-
1. Express Backend: Creates an API that serves data.
2. React Frontend: Fetches data using fetch() or Axios.
3. useState Storage: React stores API data in state.
4. useEffect Execution: Ensures data fetching runs only when required.
Example Integration:-
Express Backend – API Endpoint
app.get('/api/message', (req, res) => {
res.json({ message: "Welcome to my API!" });
});
React Frontend – Fetch API Data
import React, { useState, useEffect } from 'react';
const FetchMessage = () => {
const [message, setMessage] = useState("");
useEffect(() => {
fetch('http://localhost:3000/api/message')
.then(res => res.json())
.then(data => setMessage(data.message));
}, []);
return <h1>{message}</h1>;
};
export default FetchMessage;
Real-Life Analogy:-
Think of Express as a chef preparing meals in the kitchen (backend). React is
the customer who orders a dish (API request), and the waiter (fetch request)
delivers it to the table.
Structured comparison between Express.js, React’s useState, and
useEffect:-
