UserScriptでpreactを使う

Last updated Unknown Edit Source

• /villagepump, /programming-notes, /takkerの先人の知恵/ソースコードがとても役に立った
  • https://github.com/takker99/scrapbox-katex-previewer/blob/main/App.tsx
    • これとかシンプルで理解しやすいな
    • もちっとシンプルなの作りたいな

script.js

1
2
3
4
5
6

import {html, render} from 'https://scrapbox.io/api/code/programming-notes/htm@3.0.4%2Fpreact/script.js';

(() => {
	const root = document.getElementById('app-container');
	render(html`<p>Hello</p>`, root);
})()

• 最低限のrenderはこんな感じかな

  • スタイル加えるとこうなる
    • 
  • preact、後で自分でbundleしよう

• JSX記法のところは「html``」で括る必要がある感じか

  • JSX記法ではなく、 タグ付きテンプレートを用いてJSXもどきを生のJSだけで書けるようにしたやつです
  • https://github.com/developit/htm