preact + htm, CDNで勉強メモ

knaka Tech-Blog 2023/10/17に更新

概要

preact + htm , CDNで試すメモになります

html, jsのみで、テストしました。
babelなど、今回使いません

環境

preact
htm

作成したコード

関連

preactjs, htm よみこみ
preact.renderで、描画
htmは、タグを書けて、JSXのようにレンダリングできるようでした。

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.5.13/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.min.js"></script>
<script>
const html = htm.bind(preact.h);
const App = props => html`<h1>Hello, ${props.name}!</h1>`;
preact.render(html`<${App} name="World" />`, document.body);
</script>

knaka Tech-Blog 2023/10/17

test12.html, 繰り返し等の例
id=root 等、追加しておく

test12.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/preact@10.5.13/dist/preact.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.min.js"></script>
    <script src="https://cdn.tailwindcss.com/3.3.2"></script>
    <title>Custom Bootstrap Alerts Position</title>
</head>
<body class="bg-light">
    <div class="container">
        <h3 class="text-3xl font-bold">test12.html</h3>
        <hr class="my-2" />
        <div id="root"></div>
        <hr class="my-2" />
        <div id="root2"></div>
        <div id="root3"></div>
    </div>
    <!-- CSS -->

<script src="./test12.js"></script>
</body>
</html>

js実装

h1を、くり返す例

test12.js

const html = htm.bind(preact.h);
const elem = document.getElementById("root");
//
const li = [];
const data = ['hoge1', 'hoge2', 'hoge3'];
for (var i in data) {
    li.push(html`<h1>Hello[ ${data[i]}]  - 000</h1>`);
};
preact.render(li, elem);

knaka Tech-Blog 2023/10/17

次の例、前後にHRを追加

test12.js

//
//root2
//
const li2 = [];
li2.push(html`<h1 class="text-3xl">li_2</h1>`);
li2.push(html`<hr class="my-2" />`);
for (var i in data) {
    li2.push(html`<h1>li2-Hello[ ${data[i]}]  - 111</h1>`);
};
li2.push(html`<hr class="my-2" />`);
preact.render(li2, document.getElementById("root2"));

knaka Tech-Blog 2023/10/17に更新

繰り返し表示、buttonに、clickイベントの追加
idを、追加しておき、addEventListener　でイベント追加の例です

test12.js

//
//root3
//
const li3 = [];
li3.push(html`<h1 class="text-3xl">li_3</h1>`);
li3.push(html`<hr class="my-2" />`);
for (var i in data) {
    let htm = html`
    <div>
        <h1>li2-Hello[ ${data[i]}]  - 111</h1>
        <button id="btn_id_${i}">[ Test ]</button>
    </div>
    `;
    li3.push(htm);
};
li3.push(html`<hr class="my-2" />`);
preact.render(li3, document.getElementById("root3"));
//event
for (let i in data) {
    const button= document.querySelector(`#btn_id_${i}`);
    button.addEventListener('click', () => { alert(data[i])}); 
}

このスクラップは2023/10/17にクローズされました