How do you connect a React frontend with an Express backend?

The Best Full Stack MERN Training Institute in Hyderabad with Live Internship Program

If you're looking to build a successful career in web development, Quality Thought is the top destination in Hyderabad for Full Stack MERN (MongoDB, Express.js, React, Node.js) training. Known for its industry-oriented curriculum and expert trainers, Quality Thought equips students with the skills needed to become job-ready full stack developers.

Our MERN Stack training program covers everything from front-end to back-end development. You'll start with MongoDB, a powerful NoSQL database, move on to Express.js and Node.js for back-end development, and master React for building dynamic and responsive user interfaces. The course structure is designed to offer a perfect blend of theory and hands-on practice, ensuring that students gain real-world coding experience.

What sets Quality Thought apart is our Live Internship Program, which allows students to work on real-time industry projects. This not only strengthens technical skills but also builds confidence to face real development challenges. Students get direct mentorship from industry experts, and experience the workflow of actual development environments, making them industry-ready.

We also provide complete placement assistance, resume building sessions, mock interviews, and soft skills training to help our students land high-paying jobs in top tech companies.

Join Quality Thought and transform yourself into a skilled MERN Stack Developer. Whether you're a fresher or a professional looking to upskill, this course is your gateway to exciting career opportunities in full stack development.

Enroll now and take the first step toward becoming a certified MERN stack professional with hands-on internship experience!

🔹 1. Set up the Express Backend

Create a simple Express server that exposes APIs.

// backend/index.js
const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());         // allow React frontend requests
app.use(express.json()); // parse JSON request body

// Example API route
app.get("/api/message", (req, res) => {
  res.json({ message: "Hello from Express backend!" });
});

const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

👉 Run it with:

node index.js

Your backend runs on http://localhost:5000.

🔹 2. Set up the React Frontend

In your React project, call the Express API.

// frontend/src/App.js
import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState("");

  useEffect(() => {
    fetch("http://localhost:5000/api/message")
      .then((res) => res.json())
      .then((result) => setData(result.message));
  }, []);

  return (
    <div>
      <h1>React + Express Example</h1>
      <p>{data}</p>
    </div>
  );
}

export default App;

🔹 3. Running Together

• Backend: node index.js (runs on 5000)

• Frontend: npm start (runs on 3000)

React makes a request from http://localhost:3000 → Express backend on 5000.
The cors() middleware in Express allows cross-origin requests.

🔹 4. Alternative: Proxy Setup

Instead of writing the full URL, you can set up a proxy in React.
In frontend/package.json add:

"proxy": "http://localhost:5000"

Now you can call:

fetch("/api/message")
  .then((res) => res.json())
  .then((data) => console.log(data));

🔑 Summary

1. Backend: Build REST API with Express (/api/...).

2. Frontend: Call API using fetch or axios.

3. CORS or Proxy: Solve cross-origin issues.

4. Ports: React (3000) ↔ Express (5000).

👉 Do you also want me to show how to deploy React + Express together on one server

Read More :

How do you scale a MERN app?

Explain the architecture of a MERN stack application.

Visit  Quality Thought Training Institute in Hyderabad