node.js を使わずに react を使ってみる

2021-08-27

概要

node.js や npm などを使わずに react アプリケーションを書く方法を試してみました。

html を用意

index.html を用意します。

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

index.js を module として読み込みます。

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

root となる div を定義しておきます。

<div id="root"></div>

パッケージ読み込み

esm.sh からパッケージを読み込みます。

htm
react-dom

htm は jsx の代替のテンプレートです。ビルドを行わなくても使うことができます。

import { html } from "https://esm.sh/htm/react";
import { render } from "https://esm.sh/react-dom";

hello world

とりあえず hello world と表示してみます。

const App = () => {
  return html`
    <div>
      <h3>hello world</h3>
    </div>
  `;
};

render(html`<${App} />`, document.querySelector("#root"));

useState を使ってみる

useState で state の管理をしてみます。

esm.sh からパッケージを読み込みます。

import { useState } from "https://esm.sh/react";

例としてカウンターを作ってみます。

const App = () => {
  const [counter, setCounter] = useState(0);

  const inc = () => {
    setCounter((i) => i + 1);
  };

  return html`
    <div>
      <button onClick=${inc}>${counter}</button>
    </div>
  `;
};

参考リンク

JavaScript モジュール - JavaScript | MDN

https://esm.sh

https://github.com/developit/htm