Если много повторяющихся элементов, то да, шаблонизатор все гораздо упростит, но есть нюанс, кастомизация повторяющихся элементов в pug не так удобна. Итеррирование не так удобно. Если примешать js код то шаблон превращается в непонятную кашу.
Теоретически для всего этого можно использовать jsx, но надо будет повозиться.
Собственно пример. Штампуем компоненты, издеваемся над ними как хотим, в результате получаем html строку, которую можно записать в файл.
import fs from "fs";
import React from "react";
import ReactDOMServer from "react-dom/server";
const Label = () => <div className="label">Label text</div>;
const Text = ({ id }) => <div className="text">Block {id}</div>;
const Block = ({ id }) => {
return (
<div className="block">
<Label />
<Text id={id} />
</div>
);
};
const Document = () => {
const blocks = [];
for (let i = 0; i < 10; i++) {
blocks.push(<Block key={i} id={i} />);
}
return (
<html>
<head>
<title>Parcel Sandbox</title>
<meta charSet="UTF-8" />
</head>
<body>{blocks}</body>
</html>
);
};
const html = ReactDOMServer.renderToStaticMarkup(<Document />);
fs.writeFile("index.html", html);
