deno で react を動かす

react

2020.09.07

deno で react を typescript(tsx) でとりあえず動かしたい場合、
以下の index.tsx コード数十行を実行するだけです。

tsconfig.json とか package.json　とかいじる必要ありません！

このコードは Servest というライブラリのおかげで動いています。

Servest
https://servestjs.org

すごい時代になりましたね。

macOS Catalina, deno 1.3.3, Servest 1.1.3 で確認済み

コードですが、Servest のサイトのサンプルコードをそのままです。

実行

% deno run --allow-net index.tsx

実行したらブラウザで http://localhost:8899 にアクセスして

Hello Servest!

とでたら成功です。

index.tsx

// @deno-types="https://servestjs.org/@v1.1.3/types/react/index.d.ts"
import React from "https://dev.jspm.io/react/index.js";
// @deno-types="https://servestjs.org/@v1.1.3/types/react-dom/server/index.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
import { createApp } from "https://servestjs.org/@v1.1.3/mod.ts";

const app = createApp();
app.handle("/", async (req) => {
  await req.respond({
    status: 200,
    headers: new Headers({
      "content-type": "text/html; charset=UTF-8",
    }),
    body: ReactDOMServer.renderToString(
      <html>
        <head>
          <meta charSet="utf-8" />
          <title> servest   </title>
        </head>
        <body> Hello Servest! </body>
      </html>
      ,
    ),
  });
});

app.listen({ port: 8899 });

Deno のオススメ本

Introducing Deno: A First Look at the Newest JavaScript Runtime

Beginning Deno Development

The Deno Handbook (Scots Gaelic Edition)