اليوم ٤٦ من تعلم MERN Stack

لقد مضى ٤٦ يومًا على رحلتي في تعلم MERN stack.

بالأمس قمت بإعداد Tailwind CSS. واليوم تعلمت محرك القوالب EJS.

قبل اليوم، كانت صفحات HTML الخاصة بي ثابتة (static). لم تكن قادرة على عرض التغييرات القادمة من الخادم (server).

يتيح EJS عملية التصيير من جانب الخادم (server-side rendering). فهو يقوم بإنشاء HTML باستخدام بيانات حية من الخلفية (backend) الخاصة بك. يمكنك كتابة منطق JavaScript مباشرة داخل ملف HTML الخاص بك.

إليكم كيف قمت بإعداده اليوم:

  • أخبرت Express باستخدام EJS كمحرك للعرض (view engine).
  • أنشأت مجلد views لقوالبي.
  • استخدمت طريقة res.render لإرسال البيانات إلى الواجهة الأمامية (frontend).

يبدو الكود بهذا الشكل:

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