ReactからHTMLファイルへのエクスポートが可能か
解決したいこと
本来React等を使用するなら、
複数のページネーションや無限ロードが最適かと思われます。
それらが必要ないが、map等を使って手間を削減するために、
Reactを使ってページを作成し、
静的HTMLだけのエクスポートがしたいと思っています。
例
下記が例となりますが、更新頻度の低いサイトとなります.
他のUIフレームワークを増やしたい時とかにHTMLタグも記載するのはいささか面倒です。
(CSSや他のデータを使うとなおのこと)
とはいえ、build時に固定したデータを用いてエクスポートを行うので、
サイト上では動的に変化するわけではないため、わざわざReact等もビルドしてサイズの大きいファイルにするのは勿体無い(?)かと思ってしまいます。
何かしら方法があるのであれば教えていただきたいです。
data.json
{
"data": [
"Material UI",
"Bootstrap",
"Chakura UI",
"Ant Design"
]
}
import.jsx
import data from "./data.json";
export const App = () => {
const {data} = data;
return (
<>
{data.map(v=><div>{v}</div>)}
</>
);
};
上のimport.jsxを使って下記の静的ファイルを出力する
export.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>Material UI</div>
<div>Bootstrap</div>
<div>Chakura UI</div>
<div>Ant Design</div>
</div>
</body>
</html>
0
