𝗗𝗮𝘆 𝟰𝟲 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸

MERN Stack શીખવાનો ૪૬મો દિવસ

હું મારી MERN stack સફરમાં 46 દિવસ પૂરા કરી ચૂક્યો છું.

ગઈકાલે મેં Tailwind CSS સેટઅપ કર્યું હતું. આજે મેં EJS templating engine શીખ્યું.

આજ પહેલાં મારા HTML પેજ સ્ટેટિક હતા. તેઓ સર્વર પરથી થતા ફેરફારો બતાવી શકતા નહોતા.

EJS server-side rendering ની મંજૂરી આપે છે. તે તમારા backend માંથી લાઈવ ડેટાનો ઉપયોગ કરીને HTML બનાવે છે. તમે તમારા HTML ની અંદર સીધું જ JavaScript લોજિક લખી શકો છો.

આજે મેં તેને આ રીતે સેટઅપ કર્યું:

• મેં Express ને view engine તરીકે EJS નો ઉપયોગ કરવા કહ્યું.
• મેં મારા ટેમ્પલેટ્સ માટે views ડિરેક્ટરી બનાવી.
• મેં frontend પર ડેટા મોકલવા માટે 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