React.js vs Node.js — Comparison for Beginners

// Node + Express — a small API.
// Node's job: handle requests and return JSON.

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

const app = express();
app.use(express.json());
app.use(cors());  // allow the React app on :3000 to call this API on :4000

// In-memory data (a real app uses a database)
let todos = [
  { id: 1, title: "Learn Node", done: true },
  { id: 2, title: "Learn React", done: false },
];

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

// POST /api/todos
app.post("/api/todos", (req, res) => {
  const newTodo = {
    id: Date.now(),
    title: req.body.title,
    done: false,
  };
  todos.push(newTodo);
  res.status(201).json(newTodo);
});

// PATCH /api/todos/:id
app.patch("/api/todos/:id", (req, res) => {
  const id = Number(req.params.id);
  const todo = todos.find((t) => t.id === id);

  if (!todo) {
    return res.status(404).json({ error: "not found" });
  }

  Object.assign(todo, req.body);
  res.json(todo);
});

// DELETE /api/todos/:id
app.delete("/api/todos/:id", (req, res) => {
  const id = Number(req.params.id);
  todos = todos.filter((t) => t.id !== id);
  res.status(204).end();
});

app.listen(4000, () => {
  console.log("API running at http://localhost:4000");
});

// What Node does here:
// - Accepts HTTP requests from the React app
// - Handles GET, POST, PATCH, DELETE
// - Sends JSON back
// - Manages the todos array (in real life: a database)
//
// What Node does NOT do:
// - Render anything visual
// - Show a button or a list
// - Manage React state
//
// That's React's job.

// React — fetch data from the Node API.
// React's job: render the UI and manage state.

import { useEffect, useState } from "react";

const API = "http://localhost:4000/api/todos";

export default function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTitle, setNewTitle] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  // Fetch todos when the component mounts
  useEffect(() => {
    async function load() {
      try {
        const res = await fetch(API);
        if (!res.ok) throw new Error("Failed to load todos");
        setTodos(await res.json());
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  async function addTodo(e) {
    e.preventDefault();
    if (!newTitle.trim()) return;

    const res = await fetch(API, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: newTitle }),
    });

    if (res.ok) {
      const created = await res.json();
      setTodos((prev) => [...prev, created]);
      setNewTitle("");
    }
  }

  async function toggleTodo(id, done) {
    const res = await fetch(`${API}/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ done: !done }),
    });

    if (res.ok) {
      const updated = await res.json();
      setTodos((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
    }
  }

  if (loading) return <p>Loading…</p>;
  if (error) return <p className="error">{error}</p>;

  return (
    <div className="todo-app">
      <h1>My Todos</h1>

      <form onSubmit={addTodo}>
        <input
          value={newTitle}
          onChange={(e) => setNewTitle(e.target.value)}
          placeholder="Add a todo…"
        />
        <button type="submit">Add</button>
      </form>

      <ul>
        {todos.map((t) => (
          <li key={t.id} onClick={() => toggleTodo(t.id, t.done)}>
            <span style={{ textDecoration: t.done ? "line-through" : "none" }}>
              {t.title}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// What React does here:
// - Renders the todo list
// - Manages local state (todos, newTitle, loading, error)
// - Calls the Node API with fetch()
// - Re-renders when the state changes
//
// What React does NOT do:
// - Store the todos on the server
// - Handle HTTP routing
// - Manage authentication at the API level
//
// That's Node's job.

# Running a full-stack React + Node app
# This is the setup almost every MERN project uses.
#
# Project structure:
#
# my-app/
# ├── server/            ← Node backend
# │   ├── index.js       ← Express API
# │   ├── routes/
# │   └── package.json
# └── client/            ← React frontend
#     ├── src/
#     │   ├── App.js
#     │   ├── TodoApp.js
#     │   └── index.js
#     └── package.json
#
# ── Step 1: Set up the Node backend ──
#
#   cd server
#   npm init -y
#   npm install express cors
#   node index.js
#
#   → API running at http://localhost:4000
#
# ── Step 2: Set up the React frontend ──
#
#   cd ../client
#   npx create-react-app .
#   npm start
#
#   → React app running at http://localhost:3000
#
# ── Step 3: The two talk over HTTP ──
#
#   Browser (port 3000)              Server (port 4000)
#   ┌─────────────────┐              ┌──────────────────┐
#   │   React app     │── GET /api/todos ─→│  Express API  │
#   │   (in browser)  │←── JSON ────────│  (in Node)    │
#   └─────────────────┘              └──────────────────┘
#
# ── Step 4: For production, both run on the same server ──
#
#   In production:
#   - React is built (npm run build) into static HTML/CSS/JS
#   - Node serves those static files + the API
#   - Users visit one URL, not two
#
#   const path = require("path");
#   app.use(express.static(path.join(__dirname, "../client/build")));
#   app.get("*", (req, res) => {
#     res.sendFile(path.join(__dirname, "../client/build", "index.html"));
#   });
#
# ── The whole point ──
#
# React and Node are not competitors.
# React runs in the browser. Node runs on the server.
# They talk to each other over HTTP.
# Together, they are a full-stack JavaScript application.