วันที่ 46 ของการเรียนรู้ MERN Stack

วันที่ 46 ของการเรียนรู้ MERN Stack

ผมเดินทางมาถึงวันที่ 46 ในเส้นทางการเรียนรู้ MERN stack แล้ว

เมื่อวานผมติดตั้ง Tailwind CSS ส่วนวันนี้ผมได้เรียนรู้เรื่อง EJS templating engine

ก่อนหน้านี้ หน้า HTML ของผมเป็นแบบ static ซึ่งไม่สามารถแสดงการเปลี่ยนแปลงข้อมูลจาก server ได้

EJS ช่วยให้ทำ server-side rendering ได้ โดยมันจะสร้าง HTML โดยใช้ข้อมูลแบบ real-time จาก backend ของคุณ คุณสามารถเขียน logic ของ JavaScript ลงใน HTML ได้โดยตรง

นี่คือวิธีที่ผมตั้งค่าในวันนี้:

• ผมตั้งค่าให้ Express ใช้ EJS เป็น view engine
• ผมสร้าง directory ชื่อ views สำหรับเก็บ templates
• ผมใช้ method 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