Livre d'or : frontend et backend ensemble

Ce qu’on construit

Un livre d’or : un formulaire dans React envoie un message à ton serveur, le serveur le sauvegarde, et l’affiche à chaque futur visiteur. Tu te souviens du formulaire du Niveau 2 qui n’avait nulle part où envoyer quoi que ce soit ? Aujourd’hui on rembourse cette dette.

Montre-moi : le backend du livre d’or

Dans le dossier my-server, installe d’abord un package de plus :

npm install cors

Et modifie server.js :

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

app.use(cors());           // allow the frontend on a different port to ask questions
app.use(express.json());   // understand JSON in incoming requests

const messages = [
  { name: "Martin", text: "First message! Long live the guestbook. 📖" },
];

// GET – hand out messages
app.get("/api/messages", (request, response) => {
  response.json(messages);
});

// POST – accept a new message
app.post("/api/messages", (request, response) => {
  const { name, text } = request.body;

  // Never trust input: check it on the server too!
  if (!name || !text || name.length > 50 || text.length > 500) {
    return response.status(400).json({ error: "Invalid message." });
  }

  messages.push({ name, text });
  response.json({ saved: true });
});

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

Nouveautés :

• cors() – le frontend tourne sur le port 3901, le serveur sur 3900. Les navigateurs bloquent normalement les requêtes « cross-origin » comme ça (une règle de sécurité appelée CORS) ; c’est comme ça qu’on l’autorise côté serveur.
• app.post(...) – ton premier endpoint POST ! Les données du formulaire apparaissent dans request.body.
• Vérification côté serveur – le frontend vérifie déjà le formulaire, mais un attaquant peut contourner le formulaire et envoyer une requête directement. C’est pourquoi la règle de fer s’applique : le backend vérifie toujours, et ne fait jamais confiance au frontend. status(400) signifie « mauvaise requête. »

Montre-moi : le frontend du livre d’or

Dans ton projet React, crée src/GuestBook.jsx :

import { useState, useEffect } from 'react';

function GuestBook() {
  const [messages, setMessages] = useState([]);
  const [name, setName] = useState("");
  const [text, setText] = useState("");

  // On first render: download the messages from the server
  useEffect(() => {
    fetch("http://localhost:3900/api/messages")
      .then((response) => response.json())
      .then((data) => setMessages(data));
  }, []);

  function submit(event) {
    event.preventDefault();

    fetch("http://localhost:3900/api/messages", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, text }),
    })
      .then((response) => response.json())
      .then(() => {
        setMessages([...messages, { name, text }]);  // add it to the screen too
        setName("");
        setText("");
      });
  }

  return (
    <div>
      <h2>Guestbook 📖</h2>

      {messages.map((message, index) => (
        <div className="card" key={index}>
          <strong>{message.name}</strong>
          <p>{message.text}</p>
        </div>
      ))}

      <form onSubmit={submit}>
        <input
          value={name}
          onChange={(event) => setName(event.target.value)}
          placeholder="Your name"
        />
        <textarea
          value={text}
          onChange={(event) => setText(event.target.value)}
          placeholder="Write a message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export default GuestBook;

Trois dernières nouveautés en React :

• useEffect(() => {...}, []) – « exécute ça une fois, quand le composant apparaît pour la première fois. » L’endroit idéal pour télécharger des données.
• fetch avec method: "POST" – on envoie des données ; JSON.stringify les emballe en JSON.
• Formulaires connectés – le champ lit sa valeur depuis le state (value={name}) et l’écrit en tapant (onChange). Le formulaire et le state restent toujours synchronisés.

À toi 💪

1. Fais tourner les deux : le serveur dans un terminal (node server.js), React dans l’autre (npm run dev -- --port 3901). Deux terminaux, deux programmes – bienvenue en full-stack !
2. Ajoute <GuestBook /> à ton app et essaie : écris un message, recharge la page – le message est toujours là (tant que le serveur tourne).
3. Adapte le livre d’or à ton projet : 🏫 messages pour l’école · 🙋 un tableau de messages pour les amis · 🌍 conseils « où devrions-nous aller ? » des visiteurs · ⚽ chants des supporters.
4. Essaie d’envoyer un message vide – le frontend le laisse passer (il n’a pas de vérification), mais le serveur le rejette. Puis ajoute une vérification au frontend aussi, pour que le formulaire soit aussi poli qu’au Niveau 2.

Ce que tu retiens de cette leçon

• useEffect(..., []) télécharge des données au premier rendu ; fetch avec POST les envoie.
• La règle de fer de la sécurité : le serveur vérifie chaque entrée, même quand le frontend vérifie aussi.
• Full-stack = deux programmes qui tournent (3901 + 3900) se parlant via une API.

© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu