Dzień 46 nauki stacku MERN

Jestem na 46. dniu mojej przygody ze stackiem MERN.

Wczoraj skonfigurowałem Tailwind CSS. Dzisiaj nauczyłem się silnika szablonów EJS.

Przed dzisiejszym dniem moje strony HTML były statyczne. Nie mogły wyświetlać zmian pochodzących z serwera.

EJS umożliwia renderowanie po stronie serwera (server-side rendering). Tworzy on HTML, korzystając z bieżących danych z backendu. Logikę JavaScript można pisać bezpośrednio wewnątrz HTML.

Oto jak to dzisiaj skonfigurowałem:

  • Ustawiłem w Expressie, aby używał EJS jako silnika widoków (view engine).
  • Utworzyłem katalog views dla moich szablonów.
  • Użyłem metody res.render, aby przesyłać dane do frontendu.

Kod wygląda następująco:

const express = require("express"); const app = express(); const users = require("./MOCK_DATA.json");

app.set("view engine", "ejs");

app.get("/users-list", (req, res) => { res.render("users", { allUsers: users }); });

app.listen(8000);

Ta metoda błyskawicznie łączy moje dane z interfejsem użytkownika (UI).

Źródło: https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh