День 46 изучения MERN stack

Мой путь изучения MERN stack длится уже 46 дней.

Вчера я настроил Tailwind CSS. Сегодня я изучил шаблонизатор EJS.

До сегодняшнего дня мои HTML-страницы были статичными. Они не могли отображать изменения, приходящие с сервера.

EJS позволяет осуществлять рендеринг на стороне сервера (server-side rendering). Он создает HTML, используя актуальные данные из вашего бэкенда. Вы пишете логику на JavaScript прямо внутри вашего HTML.

Вот как я это настроил сегодня:

  • Я указал Express использовать EJS в качестве view engine.
  • Я создал директорию views для своих шаблонов.
  • Я использовал метод res.render для передачи данных на фронтенд.

Код выглядит так:

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);

Этот метод мгновенно связывает мои данные с моим UI.

Источник: https://dev.to/ali_hamza_589ec7b3eb6688d/day-46-of-learning-mern-stack-15dh