Connect Node.js and React: Build Your First Full-Stack App

If you are learning web dev, you already know a bit of Node.js (backend) or React (frontend). But guess what? 🚀 Real projects need both working together. In this guide, we will build a very simple full-stack app by connecting Node.js API with a React frontend.

🤔 What is Full-Stack?

Backend (Node.js) → talks to database, handles API.
Frontend (React) → shows the data to the user in browser.

When backend + frontend = ❤️ → you get a full-stack app.

🛠 Step 1: Make a Small Node.js API

Let’s start with backend. Create a file server.js:

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

app.get("/api/message", (req, res) => {
  res.json({ message: "Hello from Node.js backend!" });
});

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Run this:

npm init -y
npm install express
node server.js

👉 Open http://localhost:5000/api/message and you’ll see JSON response.

⚛️ Step 2: Create a React App

Now the frontend part. Make a new React app:

npx create-react-app myapp
cd myapp
npm start

This opens http://localhost:3000 with a starter React page.

🔗 Step 3: Connect React to Node.js

Edit App.js like this:

import { useEffect, useState } from "react";

function App() {
  const [msg, setMsg] = useState("");

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

  return (
    <div>
      <h1>Full Stack App</h1>
      <p>{msg}</p>
    </div>
  );
}

export default App;

export default App;

👀 Step 4: Test It Out

Start backend → node server.js (port 5000)
Start frontend → npm start (port 3000)
Open browser → http://localhost:3000

🎉 You will see: “Hello from Node.js backend!”

🚀 Why This Matters

Node.js = API / data provider
React = UI / data viewer
Together → you created your first full-stack app

This is just the start. Next, you can add database (MongoDB, MySQL), more routes, or even deploy online.

🔗 References & Contact

If you want to learn more, check out the official docs for Node.js and React. You can also read my related blogs: How to Build Your First Node.js API and What is React: My Way of Understanding It.

For questions, feedback, or just to say hi 👋, you can reach me at info@vaibhavjha.in, or on LinkedIn @vaibhavjha08.