🔗 Connecting React Frontend to Backend API

Now you connect React (Frontend) with Node.js/Express (Backend). This is the core of full-stack development. Frontend sends HTTP requests → Backend processes → Returns JSON data.

🧠 How Frontend and Backend Communicate

Flow:
1️⃣ React sends request (API call)
2️⃣ Backend receives request
3️⃣ Backend processes logic
4️⃣ Backend sends response
5️⃣ React updates UI

Example: React → GET /users → Express API → JSON → React UI

🌐 API Request Methods Used in React

- GET: Fetch data
- POST: Send data
- PUT: Update data
- DELETE: Remove data

⚡ Method 1: Fetch API

JavaScript has a built-in function called fetch().

📥 Example: Fetch users from backend

Backend endpoint: GET http://localhost:3000/users

React code:

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("http://localhost:3000/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <h2>User List</h2>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default App;

Result: React automatically displays backend data.

➕ Sending Data to Backend (POST)

Example: Add new user.

const addUser = async () => {
  await fetch("http://localhost:3000/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "Deepak" })
  });
};

Backend receives JSON and stores it.

✏️ Updating Data (PUT)

await fetch("http://localhost:3000/users/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "Updated Name" })
});

❌ Deleting Data (DELETE)

await fetch("http://localhost:3000/users/1", {
  method: "DELETE"
});

🧩 Common Full Stack Folder Structure

project/
├── client/ (React frontend)
│    └── src/
├── server/ (Node backend)
│    └── routes/
├── package.json

Frontend and backend run separately.

⚠️ Common Beginner Issues

1️⃣ CORS error
Backend must allow frontend.
Example:

const cors = require("cors");
app.use(cors());

Install: npm install cors

2️⃣ Wrong API URL
Frontend must call: http://localhost:3000/api/users

3️⃣ Missing JSON middleware
app.use(express.json())

🧪 Mini Practice Task

Build a simple React + Express full stack app
Tasks:
- Fetch users from backend
- Display users in React
- Add new user from React form
- Delete user from UI

➡️ Double Tap ♥️ For More