🛌

JSランタイム不要でもそれっぽいReact開発が可能になったので作ってみる。

2023/09/03に公開

JavaScript

前置き

初めに、JSランタイムとはNodeJSやDeno、Bunの事を指します。
従来からCDN版で提供はされてはいましたが、実践向きでは有りませんし、関数型コンポーネントに慣れ親しんでいる人には苦です。
そこで Moduleモードを使い、出来るだけNodeJS等で開発した時の要領で作ってみます。

今回はJSXではなくFReactという私が開発したシンタックスシュガーを使います。使い方はREADMEを見れば一分で理解できます。

Babel等を使えば出来ないことは無いんですが... (怠惰)

コードはGithubに上げています。是非forkして弄ってみて下さい。

まずはReactのCDNタグを置きます。

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

そしてsrcディレクトリを作りその中にindex.jsというファイルを作ります。
そしてmoduleモードで読み込みます。

<script type="module" src="src/index.js"></script>

いつものをindex.htmlに書きます。

<div id="app"></div>

index.js内で

import { $ } from "https://deno.land/x/freact/bundle.js";

function App() {
    return $.Fragment({},
        $.div({}, "Hello World")
    )
}

ReactDOM.createRoot(document.getElementById("app")).render(
    App()
)

これでHello worldが表示されます。
Appコンポーネントを他のファイル(App.js)に移します。

import { $ } from "https://deno.land/x/freact/bundle.js";

function App() {
    return $.Fragment({},
        $.div({}, "Hello World")
    )
}

これでHello worldが表示されました。
もちろんbabelを用いてやっても動きます。

今回使ったFReactですが、
Deno, NodeJS, Bun....の環境で使用可能です。

ランタイムでは

import { $ } from "https://deno.land/x/freact/mod.ts";

を使うのがオススメです。

前置き

Discussion