Q105- Explain client-server architecture in a React application

In a React application, the client-server architecture separates the frontend (client) from the backend (server), allowing scalable, maintainable, and modular apps.

---

1️⃣ Client (Frontend)

• Built with React
• Runs in the browser
• Responsibilities:
  • Rendering UI
  • Handling user interactions
  • Making HTTP requests to the backend (REST API, GraphQL)
  • Managing local state (e.g., with React state, Redux, or Context API)

Example:

// Fetching data from server in React
import React, { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

---

2️⃣ Server (Backend)

• Built with Node.js, Express, or any backend tech
• Runs on a server or cloud
• Responsibilities:
  • Serve APIs (REST/GraphQL)
  • Interact with databases
  • Handle authentication and authorization
  • Business logic, validation, caching, and data processing

Example: Express API

const express = require("express");
const app = express();

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

app.get("/users", (req, res) => {
  res.json(users);
});

app.listen(5000, () => console.log("Server running on port 5000"));

---

3️⃣ Interaction Flow

1. User interacts with React UI (client)
2. React sends an HTTP request to the backend
3. Server processes the request, fetches data from DB if needed
4. Server responds with JSON
5. React updates the UI with received data

---

4️⃣ Benefits

• Separation of concerns: UI logic vs business logic
• Scalability: Frontend and backend can scale independently
• Flexibility: Frontend can consume multiple APIs (microservices)
• Reusability: Backend APIs can be used by mobile apps or other clients

---

⚡ In short:

In a React application, the client handles the UI and state, while the server handles data, business logic, and authentication. Communication occurs via HTTP/HTTPS APIs, forming a client-server architecture that is scalable, modular, and maintainable.