Návštěvní kniha: frontend a backend spolu

Velký okamžik: propojíš React se svým serverem. Vzkazy se konečně budou opravdu ukládat.

Co stavíme

Návštěvní knihu: formulář v Reactu pošle vzkaz na tvůj server, server si ho uloží a všem dalším návštěvníkům ho ukáže. Pamatuješ na formulář z Úrovně 2, který neměl kam posílat? Dnes svůj dluh splatíme.

Ukaž mi to: backend návštěvní knihy

Ve složce muj-server nejdřív doinstaluj jeden balíček:

npm install cors

A uprav server.js:

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

aplikace.use(cors());           // dovol frontendu z jiného portu se ptát
aplikace.use(express.json());   // rozuměj JSONu v příchozích požadavcích

const vzkazy = [
  { jmeno: "Martin", text: "První vzkaz! Ať kniha slouží. 📖" },
];

// GET – rozdávej vzkazy
aplikace.get("/api/vzkazy", (pozadavek, odpoved) => {
  odpoved.json(vzkazy);
});

// POST – přijmi nový vzkaz
aplikace.post("/api/vzkazy", (pozadavek, odpoved) => {
  const { jmeno, text } = pozadavek.body;

  // Nikdy nevěř vstupu: zkontroluj i na serveru!
  if (!jmeno || !text || jmeno.length > 50 || text.length > 500) {
    return odpoved.status(400).json({ chyba: "Neplatný vzkaz." });
  }

  vzkazy.push({ jmeno, text });
  odpoved.json({ ulozeno: true });
});

aplikace.listen(3900, () => {
  console.log("Server běží na http://localhost:3900");
});

Novinky:

cors() – frontend běží na portu 3901, server na 3900. Prohlížeč takové „přespolní” požadavky normálně blokuje (bezpečnostní pravidlo CORS); tímhle je serveru povolíš.
aplikace.post(...) – první POST endpoint! Data z formuláře najdeš v pozadavek.body.
Kontrola na serveru – formulář sice kontroluje už frontend, ale útočník umí formulář obejít a poslat požadavek přímo. Proto platí železné pravidlo: backend kontroluje vždycky, frontendu nevěří. status(400) znamená „špatný požadavek”.

Ukaž mi to: frontend návštěvní knihy

V React projektu vytvoř src/NavstevniKniha.jsx:

import { useState, useEffect } from 'react';

function NavstevniKniha() {
  const [vzkazy, setVzkazy] = useState([]);
  const [jmeno, setJmeno] = useState("");
  const [text, setText] = useState("");

  // Při prvním zobrazení: stáhni vzkazy ze serveru
  useEffect(() => {
    fetch("http://localhost:3900/api/vzkazy")
      .then((odpoved) => odpoved.json())
      .then((data) => setVzkazy(data));
  }, []);

  function odesli(udalost) {
    udalost.preventDefault();

    fetch("http://localhost:3900/api/vzkazy", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ jmeno, text }),
    })
      .then((odpoved) => odpoved.json())
      .then(() => {
        setVzkazy([...vzkazy, { jmeno, text }]);  // přidej i na obrazovku
        setJmeno("");
        setText("");
      });
  }

  return (
    <div>
      <h2>Návštěvní kniha 📖</h2>

      {vzkazy.map((vzkaz, poradi) => (
        <div className="karta" key={poradi}>
          <strong>{vzkaz.jmeno}</strong>
          <p>{vzkaz.text}</p>
        </div>
      ))}

      <form onSubmit={odesli}>
        <input
          value={jmeno}
          onChange={(udalost) => setJmeno(udalost.target.value)}
          placeholder="Tvoje jméno"
        />
        <textarea
          value={text}
          onChange={(udalost) => setText(udalost.target.value)}
          placeholder="Napiš vzkaz…"
        />
        <button type="submit">Odeslat</button>
      </form>
    </div>
  );
}

export default NavstevniKniha;

Tři poslední novinky Reactu:

useEffect(() => {...}, []) – „tohle spusť jednou, když se komponenta poprvé ukáže”. Ideální místo na stažení dat.
fetch s method: "POST" – posíláme data; JSON.stringify je zabalí do JSONu.
Propojené formuláře – políčko čte hodnotu ze state (value={jmeno}) a při psaní ji zapisuje zpět (onChange). Formulář a state jsou pořád ve shodě.

Teď ty 💪

Rozjeď obojí: v jednom terminálu server (node server.js), ve druhém React (npm run dev -- --port 3901). Dva terminály, dva programy – vítej ve full-stacku!
Zapoj <NavstevniKniha /> do své aplikace a vyzkoušej: napiš vzkaz, obnov stránku – vzkaz tam pořád je (dokud běží server).
Přizpůsob knihu projektu: 🏫 vzkazy pro školu · 🙋 vzkazník pro kamarády · 🌍 „kam máme vyrazit?” tipy od návštěvníků · ⚽ pokřiky fanoušků.
Zkus poslat prázdný vzkaz – frontend ho pustí (nemá kontrolu), ale server ho odmítne. Pak přidej kontrolu i do frontendu, ať je formulář slušný jako v Úrovni 2.

💡

Vzkazy po restartu serveru zmizí – bydlí jen v poli v paměti. Opravdové aplikace je ukládají do databáze, která přežije cokoli. To je první věc, kterou se nauč, až dokončíš tuhle úroveň – klíčová slova: SQLite, PostgreSQL.

✅

Kontrola: Vzkaz z formuláře docestuje do serveru, uloží se a po obnovení stránky se vrátí. Právě jsi postavil(a) full-stack aplikaci – frontend, backend, API. Tohle je přesně to, co dělají profesionální vývojáři každý den.

Co si z téhle lekce odnést

useEffect(..., []) stahuje data při prvním zobrazení; fetch s POST je odesílá.
Železné pravidlo bezpečnosti: server kontroluje každý vstup, i když frontend kontroluje taky.
Full-stack = dva běžící programy (3901 + 3900), které si povídají přes API.